Cycle2 Carousel

Cycle2's carousel transition plugin must be included in order to use the carousel effect. See the Download page for a link to the carousel plugin.

Simple

Carousels can be horizontal or vertical, automatic or manual, circular or non-circular, and fluid or fixed-width. There are several options with which you can customize a carousel slideshow. By default, a carousel slideshow is circular which means that slides can wrap, effectively creating an endless carousel (as seen below). Also by default, a carousel will display as many slides as can fit in the slideshow container.

<div class="slideshow" 
    data-cycle-fx=carousel
    data-cycle-timeout=1000
    >
    <img src="https://malsup.github.io/images/beach1.jpg">
    <img src="https://malsup.github.io/images/beach2.jpg">
    ...
    <img src="https://malsup.github.io/images/beach9.jpg">
</div>

Visible Slides

Use the data-cycle-carousel-visible attribute to limit the number of visible slides. When this option is used, the width of the carousel becomes fixed.

<div class="slideshow" 
    data-cycle-fx=carousel
    data-cycle-timeout=1000
    data-cycle-carousel-visible=5
    >
    <img src="https://malsup.github.io/images/beach1.jpg">
    <img src="https://malsup.github.io/images/beach2.jpg">
    ...
    <img src="https://malsup.github.io/images/beach9.jpg">
</div>

Responsive

When you use the data-cycle-carousel-visible attribute, you may also use the data-cycle-carousel-fluid attribute in order to achieve a responsive carousel slider, instead of a fixed-width carousel. When the value of data-cycle-carousel-fluid is set to true your carousel slides will be fluid-width within the container. So if your container is fluid-width the slides will be resized with the container so that the value of data-cycle-carousel-visible is honored.

<div class="slideshow" 
    data-cycle-fx=carousel
    data-cycle-timeout=1000
    data-cycle-carousel-visible=5
    data-cycle-carousel-fluid=true
    >
    <img src="https://malsup.github.io/images/beach1.jpg">
    <img src="https://malsup.github.io/images/beach2.jpg">
    ...
    <img src="https://malsup.github.io/images/beach9.jpg">
</div>

It's important that your slides do not have a declared width or height for this to work properly. The slideshow below has the following style rule applied:
div.responsive img { width: auto; height: auto }

Controls

As with any Cycle2 slideshow, prev/next and pager controls can be used to advance the current slide.

<div class="slideshow" 
    data-cycle-fx=carousel
    data-cycle-timeout=0
    data-cycle-carousel-visible=5
    data-cycle-next="#next"
    data-cycle-prev="#prev"
    data-cycle-pager="#pager"
    >
    <img src="https://malsup.github.io/images/beach1.jpg">
    <img src="https://malsup.github.io/images/beach2.jpg">
    ...
    <img src="https://malsup.github.io/images/beach9.jpg">
</div>

<div class=center>
    <a href=# id=prev>&lt;&lt; Prev </a>
    <a href=# id=next> Next &gt;&gt; </a>
</div>

<div class="cycle-pager" id=pager></div>

<< Prev Next >>

Vertical

For a vertical carousel, set the data-cycle-carousel-vertical attribute to true.

<div class="slideshow vertical" 
    data-cycle-fx=carousel
    data-cycle-timeout=0
    data-cycle-next="#next3"
    data-cycle-prev="#prev3"
    data-cycle-pager="#pager3"
    data-cycle-carousel-visible=2
    data-cycle-carousel-vertical=true
    >
    <img src="https://malsup.github.io/images/beach1.jpg">
    <img src="https://malsup.github.io/images/beach2.jpg">
    ...
    <img src="https://malsup.github.io/images/beach9.jpg">
</div>

<div class=center>
    <a href=# id=prev3><< Prev </a>
    <a href=# id=next3> Next >> </a>
</div>

<div class="cycle-pager" id=pager3></div>

<< Prev Next >>

Non-Circular

Carousels can be non-circular by setting the data-allow-wrap attribute to false. A non-circular slideshow will not advance past the last slide.

<div class="slideshow" 
    data-cycle-fx=carousel
    data-cycle-timeout=0
    data-cycle-next="#next4"
    data-cycle-prev="#prev4"
    data-cycle-pager="#pager4"
    data-cycle-carousel-visible=5
    data-allow-wrap=false
    >
    <img src="https://malsup.github.io/images/beach1.jpg">
    <img src="https://malsup.github.io/images/beach2.jpg">
    ...
    <img src="https://malsup.github.io/images/beach9.jpg">
</div>

<div class=center>
    <a href=# id=prev4><< Prev </a>
    <a href=# id=next4> Next >> </a>
</div>

<div class="cycle-pager" id=pager4></div>

<< Prev Next >>

Carousel Options

Options are set on the slideshow element using data-cycle-option-name attributes. Option attribute names are always lowercase and prefixed with data-cycle-. For example, to set the carousel-visible option you would use the data-cycle-carousel-visible attribute.

Name	Default Value	Description
carousel-fluid	false	If this value is `true` and `data-cycle-carousel-visible` is set, then the slides within the carousel will be resized in order to fill the container with the number of slides specified by the `data-cycle-carousel-visible` attribute.
carousel-offset	0	The number of pixels to offset the carousel.
carousel-slide-dimension	undefined	The width (horz carousel) or height (vert carousel) of each slide. If this option is not set the value will be inferred from the first slide's dimensions.
carousel-vertical	false	`true` for a vertical carousel.
carousel-visible	undefined	Number of slides to be displayed in the carousel. Setting this option will cause the carousel to have a fixed width unless `data-cycle-carousel-fluid` is set to `true`.
throttle-speed	undefined	`true` if the speed should be throttled to achieve a consistent scroll rate. This is useful only if you wish each slide to be scrolled at the exact same rate and your slides have different widths.