Cycle2 allows you to use any type of element for the slides, it's not solely for cycling images.
However, images are the default slide type so to use other elements you need to
override the slides
option as show on this page. The slides
option
can be set to any valid jQuery selector. The default value is > img
which is a selector to find all image elements that are immediate children of the slideshow
container.
Divs
These two examples demonstrates using plain old divs as slide elements.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Mel eu pertinax atomorum explicari, at sit ponderum interesset, viderer invidunt ne vis. Mea elitr quodsi necessitatibus ut, te eum audiam oporteat gubergren. Nostro tibique eu his, mel tamquam fabulas te. Nec saperet vocibus eu, ad his veniam graeco voluptua. Dicta homero propriae sit eu, oratio disputationi at mea.
Utinam electram pertinacia cum et, mel an everti epicuri deseruisse. Vocibus docendi convenire mei at, et suas simul ius, id dicta constituam disputando pro. Te altera voluptatum sit, prima fabulas epicuri in sit, soleat inimicus qui id. Diam quodsi epicuri his eu, mea sumo agam mutat id. At has nisl nemore conceptam.
Composites
Slides can be composed of many elements so don't feel constrained to just
a single element for each slide. This example shows how to embed an overlay
caption for each slide.
Sonnenberg Gardens
Sonnenberg Gardens
The Redwoods
Andgel Island
Raquette Lake
Anchors
This example shows how you can use anchors as slides to wrap images. View the source of
this page to see the CSS styles applied.