The Search for a Better Slider - Option 1

This post is meant to be an attempt at helping folks implement a slider type of widget with images that cycle through in an endless loop. No interaction. Down the road, I will offer one that has some manual selection to it. That is why this is titled as option 1.

There has indeed been a number of postings referencing Comslider as a great resource for this sort of thing. I have not used it personally but I would venture a guess that it is much nicer and simpler than what I am about to offer here but this is free - so I guess you get what you pay for - LOL. At any rate - I figure that for some folks - Comslider may not be an option. If that is the case - you have one here.

This is a CSS and HTML option - no JavaScript. This would still require some work on your part to tweak it for your number of images and to put in your image URLs - etc. I will try to help with that part as best I can.

Here is a quick look at the one I built as a sample. Sorry it is a little small and blurry but I had to get it under the 5MB limit to post it in this thread. You get the idea though. My example cycles through four images continuously for about 5 seconds each. (I reduced time for the gif).

As with other things like this - there are two parts. The CSS for the Branding and Look section and the HTML for your widget.

In this case - I went with a full sized row for the widget.

Take a look at the @keyframes block at the top.

This will need adjusting if you change the number of images.

I calculated this out so each image had the same amount of percentage and percentage spacing in-between. This way the transition between images stays smooth at the same speed.

Also - I end the transition to the last image (same as first) right at 100% so that it can restart the animation at 0% with the first image for the same amount of time. That is one trick for the loop. The other trick is in the HTML. (see below)

What we are doing is actually sliding all the images off in a big line which is why the transitions are in increments of 100% so if you add more images or remove some - you’ll have to adjust to keep it smooth.

There are two other spots you’ll need to tweak if you change the number of images. See the comments for more on those.

/** This is the timing of the animated images. **/
/** These will need to be adjusted if you change the total number. **/

@keyframes slide {
  0% { left: 0%; }
  21% { left: 0%; }
  25% { left: -100%; }
  46% { left: -100%; }
  50% { left: -200%; }
  71% { left: -200%; }
  75% { left: -300%; }
  96% { left: -300%; }
  100% { left: -400%; }
  }

