Sliders

Overview

Sliders can be used to create slideshows to display content such as images, videos, or text from your Uploads Library. Each slide item can be clicked through or can be set to be played automatically. These are customizable based on your needs using Swiper.

How To Use

To add a slider you must do the following:

• Add a slider container
• Add your desired content
• Add pagination (optional, but recommended)
• Add previous/next navigation buttons (optional, but recommended)

You can add as many slider items as you want as long as the items are wrapped in the swiper-wrapper class.

Header and Footer Inject

Add the CSS link to the Header Inject. Add the Javascript link to the Footer Inject.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

Markup

Use a div element with the class of swiper-container to begin building the slider. Add a div element with the class of swiper-wrapper that will wrap around all of the swiper-slide classes. Any content should be placed in the swiper-slide class. Optionally you can add pagination by adding a div element with the class of swiper-pagination and navigation buttons by adding div elements with the class of swiper-button-prev and swiper-button-next.

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!-- Your Content Here -->
        </div>
        <div class="swiper-slide">
            <!-- Your Content Here -->
        </div>
        <div class="swiper-slide">
            <!-- Your Content Here -->
        </div>
    </div>
    <!-- Pagination -->
    <div class="swiper-pagination"></div>

    <!-- Previous/next navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

Initialize

Use the example code and add it to the Footer Inject. Based on what you added to the markup (e.g. pagination, previous/next buttons, etc.), you will need to add the parameters for those here.

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: true,

    // Pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })