Streaming live at 10am (PST)

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

** Basic JS knowledge require.


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:

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="" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<link rel="stylesheet" href="" 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 = ""></script>
<!-- owl.carousel 2.3.4 Installation -->
  $(document).ready(function() {
			/* 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,

Publish ==> Output:

Wishlist Related:

Please vote for this idea:
Wishlist - CMS Slider:


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)


CMS example:

Cons of interactions: Not Touch and Drag Support.


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

  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.

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

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


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.