/** This block helps use the whole widget and keeps out scroll bars. **/

  #bannerSlider { 
    width: 100%;
    overflow: hidden; 
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It needs to correspond with the number of images you have. **/

  figure.slider { 
    position: relative;
    width: 500%;
    animation-name: slide; 
    animation-duration: 30s;
    animation-iteration-count: infinite;
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It should represent a fraction of the whole for each image. **/
/** Ex. 5 images - each image is 20 % **/

  figure.slider figure { 
    width: 20%;
    height: auto;
    display: inline-block; 
    position: inherit; 
  }

/** This block refers to each image. **/

  figure.slider img { 
      width: 100%;
      height: auto;
  }

/** This block formats the label caption at the bottom **/
/** You could tweak the colors and font as desired **/

  figure.slider figure figcaption { 
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #ffffff;
    width: 100%;
    font-size: 32px;
    padding: 10px; 
  }

Here is the HTML for the widget. I swapped out the specific details

The other trick to making this loop work - notice that there are five images but the first one and the fifth one are the same. So in a four image set - you are working with “5” images.

<div id="bannerSlider">
	<figure class="slider">
		<figure>
			<img src="https://path/to/your/image1.jpg" alt="" />
			<figcaption>Image 1 Caption</figcaption>
		</figure>
		<figure>
			<img src="https://path/to/your/image2.jpg" alt="" />
			<figcaption>Image 2 Caption</figcaption>
		</figure>
		<figure>
			<img src="https://path/to/your/image3.jpg" alt="" />
			<figcaption>Image 3 Caption</figcaption>
		</figure>
		<figure>
			<img src="https://path/to/your/image4.jpg" alt="" />
			<figcaption>Image 4 Caption</figcaption>
		</figure>
		<figure>
			<img src="https://path/to/your/image1.jpg" alt="" />
			<figcaption>Image 1 Caption</figcaption>
		</figure>
	</figure>
</div>

Hope this helps someone out today!

Page 3 / 3

I know you want the smart quotes to be the issue… but that’s not the issue… I have been correcting the smart quotes…

div id="bannerSlider">
	<figure class="slider">
<a href="https://www.eventbrite.com" target="_blank" rel="noreferrer noopener">
<img src="https://cdn5.dcbstatic.com/files/p/l/playmakeru_docebosaas_com/userfiles/13034/10.26.23%20In-Person%20Booster.png" alt="Flyer for the October 26 Playmaker Project In Person Booster" /></a>
</figure>
<figure><!-- IMAGE 2. -->
<a href="https://www.eventbrite.com" target="_blank" rel="noreferrer noopener">
<img src="https://cdn5.dcbstatic.com/files/p/l/playmakeru_docebosaas_com/userfiles/13034/10.23%20Superpower%20powe%20hour.png" alt="Flyer for the Fall 2023 virtual Superpower Power Hour workshop." /></a>
</figure>
<figure> <!-- IMAGE 3. -->
<a href="https://www.eventbrite.com" target="_blank" rel="noreferrer noopener">
<img src="https://cdn5.dcbstatic.com/files/p/l/playmakeru_docebosaas_com/userfiles/13034/10.23%20PML%20Playmakers%20in%20Action.png" alt="Flyer for the Playmaker Led November 2nd Playmakers in Action Event" /></a>
</figure>
<figure><!-- IMAGE 4. -->
<a href="https://www.eventbrite.com" target="_blank" rel="noreferrer noopener">
<img src="https://cdn5.dcbstatic.com/files/p/l/playmakeru_docebosaas_com/userfiles/13034/10.23%20PML%20Mid-year%20Retreat.png" alt="Flyer for the October 21st  Playmaker Led Mid Year Retreat" /></a>
</figure>

</div>

This is what it looks like when I don’t correct the smart quotes

Here is what I see…

Look at the beginning.

I saw that <figure class="slider"> was all colored red. That was a clue.

Looking just before that I saw the smart quote at the end of bannerSlider compared to the straight quote at the beginning.

It is subtle but life changing - lol

Start by deleting that smart quote and retyping it.

You should see the next line change colors a bit. I think that will help.

Tagging on to Greg’s excellent eyes here…..curious, what are you using to write out your text as you have been working on this @sfrost ? Hopefully it is not just in the browser or Word or similar, for things like this you really want a text editor without all the frills, I know a lot of folks around here use Notepad++, helps to avoid some of the issues you seem to be running into.

Now I see that your opening div tag is missing the lead-off angle bracket. <

My copy and pasting skills are sub-par… the div tag was there… I figured it out it has to do with the number of figures I have (4) and the BannerSlider in my window only accommodating 3…

My timing is still off but now I it’s sliding appropriately.

/** Begin Slider **/
/** This is the timing of the animated images. **/
/** These will need to be adjusted if you change the total number. **/

@keyframes slide {
  0% { left: 0%; }
  28% { left: 0%; }
  33% { left: -100%; }
  62% { left: -100%; }
  66% { left: -200%; }
  96% { left: -200%; }
  100% { left: -300%; }
  }

/** This block helps use the whole widget and keeps out scroll bars. **/

  #bannerSlider { 
    width: 100%;
    overflow: hidden; 
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It needs to correspond with the number of images you have. **/

  figure.slider { 
    position: relative;
    width: 400%;
    animation-name: slide; 
    animation-duration: 30s;
    animation-iteration-count: infinite;
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It should represent a fraction of the whole for each image. **/
/** Ex. 5 images - each image is 20 % **/

  figure.slider figure { 
    width: 25%;
    height: auto;
    display: inline-block; 
    position: inherit; 
  }

/** This block refers to each image. **/

  figure.slider img { 
      width: 100%;
      height: auto;
  }

/** This block formats the label caption at the bottom **/
/** You could tweak the colors and font as desired **/

  figure.slider figure figcaption { 
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #ffffff;
    width: 100%;
    font-size: 32px;
    padding: 10px; 
  }
  /** End Slider **/

Also I wouldn’t have anything even half working if it wasn’t for you creating this post and all the excellent commentary! I greatly appreciate it. Your contributions have elevated my organization’s page and I’m grateful.

Curious on your personal one Greg are you manually adding the content like you have above? I have built similar to this but too lazy to manually update all the time so usually have the html load dynamically from a SharePoint list. (Also let’s others load and update, and schedule changes) have you played with any kind of dynamic setup?

No - have not played with anything like that but I only have one slider at the moment and I don’t anticipate having to change out pictures so frequently as to become a burden.

We don’t have Sharepoint and I work outside of both IT and Marketing as a sort island unto myself so I cannot even access any web facing storage for files to even humor the idea of playing around. I just upload pictures via the HTML widget and use those URLs.

So it’s funny as I am not IT or marketing (or even the learning group now) the reason I use SharePoint is as a workaround for not having a proper content server, and it’s what we have :)

Basically the list acts as a database/lookup table that anyone in the company can be granted access to edit. The real beauty is the scheduling and the ability to distinguish slides for different roles (each role has a different homepage with gives a URL variable to check against).

I WOULD LOVE TO HAVE THIS ABILITY!!! (sorry for shouting this is sounds awesome)…

We want to have a slider that shows upcoming events and links out (hence all my comments today) and it would be great if we didn’t have to go into the code each time…

Yeah I often spend some time thinking about it as a potential fark.tools but the problem is it ends up in an iframe solve which people who can do that have any number of tools already. The other root is basically a wizard to help generate the code above and calculate it all for you, but havn’t wanted to step on Greg’s corner :)

