How to: Dynamic CMS slider - Integrating OwlCarousel2.js (slider) & Webflow CMS collection

[Siton_Systems (Ezra Siton)]

** Basic JS knowledge require.

Demo: https://test-c0d8d3.webflow.io/owl

Owl Carousel 2

Free Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Combine webflow CMS and Owl Carousel 2 (Touch and Drag Support, Responsive, Over 60 options, support Modern Browsers).

---

Step 1/3 - Create collection

Setup CMS collection. Start her: CMS | Webflow University

---

Step 2/3 - Site Tree

A. Add collection list

B. Connect to a collection:

C. Add elements & connect elements to collection fields:

D IMPORTANT
Add owl-carousel class & owl-theme (Two separate classes) to collection list (Not to collection wrapper).

---

Step 3/3 - Custom code

Read the docs:

• Docs
• Github

3.1 - CSS before head

custom code before head (CSS) - Copy paste

<!-- 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" />

3.2 JS before body

custom code before body (Javascript) - Copy paste.

** I set some custom options (Docs: api-options // demos)

<!-- 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: false,
			freeDrag: false,
			/* slide start at: */
			startPosition: 0,
			autoplay: true,
			autoplayTimeout: 5000,
			autoplayHoverPause: true,
			autoWidth: false,
			margin: 10,
			responsive: {
				// Webflow Mobile Portrait - breakpoint from 0 up
				0: {
					items: 1,
					nav: true,
				},
				// Webflow Mobile Landscape - breakpoint from 480 up
				480: {
					items: 1,
					nav: true,
				},
				// webflow Tablet - breakpoint from 767 up
				767: {
					items: 3,
					nav: true,
				},
				// webflow Desktop - breakpoint from 991 up
				991: {
					items: 3,
					nav: true,
				}
			}
		})
	});
</script>

Publish ==> Output:

---

Wishlist Related:

Please vote for this idea:
Wishlist - CMS Slider:
https://wishlist.webflow.com/ideas/WEBFLOW-I-94

[Siton_Systems (Ezra Siton)]

Dynamic CMS slider more options:

A. Pagination

How to create a CMS-powered slider | Webflow Blog

Cons of Pagination: Not Touch and Drag Support.

B. Manually (Touch and Drag Support)

Use webflow slider and manually limit the slides content:

• slide1 - collection start at 1 show 1
• slide2 - collection start at 2 show 1

(Tidy but will work):

CMS and Sliders

Hello, Yaco! It’s pretty simple to set-up a slider that is able to be edited from the Webflow CMS. I put together a 7min long video of how to set this up really quick from scratch without using any custom code. Hope this helps Screencast Video: Slide + CMS Best Method Preview Link to CMS Slider Example: CMS Slider Preview Link If you have any other questions for me please reach out on my creative agency site svz.io

C. Full custom slider (By interactions)

Not CMS

Building a custom slider in Webflow [Tutorial]

CMS example:

Webflow Tutorial - Creating a CMS Powered Slider

Cons of interactions: Not Touch and Drag Support.

[bri-idea (Brian)]

This is awesome! I was able to utilize this for Tiny Slider as well. Only trouble i’m having is getting the custom prev/next buttons to work properly.

[Siton_Systems (Ezra Siton)]

Nice. Maybe i will update the guide (Almost the same steps).

I didn’t know Tiny Slider replace owl2.

@bri-idea

Only trouble i’m having is getting the custom prev/next buttons to work properly.

You should also declare the container (Wraps the buttons):

tns({
  mode: 'carousel', // or 'gallery'
  controlsContainer: "#custom_controlsContainer",
  nextButton: '#prev', 
  nextButton: '#next', // String selector
});

[bri-idea (Brian)]

Yeah it was super easy thanks to your guide.

This is the link, they are the lorem ipsum quotes.

https://preview.webflow.com/preview/chrisdconnors?utm_medium=preview_link&utm_source=designer&utm_content=chrisdconnors&preview=09e3b3fdb58bf06f6e1bc3e3d9a8163c&pageId=5e40ce77bc2b46ad0e71330c&mode=preview

[Typo (Chris)]

Great work! This is exactly what I’ve been looking for.

Will be voting for Webflow feature inclusion - thanks.

[Siton_Systems (Ezra Siton)]

Tiny Slider - Only trouble i’m having is getting the custom prev/next buttons to work properly.

I made codepen example (For custom next/prev buttons):

[bri-idea (Brian)]

I had that same problem! That looks awesome

[Klaus_Dyba]

Great slider tutorial. Thank you! Do you think its possible to use images/backgroundimages from the multi image field? For ecommerce it would help a lot. Regards klaus

[veermanhas]

Yes, I made it work with https://splidejs.com/

Already did a PoC today and made it work in under 10 minutes. Anyone interested in the tutorial?

[Klaus_Dyba]

Sure!!! Would be great to see how you did it!

[Tomato_Creative (James Pravato)]

I don’t suppose anyone has managed to get the lazy load option for owl carousel working? I am trying to get a non cms slider to lazy load but as soon as I set it up and preview it seems to glitch and hide some of the images but not all.

[AndreMalware]

Hei there, did you manage to integrate spliderjs with webflow cms. And if yes, how did you do it? Thank you.