Swiper API: Layout and Initialize

Swiper Full HTML Layout

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

Initialize Swiper

Now, when we have Swiper’s HTML, we need to initialize it using the following function:

new Swiper(swiperContainer, parameters)- initialize swiper with options

• swiperContainer – HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
• parameters – object – object with Swiper parameters. Optional.
• Method returns initialized Swiper instance

For example:

var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
});

After you initialize Swiper it is possible to access to Swiper’s instance on its HTMLElement. It is swiper property of Swiper’s HTML container element:

var mySwiper = document.querySelector('.swiper-container').swiper

// Now you can use all slider methods like
mySwiper.slideNext();