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. **/
/** 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. **/
/** 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 % **/
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.
@Baskaran venugopal - It had been my intention to create one that the user could control but I ran into some problems with HTML tags that Docebo does not support.
If I am able to figure out another way - I will certainly share it out.
@Baskaran venugopal - It had been my intention to create one that the user could control but I ran into some problems with HTML tags that Docebo does not support.
If I am able to figure out another way - I will certainly share it out.
Thanks @gstager
Hey guys,
I managed to place hyperlinks in the image, with that I took what was brilliantly created by the author of this post and made an adjustment in case you want to direct the user to some course or external website
<div id="bannerSlider"> <figure class="slider"> <figure> <a href="https://www.kolabori.com.br/" title="This is an HTML liked image"> <img alt="alternative text for the liked image" src="https://i.ibb.co/chGv7jy/Teste01.png" alt="Teste01" width="120" height="75" /> </a> </figure> <figure> <a href="https://www.kolabori.com.br/" title="This is an HTML liked image"> <img alt="alternative text for the liked image" src="https://i.ibb.co/C2CRf9F/Teste02.png" alt="Teste02" width="120" height="75" /> </a> </figure> <figure> <a href="https://www.kolabori.com.br/" title="This is an HTML liked image"> <img alt="alternative text for the liked image" src="https://i.ibb.co/r6PXRyQ/Teste03.png" alt="Teste03" width="120" height="75" /> </a> </figure> <figure> <a href="https://www.kolabori.com.br/" title="This is an HTML liked image"> <img alt="alternative text for the liked image" src="https://i.ibb.co/bz5RpNW/Teste04.png" alt="Teste04" width="120" height="75" /> </a> </figure> <figure> <a href="https://www.kolabori.com.br/" title="This is an HTML liked image"> <img alt="alternative text for the liked image" src="https://i.ibb.co/9G88cyN/Teste05.png" alt="Teste05" width="120" height="75" /> </a> </figure> </figure> </div>
Hi @gstager ! I’m another person who can’t use comslider because of lack of budget to spend on it currently, so thank you for providing this free version! I am encountering an issue though with the slider’s height.
I followed all your instructions and have the CSS and HTML placed what I believe is correctly, and the slider works! BUT the height isn’t adjusting to the images properly. I created one image as a test at the same size you used (1532x400) and have it in there 5 times just to test out the slider. It’s appearing as greatly blown up and pixelated, and it is WAY taller than 400px if I leave the “min width” line in the widget blank. If I put 400px in (the same height as the image) it appears at the right height, but creates the vertical scroll bar. I did what you suggested and didn’t rely on the desktop preview, but looked at the actual page, and unfortunately it’s showing the same thing. Thoughts on how to fix?
Top part of the widget...the whole image should be showing here, instead it’s blown up.Scrolled down from the image above. Note pixelation.
@JEntis
I leave the widget height blank
In the code - I always refer to the height as
height: auto;
It is the widths that change in the code to go with the number of images.
You basically have three figure slider CSS blocks to be mindful of.
figure.slider
figure.slider figure
figure.slider img
The figure.slider width should be the number of images multiplied by 100. So 5 images means the width should be 500%
For figure.slider figure the width represents the equal fraction of a whole that each image would be. So 5 images means the width should be 20%
For figure.slider img the width is 100% as we want each image to be the full width of the widget in its resting state.
The tricky part is that if you change the number of images - you have to tweak the code accordingly.
I start with a natively large image that closely meets a ratio on screen I am happy with so that I am usually scaling down rather than a small image that scales up.
Hopefully this gives a little more insight.
@gstager that’s what’s so weird about this, I didn’t change anything about the CSS at all, I kept the same number of images as you (5). I tried putting in a smaller image (800x400) and changing the widget layout to see if it would work better, and I get the same sort of thing:
Right next to it you can see the exact same picture, but in the Image widget. They should both appear as the same size right? The height in the HTML widget is blank.
I made another pair of images 1600x800 and put those in, alternating. Same result:
@JEntis - Instead of a 1600x800 - go with more of a 1600 x 400 for a full width widget. Keep the height of the source image the max height you want and provide a width that is long enough to accommodate a full screen in most cases.
**Make all images the exact same dimensions**
So have 5 images all 1600 x 400
If you have an image that is short on width - it will expand to 100% width and scale the height to match the ratio - which will result in the pixelated image that is way taller. That one image will affect the space for the others so that even if they don’t need to expand in height you’ll get a lot of white space then.
If you are going with a smaller widget - decrease the actual dimensions of the source image.
For a 1/3 widget - I might go with something around 150 or 200 for a height - and maybe 600 for width. Play around for best results there.
By leaving height at auto and having a long width - the majority of the time the image will shrink to fit the width rather than grow.
@gstager I figured it out! It was my actual image URL that was the problem, I’m using Imgbox to host and it turns out I was using the URL for the small square thumbnail for its image gallery and NOT the actual image. Oops! Once I got the right URL it worked perfectly Thank you for all your help!!
I also found Docebo’s widget widths for anyone else looking for an image dimension guide, this will help me in creating the final graphics for this slider, since I’m not sure yet where it will land in my homepage layout:
1/3 row width = 444px
1/2 row width = 680px
2/3 row width = 917px
Full row width = 1390px
@JEntis - Glad to hear you have it working!
@gstager me too! One more question...I thought the HTML widget was compatible with the Go.Learn mobile app and it looks like it mostly is… but maybe it can’t read the CSS fully because the images don’t appear as a slider on mobile, instead they display as a vertical row with their captions (see screenshot attached). I could solve for this by having two versions of the homescreen, one mobile and one desktop, with the mobile not using the HTML widget (I’d have it the images as a separate page in the side menu instead, which is what I know you have to do with the iFrame widget since mobile doesn’t support it). Do you think that’s what I’d have to do here, or is there another way?
I don’t use the mobile app feature so I cannot speak to that very much.
I have read through other posts, though, that many customizations are not compatible with the mobile side.
@JEntis yup, any changes that rely on things being added to the CSS area in looks and branding will be ignored by the mobile app, it’s a problem of the way the styles get injected and how mobile apps are built and whatnot. It is 100% a consideration to be taken into account with any CSS modification you add to your platform.
@gstager Great work on this - works amazingly well. Thank you!
Is there a way to allow the learner to advance the slider themselves? Some sliders I’ve seen have the dots in the middle of the images that correspond with the number of images in the slider that allow you to advance or go back, in addition to arrows on the left and right that do the same.
@dpatterson - thank you.
It has been a while since I have tinkered with this but if I recall correctly - I tried to achieve this as well but ran into some issues where Docebo stripped out some key code snippets needed to make that work as desired.
So this was awesome… and I had it working for months but then I made a change and now all the sudden my CSS is showing at the top of my widget…
any idea how to hide it?
This is showing instead of the slider in one of my pages, and then above the slider in the original page…
I was trying to use this slider on a different page with clickable links and was using this one as an example and saved over it.. .and now both my sliders are broken and no clickable links…
Any ideas?
So this was awesome… and I had it working for months but then I made a change and now all the sudden my CSS is showing at the top of my widget…
any idea how to hide it?
This is showing instead of the slider in one of my pages, and then above the slider in the original page…
I was trying to use this slider on a different page with clickable links and was using this one as an example and saved over it.. .and now both my sliders are broken and no clickable links…
Any ideas?
The CSS Goes in the configure branding and look….
The HTML goes in the widget….
If you put the CSS in the Widget it will show in the widget…
Okay second question… If I want to have two sliders with two different configurations… do I need to put multiple CSS? how do I do that?
Do I change #bannerSlider to
#bannerSlider2
Hey guys,
I managed to place hyperlinks in the image, with that I took what was brilliantly created by the author of this post and made an adjustment in case you want to direct the user to some course or external website
<div id="bannerSlider"> <figure class="slider"> <figure> <a href="https://www.kolabori.com.br/" title="This is an HTML liked image"> <img alt="alternative text for the liked image" src="https://i.ibb.co/chGv7jy/Teste01.png" alt="Teste01" width="120" height="75" /> </a> </figure> <figure> <a href="https://www.kolabori.com.br/" title="This is an HTML liked image"> <img alt="alternative text for the liked image" src="https://i.ibb.co/C2CRf9F/Teste02.png" alt="Teste02" width="120" height="75" /> </a> </figure> <figure> <a href="https://www.kolabori.com.br/" title="This is an HTML liked image"> <img alt="alternative text for the liked image" src="https://i.ibb.co/r6PXRyQ/Teste03.png" alt="Teste03" width="120" height="75" /> </a> </figure> <figure> <a href="https://www.kolabori.com.br/" title="This is an HTML liked image"> <img alt="alternative text for the liked image" src="https://i.ibb.co/bz5RpNW/Teste04.png" alt="Teste04" width="120" height="75" /> </a> </figure> <figure> <a href="https://www.kolabori.com.br/" title="This is an HTML liked image"> <img alt="alternative text for the liked image" src="https://i.ibb.co/9G88cyN/Teste05.png" alt="Teste05" width="120" height="75" /> </a> </figure> </figure> </div>
How did you get this to work? When I did this it just left a blank box… no images showed. I moved the a href= "https://www.kolabori.com.br/" inside the <img /> and then I got one to show but the link wasn’t clickable….
I’d love to get this to work….
From the sounds of it @sfrost you are mixing up your href’s. The one inside the img is for the link of the image itself, the <a> tag wrapped around the image is the link and the href inside that would be the link to navigate to.
<div id="bannerSlider"> <figure class="slider"> <figure> <a href="https://www.eventbrite.com/e/october-booster-in-boston-ma-tickets-726248257087?aff=Docebo”> <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” /> </figure> <figure> <a href="https://playmakeru.docebosaas.com/learn/course/106/superpower-hour?generated_by=13034&hash=108f8b1c964de7da6dd42619a66540dd668e8f80”> <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.” /> </figure> <figure> <a href="https://www.eventbrite.com/e/playmakers-in-action-tickets-726359931107?aff=Docebo”> <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 /> </figure> <figure> <a href="https://www.eventbrite.com/e/midyear-joyage-in-barnstable-ma-tickets-726240955247?aff=Docebo”> <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” /> </figure> </figure> </div>
<div id="bannerSlider"> <figure class="slider">
<figure> <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 href="https://www.eventbrite.com/e/october-booster-in-boston-ma-tickets-726248257087?aff=Docebo”/> </figure>
<figure>
<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 href="https://playmakeru.docebosaas.com/learn/course/106/superpower-hour?generated_by=13034&hash=108f8b1c964de7da6dd42619a66540dd668e8f80”/> </figure>
<figure> <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 href="https://www.eventbrite.com/e/playmakers-in-action-tickets-726359931107?aff=Docebo”/> </figure>
<figure> <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 href="https://www.eventbrite.com/e/midyear-joyage-in-barnstable-ma-tickets-726240955247?aff=Docebo”/> </figure> </div>
This is the code I just put in… clicked saved and then looked at the page
Only one unclickable image showed up….
when I went to edit this was all the code in the widget…
<div id="bannerSlider"> <figure class="slider"> <figure> <a href="https://www.eventbrite.com/e/october-booster-in-boston-ma-tickets-726248257087?aff=Docebo”> <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” /> </figure> <figure> <a href="https://playmakeru.docebosaas.com/learn/course/106/superpower-hour?generated_by=13034&hash=108f8b1c964de7da6dd42619a66540dd668e8f80”> <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.” /> </figure> <figure> <a href="https://www.eventbrite.com/e/playmakers-in-action-tickets-726359931107?aff=Docebo”> <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 /> </figure> <figure> <a href="https://www.eventbrite.com/e/midyear-joyage-in-barnstable-ma-tickets-726240955247?aff=Docebo”> <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” /> </figure> </figure> </div>
<div id="bannerSlider"> <figure class="slider">
<figure> <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 href="https://www.eventbrite.com/e/october-booster-in-boston-ma-tickets-726248257087?aff=Docebo”/> </figure>
<figure>
<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 href="https://playmakeru.docebosaas.com/learn/course/106/superpower-hour?generated_by=13034&hash=108f8b1c964de7da6dd42619a66540dd668e8f80”/> </figure>
<figure> <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 href="https://www.eventbrite.com/e/playmakers-in-action-tickets-726359931107?aff=Docebo”/> </figure>
<figure> <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 href="https://www.eventbrite.com/e/midyear-joyage-in-barnstable-ma-tickets-726240955247?aff=Docebo”/> </figure> </div>
This is the code I just put in… clicked saved and then looked at the page
Only one unclickable image showed up….
when I went to edit this was all the code in the widget…
So I am confused by which one you are actually using, the second block that you click saved and dissapeared is quite wrong, you merged the link tags(a) and the img tags. The first block you posted is closer, but you are missing the closing </a> after each image.
<div id="bannerSlider"> <figure class="slider"> <figure> <a href="https://www.eventbrite.com/e/october-booster-in-boston-ma-tickets-726248257087?aff=Docebo”> <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> <a href="https://playmakeru.docebosaas.com/learn/course/106/superpower-hour?generated_by=13034&hash=108f8b1c964de7da6dd42619a66540dd668e8f80”> <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> <a href="https://www.eventbrite.com/e/playmakers-in-action-tickets-726359931107?aff=Docebo”> <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> <a href="https://www.eventbrite.com/e/midyear-joyage-in-barnstable-ma-tickets-726240955247?aff=Docebo”> <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>
Notice the anchor (link tag) is wrapping each image. You have to be careful with the nesting.
Hey thanks so much for helping me try to get to the bottom of this. I want to use whatever code that will work. I know that I can get a carousel slider with CSS/HTML to work because I have a working one on a different page, the difference is this new one is supposed to have clickable links.
thank you for flagging that my link should wrap my image. Unfortunately, when I do that.. it the widget removes the image and I’m left with this
I copied this code and saved it in the widget:
<div id="bannerSlider"> <figure class="slider"> <figure> <a href="https://www.eventbrite.com/e/october-booster-in-boston-ma-tickets-726248257087?aff=Docebo”> <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> <a href="https://playmakeru.docebosaas.com/learn/course/106/superpower-hour?generated_by=13034&hash=108f8b1c964de7da6dd42619a66540dd668e8f80”> <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> <a href="https://www.eventbrite.com/e/playmakers-in-action-tickets-726359931107?aff=Docebo”> <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> <a href="https://www.eventbrite.com/e/midyear-joyage-in-barnstable-ma-tickets-726240955247?aff=Docebo”> <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>
then I clicked save and half of the code was mysteriously removed and I’m left with this… where the images are gone…
Not sure, I pasted your exact block into a html widget and saved and came back and it was fine. Usually when it is changed is either an unsupported element or bad formation.
@sfrost - hmmm
I want to refer to one part of this that I noticed at first glance.
In the portion above I notice a couple things.
The presence of both straight quotes and smart quotes. My experience has been to avoid smart quotes in code as it can break things. Often a result of copy/paste as well. Many editors will convert straight quotes into smart quotes.
The alt tag has both quotes up front rather than one at start and one at end.
The coloring of text gives a clue that something is not formatted correctly. (Flyer and <img src=”https: in red)
Docebo does strip out code that it doesn’t like.
Okay you all have definitely helped me but this is driving me bananas…
I have one slider that is working perfectly… both have four images and the same timing so the CSS should work for both even if they’re on 2 different pages… I’m assuming… The second one is showing up like this:
<div id="bannerSlider”> <figure class="slider"> <figure> <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.26.23 In-Person Booster.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="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> <!-- IMAGE 3. --> <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 Playmakers in Action.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="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>
I used this code pasted above… the only difference is I edited all the links in this code above to be to eventbrite.com and not the actual event link.
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.
Thank you for all your help!!
