Cycle2 Prev/Next

Simple

You can add simple, default prev and next controls by including two elements in your slideshow container, one with the class cycle-prev and one with the class cycle-next. By default, Cycle2 looks for elements with these classes within the container.

The default styles for these elements for this demo page are such that the controls will appear when you hover over the left or right part of the slideshow with your mouse, but of course they can be styled any way you wish.

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    >
    <!-- prev/next links -->
    <div class="cycle-prev"></div>
    <div class="cycle-next"></div>
    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>

(hover over left or right side of slideshow)

Outside the Container

It is not required to place the prev/next elements within the slideshow container or to use any specific classname on the prev/next elements. This example shows how to use the data-cycle-prev and data-cycle-next attributes to reference controls outside of the container.

<div id=outside>
    <!-- prev/next links -->
    <div class=center>
        <span id=prev>&lt;&lt;Prev </span>
        <span id=next> Next&gt;&gt;</span>
    </div>
    <!-- slideshow -->
    <div class="cycle-slideshow" 
        data-cycle-fx=scrollHorz
        data-cycle-timeout=0
        data-cycle-prev="#prev"
        data-cycle-next="#next"
        >
        <img src="https://malsup.github.io/images/p1.jpg">
        <img src="https://malsup.github.io/images/p2.jpg">
        <img src="https://malsup.github.io/images/p3.jpg">
        <img src="https://malsup.github.io/images/p4.jpg">
    </div>
</div>

<<Prev Next>>

Note that this is also an example of a fixed-width slideshow as the outer container has a width set to 300px.

Multiple Prev/Next

The data-cycle-prev and data-cycle-next options identify the element(s) to use for the prev and next controls. To have multiple prev/next controls, provide a value for these options that selects multiple elements.

<!-- prev/next links -->
<div class=center>
    <span class="prevControl"><<Prev </span>
    <span class="nextControl"> Next>></span>
</div>
<!-- slideshow -->
<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-prev=".prevControl"
    data-cycle-next=".nextControl"
    >
    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>
<!-- prev/next links -->
<div class=center>
    <span class="prevControl"><<Prev </span>
    <span class="nextControl"> Next>></span>
</div>

<<Prev Next>>