I have one of these almost working that has 3 images instead of 5 and it’s good enough so I don’t want to mess with it… it does have a weird white space at the end… but this one with 5 images I have on a more visible page…

If I use 4 images with the css below it sort of works just the white space

If I use 5 images with the css below it doubles the images…

I’ve changed the name from Slider to Mover and used @gstanger CSS that’s posted above.

/** Begin Mover - This is for Events Pages **/
/** This is the timing of the animated images. **/
/** These will need to be adjusted if you change the total number. **/

@keyframes slide {
  0% { left: 0%; }
  21% { left: 0%; }
  25% { left: -100%; }
  46% { left: -100%; }
  50% { left: -200%; }
  71% { left: -200%; }
  75% { left: -300%; }
  96% { left: -300%; }
  100% { left: -400%; }
  }

/** This block helps use the whole widget and keeps out scroll bars. **/

  #bannerMover { 
    width: 100%;
    overflow: hidden; 
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It needs to correspond with the number of images you have. **/

  figure.mover { 
    position: relative;
    width: 500%;
    animation-name: slide; 
    animation-duration: 30s;
    animation-iteration-count: infinite;
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It should represent a fraction of the whole for each image. **/
/** Ex. 5 images - each image is 20 % **/

  figure.mover figure { 
    width: 20%;
    height: auto;
    display: inline-block; 
    position: inherit; 
  }

/** This block refers to each image. **/

  figure.mover img { 
      width: 100%;
      height: auto;
  }

/** This block formats the label caption at the bottom **/
/** You could tweak the colors and font as desired **/

  figure.mover figure figcaption { 
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #ffffff;
    width: 100%;
    font-size: 32px;
    padding: 10px; 
  }
  /** End Mover **/

<div id="bannerMover">
<figure class="mover">

<figure><!-- Mid Year Voyage. -->
<a href="https://www.eventbrite.com"target="_blank" rel="noopener noreferrer">
<img src="https://cdn5.dcbstatic.com/files/p/l/playmakeru_docebosaas_com/userfiles/13034/10.23 PML Mid-year Retreat.png" alt="Flyer for the October 21st  Playmaker Led Mid Year Retreat"/>
</a>
</figure>

<figure><!-- IMAGE OCTOBER BOOSTER. -->
<a href="https://www.eventbrite.com/e/october-booster-in-boston-ma-tickets-726248257087?aff=Docebo" target="_blank" rel="noopener noreferrer">
<img src="https://cdn5.dcbstatic.com/files/p/l/playmakeru_docebosaas_com/userfiles/13034/10.26.23 In-Person Booster.png" alt="Flyer for the October 26 Playmaker Project In Person Booster" />
</a>
</figure>
<figure> <!-- Playmakers in Action. -->
<a href="https://www.eventbrite.com/e/playmakers-in-action-tickets-726359931107?aff=Docebo"target="_blank" rel="noopener noreferrer">
<img src="https://cdn5.dcbstatic.com/files/p/l/playmakeru_docebosaas_com/userfiles/13034/10.23 PML Playmakers in Action.png" alt="Flyer for the Playmaker Led November 2nd Playmakers in Action Event"/>
</a>
</figure>
<figure><!-- SUPERPOWER HOUR. -->
<a href="https://playmakeru.docebosaas.com/learn/course/106/superpower-hour?generated_by=13034&hash=108f8b1c964de7da6dd42619a66540dd668e8f80"target="_blank" rel="noopener noreferrer">
<img src="https://cdn5.dcbstatic.com/files/p/l/playmakeru_docebosaas_com/userfiles/13034/10.23 Superpower powe hour.png" alt="Flyer for the Fall 2023 virtual Superpower Power Hour workshop." /></a>
</figure>
<figure><!-- Mid Year Voyage. -->
<a href="https://www.eventbrite.com/e/midyear-joyage-in-barnstable-ma-tickets-726240955247?aff=Docebo"target="_blank" rel="noopener noreferrer"
>
<img src="https://cdn5.dcbstatic.com/files/p/l/playmakeru_docebosaas_com/userfiles/13034/10.23 PML Mid-year Retreat.png" alt="Flyer for the October 21st  Playmaker Led Mid Year Retreat" />
</a>
</figure>
</figure>
</div>

When I remove a figure it shows as a slider but the timing isn’t quite right… (I did change the dimensions of the images to 1532 x 400 because they were previously 1800 x 600 and I thought that might make a difference… unfortunately, it did not..

Hello!

I am having trouble with the HTML portion. How do I upload, per say, my images. I created images in Canva. Any help is super appreciated.

Thank you!

Hello!

I am having trouble with the HTML portion. How do I upload, per say, my images. I created images in Canva. Any help is super appreciated.

Thank you!

What I do is create a fake page that has an HTML widget, then I upload the pictures onto that widget and when I get to the insert edit image grab the source link and use that for the IMG SRC section.

I hope that helps.

Hello!

I am having trouble with the HTML portion. How do I upload, per say, my images. I created images in Canva. Any help is super appreciated.

Thank you!

What I do is create a fake page that has an HTML widget, then I upload the pictures onto that widget and when I get to the insert edit image grab the source link and use that for the IMG SRC section.

I hope that helps.

I am also new to the HTML/CSS game. I have images saved in Canva that we want to use. I tried to use the embed link that Canva provides, however the images do not show up. I don’t know how to create a fake page with an HTML widget. Any additional suggestions are greatly appreciated!

If I use 4 images with the css below it sort of works just the white space

If I use 5 images with the css below it doubles the images…

I’ve changed the name from Slider to Mover and used @gstanger CSS that’s posted above.

I am having the same issue, I copied the code exactly as is in the original post and just changed the url’s for the images. On my side I believe it is being caused by padding as I can clearly see padding on the images however there is no padding set in the code. Did you find a solution?

My example uses four unique photos. The code is specific to that.

If you change the number of photos - that’s OK - but you will need to make some other tweaks for it to work smoothly.

Consider this post from earlier in the thread -

lizaa wrote:

Thanks Greg, I will give that a shot. Can I ask, how did you determine timing for each slide? For example, if I use 3 slides instead of 4. Or even increase to 5 how do I account for such changes?

Good question.

Once you decide the number of images and total duration of the animation we can use that information to make the adjustments in a few places.

Take a look at the following three blocks of code.

In my example, I use four images but I actually use the first image twice so that it appears at the beginning and end of the animation. This helps it give the appearance of smoothly starting over from the beginning. So I have only four unique images but I must configure for 5. The highlighted value is the percentage of the whole that each of the five images would be 100 ÷ 5 = 20. You will adjust this value accordingly if 3 unique images - Use first one twice - so 4 images (100 ÷ 4 = 25) set the width for 25%.

Now take a look at the next block.

In this block I have two things to adjust. The width will be 100% for every image. In my example 4 unique images but we use the first one twice - so five images total. Therefore width is 500%

The animation duration is a more loosely calculated value. This is the amount of time for the entire animation to run from start to finish so just consider how long you would like each image to show and multiply that out. 30 seconds allows 5 images to show for approximately 6 seconds (little less) each with some time in between with transitions.

Now look at the keyframes block. This will be the mind boggler.

For smoothness of timing - I I worked to make all the percentages follow a pattern.

First of all I have five different percentages - one for each image - starting with 0%

If you add images, you’ll simply need to divvy up the percentages more. You may need to do a little trial and error to get the feel you like. With my example I liked the transition time that 4% gave me and there were four transitions so that is 16% of my total animation duration leaving me with 84% for static display which for the four images is 21% each. I then simply segmented my 100% up that way.

If I put in an extra picture, I might start with a couple options for test.

4% transition time x 5 or 20% of total leaving 80% static display for a total of 16% each picture.
3% transition time x 5 or 15% of total leaving 85% static display for a total of 17% each picture.

Adjust the total duration to affect the desired outcome.

Here is what using option 2 above would look.

/** For five pictures **/

@keyframes slide {
  0% { left: 0%; }
  17% { left: 0%; }
  20% { left: -100%; }
  37% { left: -100%; }
  40% { left: -200%; }
  57% { left: -200%; }
  60% { left: -300%; }
  77% { left: -300%; }
  80% { left: -400%; }
  97% { left: -400%; }
  100% { left: -500%; }
  }

I hope this made some sense.

@gstager I hope you’re doing well.

I ran into a couple of issues with the image slider. When I tested it out last year, it worked fine.

Now, when I tried to utilize these handy codes to implement sliders, it didn’t work well. I’ve adjusted a lot with the image sizes, slider timings, image width percentage, and so on. However, I couldn’t fix the issue.

I can see the first and last image on the first slide itself rather than on a separate slide. I’ve applied the codes to 5 images (4 unique). Furthermore, I notice gaps or overlaps between each image in the widgets, even though I've made sure the CSS code aligns 100% with each image. But still, it doesn’t help. Attached a video for your reference.

I know I’m missing something on the CSS/HTML part, but I couldn’t figure it out. I appreciate your help.

@Baskaran venugopal - sorry for the delay - I have been out on holiday.

I would start by making sure that your source images are all exactly the same dimensions.

@gstager I want to thank you for sharing code to do a carousel banner. I am a novice with css/html and am inspiring to learn more. Thank you for adding in all the comments it is helping me learn.

@gstager I hope you’re doing well.

I ran into a couple of issues with the image slider. When I tested it out last year, it worked fine.

I know I’m missing something on the CSS/HTML part, but I couldn’t figure it out. I appreciate your help.

I’m having the same issue. I used the WYGIWYG for hosting the images files, and it seems they have 1px between them that is making the images not fit into the frame properly. I changed the width slightly so they fit in the box better. It still leaves a 1px outline at the bottom and right, but it’s better than the image bleed and allows you to add that 5th image properly.

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It should represent a fraction of the whole for each image. **/
/** Ex. 5 images - each image is 20 % **/

  figure.slider figure { 
    width: 19.85%;
    height: auto;
    display: inline-block; 
    position: inherit; 
  }

After finding out that comslider is not something I can use at my organization for security reasons, I endeavored to use this solution. And oh wow my “knows enough to be dangerous” level of expertise did not prepare me for the amount of math I had to do to make this work with three images instead of four.

To save you some time, below is my CSS for using three images. To make this look right, make sure there are actually four images in your slideshow, but the first image should also be your last image. Enjoy!

/** Begin Slider **/
/** This is the timing of the animated images. **/
/** These will need to be adjusted if you change the total number. **/

@keyframes slide {
  0% { left: 0%; }
  28% { left: 0%; }
  33% { left: -100%; }
  62% { left: -100%; }
  66% { left: -200%; }
  96% { left: -200%; }
  100% { left: -300%; }
  }

/** This block helps use the whole widget and keeps out scroll bars. **/

  #bannerSlider { 
    width: 100%;
    overflow: hidden; 
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It needs to correspond with the number of images you have. **/

  figure.slider { 
    position: relative;
    width: 400%;
    animation-name: slide; 
    animation-duration: 30s;
    animation-iteration-count: infinite;
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It should represent a fraction of the whole for each image. **/
/** Ex. 5 images - each image is 20 % **/

  figure.slider figure { 
    width: 25%;
    height: auto;
    display: inline-block; 
    position: inherit; 
  }

/** This block refers to each image. **/

  figure.slider img { 
      width: 100%;
      height: auto;
  }

/** This block formats the label caption at the bottom **/
/** You could tweak the colors and font as desired **/

  figure.slider figure figcaption { 
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #ffffff;
    width: 100%;
    font-size: 32px;
    padding: 10px; 
  }
  /** End Slider **/

@gstager is there a way to add both 3 and 4 image carousels? I know I can amend the name of the slider to slider3 or something, but what about the @keyframes at the beginning? Also @ktbadham thanks for doing the math!

Answered my own question. Here it is for anyone else (no caption but you can add if you desire):

Edit: the width is adjusted for WYSIWYG images. Set it to 25% if you are linking directly.

/** Slider with 3 images **/

@keyframes slide3 {
  0% { left: 0%; }
  28% { left: 0%; }
  33% { left: -100%; }
  62% { left: -100%; }
  66% { left: -200%; }
  96% { left: -200%; }
  100% { left: -300%; }

  }

/** This block helps use the whole widget and keeps out scroll bars. **/

  #bannerSlider3 { 
    width: 100%;
    overflow: hidden; 
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It needs to correspond with the number of images you have. **/

  figure.slider3 { 
    position: relative;
    width: 400%;
    animation-name: slide3; 
    animation-duration: 30s;
    animation-iteration-count: infinite;
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It should represent a fraction of the whole for each image. **/
/** Ex. 5 images - each image is 20 % **/

  figure.slider3 figure { 
    width: 24.8%;
    height: auto;
    display: inline-block; 
    position: inherit; 
  }

/** This block refers to each image. **/

  figure.slider3 img { 
      width: 100%;
      height: auto;
  }

And here is the HTML:

<div id="bannerSlider3">
<figure class="slider3">

<figure><a href="LINK"> <img src="IMAGE 1" alt="" /></a></figure>

<figure><a href="LINK"> <img src="IMAGE 2" alt="" /></a></figure>

<figure><a href="LINK"> <img src="IMAGE 3" alt="" /></a></figure>

<figure><a href="LINK"> <img src="IMAGE 1" alt="" /></a></figure>


</figure>
</div>

Reply

Still haven't found what you're looking for?

Sign up for Docebo Community

Log in to Docebo Community

Scanning file for viruses.

This file cannot be downloaded