Webflow CMS Slider and Cycle2js

CMS Slider with Arrow Pager

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.

Set Div to Flex

                <  arrow>
                < slide content> - set to flex expand
               < arrow>

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 name them cycle-next and cycle-prev respectively. The naming for
these divs which will serve as buttons to cycle though the slides.

After building the basic structure you can add your collection into slide content
Nested under collection list wrapper. Change the name of collection list to cycle-slideshow

And collection item to cycle-slide.

Set cycle-slideshow to flex, relative

Set cycle-slide to – don’t shrink, Display
– Block and width 100%  This is important
because you only want one slide to appear at a time.

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

The properties that Cycle2 JS will recognize and make the slider operate are in the settings panel for cycle-slideshow under
custom attributes.

Main Attributes for arrow pager

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)

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

 Name: data-cycle-next
Value: .cycle-next

Name: data-cycle-prev 
Value: .cycle-prev

Last step is to add custom code in before < body >tag on the page you want to use the slider on.

< script src=https://cdn.rawgit.com/malsup/cycle2/master/build/jquery.cycle.min.js> script>

Publish to see the live results.

CMS Slider with Image Pager

Et Facilis Magni Dolores
Consectetur Nihil Voluptatem Error
Neque Dolores Ipsum Labore
At Voluptatibus
Velit

Follow all the previous instructions. You can delete the arrows if you wish
Create a div – in settings give a div-id of image-pager

Then simply add the following attributes
to custom attributes for cycle-slideshow


Name: data-cycle-pager
Value: #image-pager

Name: data-cycle-pager-template
Value: < a href=’#’>< img src=’{{children.0.src}}’ width=100 height=75 < / a> **remove the spaces between characters, for display code purposes only**

*Note width and height can be customized as well.


CMS Slider Single Image Pager

Et Facilis Magni Dolores
Consectetur Nihil Voluptatem Error
Neque Dolores Ipsum Labore
At Voluptatibus
Velit

Using a single image to page : for instance a styled circle

Follow all the instructions from first example. You can delete the arrows if you wish

Create a div – in settings give a div ID of adv-custom-pager
Then add following attributes to custom < div> attributes for cycle-slideshow

Name: data-cycle-pager
Value: #adv-custom-pager

Name: data-cycle-pager-template
Value: < a href=’#’ >< img src=’https://your.image.here’ width=25 style=”margin: 5px”; >< /a > **remove the spaces between characters, for display code purposes only**

*note can be any image it will repeat as the pager. You can also adjust the styling of the image to customize it.

Webflow CMS Video Slider With Image Pager and Arrow Pager

Follow instruction from first example and delete arrows if you wish

This is used when the image is not being pulled from a slide. For instance using a thumbnail to page videos. Keep in
mind both instances of the collection cannot be set to random. They must be set to automatic or numbered. Or the thumbnails will not match the slides. The
pager operates by slide #. That is what < a href=’#’> refers to.

Create a div following the slider

Place a collection in the div.

Give a name to your collection list eg. central external

Give the collection list a div ID of no-template-pager

Add the following attributes to custom <div> attributes for cycle-slideshow

Name: data-cycle-pager
Value: #no-template-pager

Name: data-cycle-pager-template
Value: null

 

These are just some of the options available with the cycle js2 slider. To see full documentation go to

http://jquery.malsup.com/cycle2