new Ink.UI.Carousel_1(selector, [options])

Accepts

• selector

  DOM element or element id

• options

  Carousel Options

• options.autoAdvance

  Milliseconds to wait before auto-advancing pages. Set to 0 to disable auto-advance. Defaults to 0.

• options.axis

  Axis of the carousel. Set to 'y' for a vertical carousel. Defaults to 'x'.

• options.initialPage

  Initial index page of the carousel. Defaults to 0.

• options.spaceAfterLastSlide

  trueIf there are not enough slides to fill the full width of the last page, leave white space. Defaults to `true`.

• options.swipe

  Enable swipe support if available. Defaults to true.

• options.pagination

  Either an ul element to add pagination markup to or an `Ink.UI.Pagination` instance to use.

• options.onChange

  Callback to be called when the page changes.

Demo

Code

<div id="my-carousel-1" class="ink-carousel" data-pagination="#my-carousel-1-pagination">
    <ul class="stage column-group half-gutters">
        <li class="slide all-33 small-50 tiny-100">
            <img class="quarter-bottom-space" src="https://lorempixel.com/400/200/sports/1">
            <div class="description">
                <h4>Title</h4>
                <p>Description paragraph</p>
            </div>
        </li>

        <li class="slide all-33 small-50 tiny-100">
            <img class="quarter-bottom-space" src="https://lorempixel.com/400/200/sports/2">
            <div class="description">
                <h4>Title</h4>
                <p>Description paragraph</p>
            </div>
        </li>

        <li class="slide all-33 small-50 tiny-100">
            <img class="quarter-bottom-space" src="https://lorempixel.com/400/200/sports/3">
            <div class="description">
                <h4>Title</h4>
                <p>Description paragraph</p>
            </div>
        </li>

        <li class="slide all-33 small-50 tiny-100">
            <img class="quarter-bottom-space" src="https://lorempixel.com/400/200/sports/4">
            <div class="description">
                <h4>Title</h4>
                <p>Description paragraph</p>
            </div>
        </li>

        <li class="slide all-33 small-50 tiny-100">
            <img class="quarter-bottom-space" src="https://lorempixel.com/400/200/sports/8">
            <div class="description">
                <h4>Title</h4>
                <p>Description paragraph</p>
            </div>
        </li>
    </ul>
</div>

<nav id="my-carousel-1-pagination" class="ink-navigation">
    <ul class="pagination black">
    </ul>
</nav>

<script>
    // Not required if you're using autoload.js
    Ink.requireModules(['Ink.UI.Carousel_1'], function (Carousel) {
        new Carousel('#my-carousel-1');
    });
</script>

Creating a slideshow is just like creating a carousel, except each slide has the all-100 class, making it fill the whole page.

Demo

Code

<div id="my-carousel-2" class="ink-carousel" data-pagination="#my-carousel-2-pagination">
    <ul class="stage column-group">
        <li class="slide all-100">
            <img src="https://lorempixel.com/1200/600/sports/1">
        </li>

        <li class="slide all-100">
            <img src="https://lorempixel.com/1200/600/sports/2">
        </li>

        <li class="slide all-100">
            <img src="https://lorempixel.com/1200/600/sports/3">
        </li>

        <li class="slide all-100">
            <img src="https://lorempixel.com/1200/600/sports/4">
        </li>

        <li class="slide all-100">
            <img src="https://lorempixel.com/1200/600/sports/8">
        </li>
    </ul>
</div>

<nav id="my-carousel-2-pagination" class="ink-navigation half-top-space">
    <ul class="pagination black">
    </ul>
</nav>

<script>
    // Not required if you're using autoload.js
    Ink.requireModules(['Ink.UI.Carousel_1'], function (Carousel) {
        new Carousel('#my-carousel-2');
    });
</script>

.autoAdvance([ms]) method

Auto-advance the carousel every ms milliseconds.

Accepts

• ms

  {String} Number of milliseconds between advances.

.getPage() method

Gets the current page index

.getPagination() method

Gets the Ink Pagination element this carousel is using.

.getSlidesList() method

Get a list of your slides (elements with the ".slide" class inside your stage)

.getSlidesPerPage() method

Returns how many slides fit into a page

.getStageElm() method

Get the stage element (your UL with the class ".stage").

.getTotalPages() method

Get the amount of pages in the carousel.

.getTotalSlides() method

Get the total number of slides

.nextPage([wrap]) method

Goes to the next page

Accepts

• wrap

  falseFlag to loop from last page to first page.

.previousPage([wrap]) method

Goes to the previous page

Accepts

• wrap

  falseFlag to loop from first page to last page.

.refit() method

Repositions elements around.
Measure the carousel once again, adjusting the involved elements' sizes. This is called automatically when the window resizes, in order to cater for changes from responsive media queries, for instance.

.setPage(page, [wrap]) method

Sets the current page index

Accepts

• page

  Index of the destination page.

• wrap

  falseFlag to activate circular counting (for example, if you set the page to `5` and there are only 4 pages, you're actually going to the first page).

.stopAutoAdvance() method

Stop the carousel from auto-advancing. Calls clearTimeout to cancel the auto-advancer.