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

** 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

image

B. Connect to a collection:

image

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:

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

image

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

6 Likes

Dynamic CMS slider more options:

A. Pagination

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

C. Full custom slider (By interactions)

Not CMS

CMS example:

Cons of interactions: Not Touch and Drag Support.

2 Likes

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.

1 Like

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

I didn’t know Tiny Slider replace owl2.

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

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

1 Like

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

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

Will be voting for Webflow feature inclusion - thanks.

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

I had that same problem! That looks awesome :slight_smile:

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

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?

2 Likes

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

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. :man_shrugging:

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