$title = 'Prev/Next'; include '../inc/inc_intro_demo.php'; ?>
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="/images/p1.jpg"> <img src="/images/p2.jpg"> <img src="/images/p3.jpg"> <img src="/images/p4.jpg"> </div>
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><<Prev </span> <span id=next> Next>></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="/images/p1.jpg"> <img src="/images/p2.jpg"> <img src="/images/p3.jpg"> <img src="/images/p4.jpg"> </div> </div>
Note that this is also an example of a fixed-width slideshow as the outer container has a width set to 300px.
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="/images/p1.jpg"> <img src="/images/p2.jpg"> <img src="/images/p3.jpg"> <img src="/images/p4.jpg"> </div> <!-- prev/next links --> <div class=center> <span class="prevControl"><<Prev </span> <span class="nextControl"> Next>></span> </div>