Streaming live at 10am (PST)

CMS slider with ability to add slides at specified times

As many of you know, Webflow does not currently offer a native CMS-driven slider nor the ability to schedule when those slides are added. I’ve created a pretty good work-around – it’s not perfect, and I hope others will be able to add to this post to help fill in missing pieces! Here’s how it’s done:

1.) Create a CMS Collection “Slides”. Add as many collection items (slides) as you want with as many collection fields you need.

2.) Open up a project, and place a div-block anywhere. Inside this div-block drop in a collection list and connect it to your CMS Collection “Slides.” Give this collection LIST 2 classes, owl-carousel and owl-theme. Along with 2 classes, give it an ID of slides. Add text, images, etc. as necessary to style your slides the way you want. Set the div-block to overflow: hidden. Then, give your collection item a class of collection-item.

3.) In order to clean up the project and make it work properly with the custom slider, set your collection LIST (not collection list wrapper) to display: flex horizontal, align: stretch, justify: start. At this point you should only see one collection item (slide) showing, as you would with a normal slider.

4.) Head over to the custom code section of your page, and inside the <head> tag, place the following code:

<!-- owl.carousel 2.3.4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha256-kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" />

Additional styles can be added below this using the <style> tag.

Similarly, before the </body> tag, place the following code:

<!-- owl.carousel 2.3.4 js -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- owl.carousel 2.3.4 Installation -->
<script>
  $(document).ready(function() {
		$('.owl-carousel').owlCarousel({
			/* global setting */
			loop: true,
			center: true,
			freeDrag: false,
			/* slide start at: */
			startPosition: 0,
			autoplay: true,
			autoplayTimeout: 4000,
			autoplayHoverPause: true,
      smartSpeed: 800,
      stagePadding: 0,
			autoWidth: false,
			margin: 0,
			responsive: {
				// Webflow Mobile Portrait - breakpoint from 0 up
				0: {
					items: 1,
					nav: true,
          dots: false,
				},
				// Webflow Mobile Landscape - breakpoint from 480 up
				480: {
					items: 1,
					nav: true,
          dots: false,
				},
				// webflow Tablet - breakpoint from 767 up
				767: {
					items: 1,
					nav: true,
          dots: false,
				},
				// webflow Desktop - breakpoint from 991 up
				991: {
					items: 1,
					nav: true,
          dots: true,
				}
			}
		})
	});
</script>

The code above can be modified according to your liking by checking out https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html.

5.) By now, if you publish your project, you should have a working CMS slider.

The question is, how can we automate this process to add slides based on a specified time?

This is where a little javascript comes into play.

6.) Back in your collection “Slides”, add a # field, which will be used assign each collection item in your list a unique ID. Set each slide with a different number, starting from 0 NOT 1.

7.) Inside of your collection item, drop in an embed widget and add the following code:

8.) Back in your custom code of your project page, add the following code before the close of the </body> tag:

<script>
window.setInterval(function() {

  var current = new Date();
  var publish = new Date("October 24, 2019 23:59:00")

  if (current.getTime() < publish.getTime()) {
    $('#item-0').remove();

  } else if (current.getTime() > publish.getTime()) {
    $('#item-0').attr("id", "item-0");
  }

}, 0);
</script>

“Item-0” acts as the 1st slide, so this number (0) can be changed pending on what slide you’d like to publish based on the unique ID number assigned to it in the collection. You will also change the date to whatever date you want to publish your new slide.

If you’d like to test this, set the publish date to ~1 minute ahead of when you’re going to publish your project to see if it will show at the correct time.

Once published, you should now have a dynamic slider than allows you to add slides as a specific time! No need to stay up late hours to launch a new promotion for whatever it may be. This could become extremely useful around the holiday season, with Black Friday & Cyber Monday.

The question then becomes this: In the javascript, how can we add a way to remove a slide as well based on another time variable? Also, is the script able to be made CMS-driven itself rather than having to manually change it each time?

Not perfect, but certainly leaps and bounds above what I had originally been able to accomplish :slight_smile:

1 Like

Thanks for sharing with the community @Jhart4595 :webflow_heart: