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.

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

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.