Found what you have been looking for?

Search
Generic filters
Exact matches only
Filter by Categories
Customization
Domains
Lightroom Plugin
Tools and Tips
Custom Slideshow with preloader for SmugMug

Full-screen custom slideshow for SmugMug, with a preloader

A while ago I added a custom slideshow to my homepage – www.photom.me and many of you have been asking me to write a tutorial for it.

This slideshow works great on any screen size; it can also be used on different layouts. On my homepage I used it on a layout with sidebar on the left side.

HTML content block

Add a HTML content block to the page, where you would like the slideshow to appear. In my case I have added it to my homepage. The HTML content block can be found here { see my screenshot }:

SmugMug - HTML content block.

The HTML content block contains two tabs – HTML and CSS code. In this part we will focus on the HTML code. In this code we will specify which photos we would like to show in the slideshow. Horizontal images work best in this slideshow.

<!-- container -->
<div class="container">
    <div class="progress-bar"></div>
    <!-- slides -->
    <div class="slides">

      <div class="slide" style="background-image: url(https://photos.smugmug.com/Personal/Leicestershire/i-PjNdtzX/0/8b39779a/X4/leicester-lights-2020_29-X4.jpg);">
      </div>

      <div class="slide" style="background-image: url(https://photos.smugmug.com/Personal/USA/i-R5df7KQ/7/5d647a98/4K/grand-canyon-sunrise-4K.jpg);">
      </div>

      <div class="slide" style="background-image: url(https://photos.smugmug.com/Personal/USA/i-j2xgVgP/7/2237952f/4K/the-beginning-4K.jpg);">
      </div>

      <div class="slide" style="background-image: url(https://photos.smugmug.com/Personal/USA/i-mnmqgCV/4/44187045/4K/_DSC4945-4K.jpg);">
      </div>

      <div class="slide" style="background-image: url(https://photos.smugmug.com/Personal/USA/i-JFmTZTw/1/896059a4/4K/_DSF4877-4K.jpg);">
      </div>
    </div>
    <!--/ slides /-->

</div>
<!--/ container /-->

You will need to replace the image links between brackets () with links to your own images. You do not want to show my photos in your slideshow :p

As you can see – I have used only 5 photos – in my opinion, this is a sweet spot between good slideshow performance and loading time. You can remove one of these lines or add one more to add more to it – but I would not recommend – because your page may load slowly because of that:

<div class="slide" style="background-image: url(https://photos.smugmug.com/Personal/USA/i-JFmTZTw/1/896059a4/4K/_DSF4877-4K.jpg);">
      </div>

CSS Code

Open the CSS tab within the HTML content block and add this code to it:

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  overflow: hidden;
}

.container .slides {
  position: relative;
  height: 100vh;
}

.container .slides .slide {
  position: absolute;
  height: 100vh;
  width: 100%;
  left: 0;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}




.container .slides .slide:nth-child(1) {
  -webkit-animation: slide1 25s linear infinite;
  animation: slide1 25s linear infinite;
}
.container .slides .slide:nth-child(2) {
  -webkit-animation: slide2 25s linear infinite;
  animation: slide2 25s linear infinite;
}

.container .slides .slide:nth-child(3) {
  -webkit-animation: slide3 25s linear infinite;
  animation: slide3 25s linear infinite;
}
.container .slides .slide:nth-child(4) {
  -webkit-animation: slide4 25s linear infinite;
  animation: slide4 25s linear infinite;
}
.container .slides .slide:nth-child(5) {
  -webkit-animation: slide5 25s linear infinite;
  animation: slide5 25s linear infinite;
}

@keyframes slide1 {
  12% {
    opacity: 1;
    z-index: 1;
  }
  16% {
    opacity: 0;
    z-index: 0;
  }
  17% {
    opacity: 0;
    z-index: 0;
  }
  87% {
    opacity: 0;
    z-index: 0;
  }
  92% {
    opacity: 0;
    z-index: 0;
  }
  100% {
    z-index: 1;
    opacity: 1;
  }
}
@keyframes slide2 {
  0% {
    opacity: 0;
    z-index: 0;
  }
  12% {
    opacity: 0;
    z-index: 0;
  }
  16% {
    opacity: 1;
    z-index: 1;
  }
  20% {
    opacity: 1;
    z-index: 1;
  }
  32% {
    opacity: 1;
    z-index: 1;
  }
  36% {
    opacity: 0;
    z-index: 0;
  }
  37% {
    opacity: 0;
    z-index: 0;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}
@keyframes slide3 {
  0% {
    opacity: 0;
    z-index: 0;
  }
  32% {
    opacity: 0;
    z-index: 0;
  }
  36% {
    opacity: 1;
    z-index: 1;
  }
  40% {
    opacity: 1;
    z-index: 1;
  }
  52% {
    opacity: 1;
    z-index: 1;
  }
  56% {
    opacity: 0;
    z-index: 0;
  }
  57% {
    opacity: 0;
    z-index: 0;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}
@keyframes slide4 {
  0% {
    opacity: 0;
    z-index: 0;
  }
  52% {
    opacity: 0;
    z-index: 0;
  }
  56% {
    opacity: 1;
    z-index: 1;
  }
  60% {
    opacity: 1;
    z-index: 1;
  }
  72% {
    opacity: 1;
    z-index: 1;
  }
  76% {
    opacity: 0;
    z-index: 0;
  }
  77% {
    opacity: 0;
    z-index: 0;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}
@keyframes slide5 {
  0% {
    opacity: 0;
    z-index: 0;
  }
  72% {
    opacity: 0;
    z-index: 0;
  }
  76% {
    opacity: 1;
    z-index: 1;
  }
  80% {
    opacity: 1;
    z-index: 1;
  }
  92% {
    opacity: 1;
    z-index: 1;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 5px;
  background: #0045d4; /*Change this colour to your own colour - this colour is for the preloader/progress bar that appears at the top of the slideshow*/
  -webkit-animation: processbar 25s ease infinite;
  animation: processbar 25s ease infinite;
}

@keyframes processbar {
  0%,
  16%,
  36%,
  56%,
  76%,
  100% {
    width: 0%;
    opacity: 0;
  }
  0%,
  20%,
  40%,
  60%,
  80% {
    width: 0%;
    opacity: 0.4;
  }
  12%,
  32%,
  52%,
  72%,
  92% {
    width: 100%;
    opacity: 1;
  }
  13%,
  33%,
  53%,
  73%,
  93% {
    width: 100%;
    opacity: 0.4;
  }
  14%,
  34%,
  54%,
  74%,
  94% {
    width: 100%;
    opacity: 0;
  }
}

@media only screen and (max-width: 768px) {
  .container .slides .slide .captions {
    max-width: 90%;
  }
}

The CSS code includes instructions on how to change the colour of the preloader/progress bar.

Now just publish your changes and enjoy the slideshow.

TIP: You may want to remove the top/bottom/left/right margins from the HTML content block.

custom slideshow, full screen slideshow, mobile ready, preloader, slideshow


Tomasz Nowicki

My name is Tomasz Nowicki and I am a PHOTOGRAPHER and WEB DESIGNER based in the UK. Few years ago I have created my first website using SmugMug - a powerful platform for any type of photographer. I fell in love with it and from day one I have started exploring the possibilities of customizing my website. PHOTOM Portal is a my personal SmugMug knowledge base website where you can find some tips and tricks on how to use and get the most out of your SmugMug website.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.