cms-slider-and-cycle2js

Webflow Custom CMS Sliders Cycle2.js

CMS Slider with Arrow Pager

Velit Copy

Et Facilis Magni Dolores

Consectetur Nihil Voluptatem Error

Neque Dolores Ipsum Labore

At Voluptatibus

Velit

First build a custom slider. Note you can place this slider into any Div of any size.
Using Flex Box set the Slider Div to Flex

<left arrow=""></left>
<slide content=""></slide>
<right arrow=""></right>

Set the arrows to flex , justify center, and align center. This will ensure your arrows are centered next to the slide content.

Place a div in each of the arrows and give them a class of cycle-next and cycle-prev respectively.
The class names for these divs will serve as triggers to cycle though the slides.

After building the basic structure you can add your collection list into slide content
Rename the collection list to cycle-slideshow
Rename collection item to cycle-slide

Name: data-cycle-fx
Value : scrollHorz (slider scrolls horizontal)

Name: data-cycle-speed
Value: 500 (number of milliseconds the slide scrolls)

Name: data-cycle-pause-on-hover
Value: true

Name: data-cycle-timeout
Value: 4000 (# of milliseconds the slide is visible)
set to 0 for no auto sliding

Name: data-cycle-slides
Value: >div (slide is whatever is in the div)

Name: data-cycle-next
Value: .cycle-next (cycle slides forward)

Name: data-cycle-prev
Value: .cycle-prev (cycle slides backward)

Last step is to add cycle2.js url"> in before < body >tag on the page you want to use the slider on.

Publish Page to see results

CMS Slider with Automatic Image Thumbnail

Velit Copy

Et Facilis Magni Dolores

Consectetur Nihil Voluptatem Error

Neque Dolores Ipsum Labore

At Voluptatibus

Velit

Create a Div
<slide content=""></slide>
‍
Add your collection list into slide content
Rename the collection list to cycle-slideshow
Rename collection item to cycle-slide

Set cycle-slideshow to Display - Flex
Overflow - Hidden, Position-Relative

Set cycle-slide to – don’t shrink,
Display – Block and width 100%

This ensures only one slide will show at a time

Nested under cycle-slide you can style any type of div. Any information in your CMS collection. Can be used for images, videos, testimonials whatever you can think of.

The properties that make cyc2.js work are under the element settings tab (the gear) for cycle-slideshow
under custom <div> attributes</div>

For the pager to work properly though the image needs to be the first item nested under cycle-slide

This image pager automatically creates thumbnails from the slider image. Notice how the overlay and text block follow the image

For the image-pager div
in element settings give an ID of image-pager
This tells the slider to place the thumbnails in this div.

‍

Name: data-cycle-fx
Value : fadeout (slider scrolls horizontal)

Name: data-cycle-speed
Value: 500 (number of milliseconds the slide scrolls)

Name: data-cycle-pause-on-hover
Value: true

Name: data-cycle-timeout
Value: 4000 (# of milliseconds the slide is visible)
set to 0 for no auto sliding

Name: data-cycle-slides
Value: >div (slide is whatever is in the div)

Name: data-cycle-pager
Value: #image-pager (Specifies use of pager Div with an ID of image-pager)

Name: data-cycle-pager template
Value: ''<a href="#"><img src="{{children.0.src}}" width="100%" height="auto"></a>''

**** Remove " " it is for site display purposes

The above value tells the pager to get images from the image child of the slide. The width can be set by pixel value but in this case the width is controlled by the the grid element.

Last step is to add cycle2.js url"> in before < body >tag on the page you want to use the slider on.

Keep in mind you can add the arrows from the previous CMS slider you will just need to make sure you use the cycle-prev and cycle-next properties.

‍

Publish Page to see results

CMS Slider Single Image Pager

Velit Copy

Et Facilis Magni Dolores

Consectetur Nihil Voluptatem Error

Neque Dolores Ipsum Labore

At Voluptatibus

Velit

Create a Div
<name of="" div=""></name>
‍
Add your collection list into slide content
Rename the collection list to cycle-slideshow
Rename collection item to cycle-slide
‍‍

Set cycle-slideshow to Display - Flex
Overflow - Hidden, Position-Relative

Set cycle-slide to – don’t shrink,
Display – Block and width 100%

This ensures only one slide will show at a time

Nested under cycle-slide you can style any type of div. Any information in your CMS collection. Can be used for images, videos, testimonials whatever you can think of.

The properties that make cyc2.js work are under the element settings tab (the gear) for cycle-slideshow
under custom <div> attributes</div>

For the cycle-pager div
in element settings give an ID of #single-img-pager
This tells the slider use that img as a pager button in this div.

‍

Name: data-cycle-fx
Value : fadeout (slide fades in and out)

Name: data-cycle-speed
Value: 500 (number of milliseconds the slide scrolls)

Name: data-cycle-pause-on-hover
Value: true

Name: data-cycle-timeout
Value:0 (no auto slide)

Name: data-cycle-slides
Value: >div (slide is whatever is in the div)

Name: data-cycle-pager
Value: #single-img-pager (Specifies use of pager Div with an ID of single-img-pager)

Name: data-cycle-pager template
Value: ''<a href="#"></a>insert img url here' width=50px height=auto>''

**** Remove " " it is for site display purposes

The above value tells the pager to get images from the image from the img source url. Also if your img source file is larger use the width value to constrain it.

‍

‍

You'll need to add the CSS styles into the the custom code section for the page. We used opacity as a quick way to distinguish active and inactive states.

Cycle2 automatically creates a div in the cycle pager to be able to select the class to style use .cycle-pager >* (The >* selects all nodes that are direct children of the class cycle-pager) Thanks Webdev for explaining that.

Last step is to add cycle2.js url"> below in before < body >tag on the page you want to use the slider on. Publish page to see results.

CMS Slider Default Pager and Arrows

Velit Copy

Et Facilis Magni Dolores

Consectetur Nihil Voluptatem Error

Neque Dolores Ipsum Labore

At Voluptatibus

Velit

Set cycle-slideshow to Display - Flex
Overflow - Hidden, Position-Relative

Set cycle-slide to – don’t shrink,
Display – Block and width 100%

This ensures only one slide will show at a time

Nested under cycle-slide you can style any type of div. Any information in your CMS collection. Can be used for
images, videos, testimonials whatever you can think of.

The properties that make cyc2.js work are under the element settings tab (the gear) for cycle-slideshow
under custom <div> attributes</div>

Add one more div default-pager This is where the default pager buttons will go. In the element settings tab give an ID of default-pager. In this example it is positioned absolute to rest on the top of the slider.

‍

Name: data-cycle-fx
Value : fadeout (slide fades in and out)

Name: data-cycle-speed
Value: 500 (number of milliseconds the slide scrolls)

Name: data-cycle-pause-on-hover
Value: true

Name: data-cycle-timeout
Value: 4000 (# of milliseconds the slide is visible)
set to 0 for no auto sliding

Name: data-cycle-slides
Value: >div (slide is whatever is in the div)

Name: data-cycle-next
Value: .next (cycle slides forward)

Name: data-cycle-prev
Value: .prev (cycle slides backward)

Name: data-cycle-pager
Value: #default-pager (specifies use of pager div with ID of default-pager)

Last step is to add cycle2.js url"> in before < body >tag on the page you want to use the slider on.

You'll need to add the CSS styles into the the custom code section for the page. We used opacity as a quick way to distinguish active and hover states. Cycle2 automatically creates a span in the default-pager div to be able to select the class to style use .default-pager span

Last step is to add cycle2.js url"> below in before < body >tag on the page you want to use the slider on. Publish page to see results.

Publish Page to see results

CMS Music Embed Slider

This method can be used for any embed or video slider that you want a thumbnail pager for.

We have used flexbox to create two equal divs that the collection lists are placed in. One is the slider and one is the pager.

In order for the pager to correspond to the right embed or video neither or the collection lists can be set to random. They can be ordered but both lists need to have the same ordering applied.

Set cycle-slideshow to Display - Flex
Overflow - Hidden, Position-Relative

Set cycle-slide to – don’t shrink,
Display – Block and width 100%

This ensures only one slide will show at a time

Nested under cycle-slide we have placed a Bandcamp embed and created a bandcamp identifier field in the cms that we dynamically call for each album.

The properties that make cyc2.js work are under the element settings tab (the gear) for cycle-slideshow
under custom <div> attributes</div>

The pager is simply the same collection list with the album thumbnails styled using webflow css grid and style properties.

For the album-list div
in element settings give an ID of album-pager
This tells the slider that the items, in this case album covers will page the slider. The ID can be any name you wish it just needs to correspond to the custom div attribute - data-cycle-pager

‍

Name: data-cycle-fx
Value : fadeout (slider fades in and out)

Name: data-cycle-speed
Value: 500 (number of milliseconds the slide scrolls)

Name: data-cycle-pause-on-hover
Value: true

Name: data-cycle-timeout
Value: 0 (no auto sliding)

Name: data-cycle-slides
Value: >div (slide is whatever is in the div)

Name: data-cycle-pager
Value: #album-pager (Specifies use of pager Div with an ID of album-pager)

Name: data-cycle-pager template
Value: null

Last step is to add cycle2.js url"> in before < body >tag on the page you want to use the slider on.

Publish Page to see results

CMS Video Slider w/ Thumbnail Pager

This method can be used for any embed or video slider that you want a thumbnail pager for.

In order for the pager to correspond to the right embed or video neither or the collection lists can be set to random. They can be ordered but both lists need to have the same ordering applied.

Set cycle-slideshow to Display - Flex
Overflow - Hidden, Position-Relative

Set cycle-slide to – don’t shrink,
Display – Block and width 100%

This ensures only one slide will show at a time

Nested under cycle-slide we have placed a Bandcamp embed and created a bandcamp identifier field in the cms that we dynamically call for each album.

The properties that make cyc2.js work are under the element settings tab (the gear) for cycle-slideshow
under custom <div> attributes</div>

The pager is simply the same collection list with the video thumbnail field styled using webflow css grid and style properties.

For the video-list div
in element settings give an ID of video-pager
This tells the slider that the items, in this case album covers will page the slider. The ID can be any name you wish it just needs to correspond to the custom div attribute - data-cycle-pager

‍

Name: data-cycle-fx
Value : fadeout (slider fades in and out)

Name: data-cycle-speed
Value: 500 (number of milliseconds the slide scrolls)

Name: data-cycle-pause-on-hover
Value: true

Name: data-cycle-timeout
Value: 0 (no auto sliding)

Name: data-cycle-slides
Value: >div (slide is whatever is in the div)

Name: data-cycle-pager
Value: #video-pager (Specifies use of pager Div with an ID of album-pager)

Name: data-cycle-pager template
Value: null

Name: data-cycle-next
value: .forward (this value is the same class name as the div you want to use as the trigger)

Name: data-cycle-prev
value: .back (this value is the same class name as the div you want to use as the trigger)
‍
Last step is to add cycle2.js url"> in before < body >tag on the page you want to use the slider on.

Publish Page to see results

This really is just the tip of the iceberg of what Cycle2.js can do just by using the custom attributes in Webflow. More documentation and examples are here. http://jquery.malsup.com/cycle2/