Streaming live at 10am (PST)

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

3 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