The Search for a Better Slider - Option 1


Userlevel 7
Badge +5

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!


60 replies

Userlevel 4
Badge +1

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

 

Userlevel 7
Badge +3

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.

Userlevel 7
Badge +5

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

Userlevel 4
Badge +1

:( 

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.

Userlevel 4
Badge +1

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… 

Userlevel 7
Badge +3

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 :)

Userlevel 4
Badge +1

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!

Userlevel 4
Badge +1

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! 

 

Reply