Customized Slideshow/Carousel of Pages?

Anh Tu Nguyen

Hi folks,
so far I know that you can only create carousel/slideshow of photos with smugmug. Is there any way to create customized slideshow/carousel of pages that I choose with CSS like the photo below?

Hikin' Mike

No. You can only create slideshows using photos.

Anh Tu Nguyen

@Hikin' Mike said:
No. You can only create slideshows using photos.

Thank you Mike is there any to manually do it with css/html block?

Hikin' Mike

@Anh Tu Nguyen said:
Thank you Mike is there any to manually do it with css/html block?

If there is a way, it's beyond my pay grade.

Hikin' Mike

I did some searching and I found this: https://codeconvey.com/pure-css-slideshow-autoplay-without-javascript/

Anh Tu Nguyen

@Hikin' Mike said:
I did some searching and I found this: https://codeconvey.com/pure-css-slideshow-autoplay-without-javascript/

Really appreciate that you went out of your way to help Mike! How do I add make each slide to a clickable hyperlink?

Hikin' Mike

@Anh Tu Nguyen said:
Really appreciate that you went out of your way to help Mike! How do I add make each slide to a clickable hyperlink?

No problem. I assume you've downloaded their files. You just have to add the <a href="link-here"> and end it with the ` as shown here:

<div class="slider">
  <a href="link-here">
    <div class="legend"></div>
    <div class="content">
      <div class="content-txt">
        <h2>Lorem ipsum dolor</h2>
        <p>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</p>
      </div>
    </div>
    <div class="image"><img src="image-here"></div>
  </a>
</div>

Note: I've only shown one slide. Obviously you'll have to do all of them.

Anh Tu Nguyen

Thank you Mike it works good so far on desktop - just need a few tweaks here and there.
In mobile the text doesn't show up and do you know if there is a way to make this vertical on mobile? www.tunguyenwedding.com

Second: how do I add the Browse with hyperlink to the gallery and the left/right arrow like this: https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=1600/https://us.v-cdn.net/6029383/uploads/editor/hh/67rjpcz2fm3e.jpg

Third: when I add more than 4 slides, it only runs to the 4th slide then goes back to the first one. See here https://www.tunguyenwedding.com/

Fourth: different slides with different height. How can I make them have the same height?

Hikin' Mike

@Anh Tu Nguyen said:
Thank you Mike it works good so far on desktop - just need a few tweaks here and there.
In mobile the text doesn't show up and do you know if there is a way to make this vertical on mobile? www.tunguyenwedding.com

No idea.

Second: how do I add the Browse with hyperlink to the gallery and the left/right arrow like this: https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=1600/https://us.v-cdn.net/6029383/uploads/editor/hh/67rjpcz2fm3e.jpg

I don't think it's possible.

Third: when I add more than 4 slides, it only runs to the 4th slide then goes back to the first one. See here https://www.tunguyenwedding.com/

There is a comment about somebody using 5 images near the bottom of the page: https://codeconvey.com/pure-css-slideshow-autoplay-without-javascript/. This is a copy/paste from that comment:

@keyframes slide {

  0%,100% {margin-left: 0%;} /* Banner #1 */
  14.05% {margin-left: 0%;}

  20.55% {margin-left: -100%;} /* Banner #2 */
  34.55% {margin-left: -100%;}

  41.05% {margin-left: -200%;} /* Banner #3 */
  55.05% {margin-left: -200%;}

  61.55% {margin-left: -300%;} /* Banner #4 */
  75.55% {margin-left: -300%;}

  82.05% {margin-left: -400%;} /* Banner #5 */
  96.05% {margin-left: -400%;}

}

I really don't have any experience using @keyframes, so I really can't help.

Fourth: different slides with different height. How can I make them have the same height?

Make all of your photos the same.

Anh Tu Nguyen

@Hikin' Mike said:

@Anh Tu Nguyen said:
Thank you Mike it works good so far on desktop - just need a few tweaks here and there.
In mobile the text doesn't show up and do you know if there is a way to make this vertical on mobile? www.tunguyenwedding.com

No idea.

In theory I can create a similar carousel but with vertical photos for mobile and hide the vertical carousel on desktop and hide the horizontal carousel on mobile right? How do I hide them with CSS? Thank you so much Mike

Anh Tu Nguyen

@Hikin' Mike said:

Second: how do I add the Browse with hyperlink to the gallery and the left/right arrow like this: https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=1600/https://us.v-cdn.net/6029383/uploads/editor/hh/67rjpcz2fm3e.jpg

I don't think it's possible.

We can add arrow nav using code like this I guess?
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel_icon&stacked=h
https://codepen.io/andata/pen/aZrorP
https://codepen.io/tutsplus/pen/MWZwrGJ

Hikin' Mike

@Anh Tu Nguyen said:
In theory I can create a similar carousel but with vertical photos for mobile and hide the vertical carousel on desktop and hide the horizontal carousel on mobile right? How do I hide them with CSS? Thank you so much Mike

Yes, that's what I would do. You need to locate your SmugMug's Node or Widget Number (https://gallery.imagesinthebackcountry.com/Smugmug-customization/Locating-Your-SmugMugs-Node-or-Widget-Number). Just change sm-page-widget-xxxxxxxx to your number and you should be good. This one sm-page-widget-37181197 is for your Desktop.

/*
* Hides/Shows Slideshow on Mobile/Desktop
**********************************************/
.sm-user-ui .sm-page-widget-html.sm-page-widget-xxxxxxxx {
  /* Mobile */
  display: none;
}

@media only screen and (max-width: 768px) {

  .sm-user-ui .sm-page-widget-html.sm-page-widget-37181197 {
  /* Desktop */
    display: none;
  }

  .sm-user-ui .sm-page-widget-html.sm-page-widget-xxxxxxxx {
  /* Mobile */
    display: block;
  }

}

Hikin' Mike

@Anh Tu Nguyen said:
We can add arrow nav using code like this I guess?

First and last one uses Javascript, so no. The middle one is fine.

Hikin' Mike

The reason the text doesn't show up on Mobiles is because you changed height of the #slider from 500px to 100%. It needs a specific number.