Responsive Carousel Plugin In Pure JavaScript – Tour.js

Preview:

Description:

Tour.js is an easy, responsive carousel plugin that features autoplay (with a progress bar), auto resizing and custom pagination/navigation.

How to use it:

Load the Tour.css and Tour.js in the html file as this:

<link rel="stylesheet" href="css/tour.css">
<script src="js/tour.js"></script>

Add the slides together with the controls to the carousel container.

<div class="tour slide">
  <!-- Indicators -->
  <ol class="tour-indicators">
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="tour-inner" role="listbox">
    <div class="item active">
      <img src="1.jpg" alt="...">
      <div class="tour-caption">
        <h2>Slide 1</p>
      </div>
    </div>
    <div class="item">
      <img src="2.jpg" alt="...">
      <div class="tour-caption">
        <h2>Slide 2</p>
      </div>
    </div>
    <div class="item">
      <img src="3.jpg" alt="...">
      <div class="tour-caption">
        <h2>Slide 3</p>
      </div>
    </div>
    
    <div class="item">
      <img src="4.jpg" alt="...">
      <div class="tour-caption">
        <h2>Slide 4</p>
      </div>
    </div>
    <div class="item">
      <img src="5.jpg" alt="...">
      <div class="tour-caption">
        <h2>Slide 5</p>
      </div>
    </div>
</div>


  <!-- Controls -->
  <a class="left tour-control" role="button" data-slide="prev">
  <span><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
  </a>
  <a class="right tour-control" role="button" data-slide="next">
    <span><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
  </a>
</div>

Active the carousel with the following JS syntax.

document.addEventListener('DOMContentLoaded', function (){
document.removeEventListener('DOMContentLoaded', arguments.calee);
  tour('.tour').apply();
});

To customize the carousel, just pass the following options an object to the ‘apply()’ method.

tour('.tour').apply({
  // in milliseconds
  "delay": 6000,
  // enable autoplay
  "startCycle": true,
  // shows navigation arrows
  "showArrows": true,
  // 'sliding', 'fading', 'rolling'
  "slideEffect": 'sliding', 
  /*
    {
      "element": will return the current element,
      "next": function can be execut to go to the next slide,
      "prev": the previous of next function,
      "indeicators": will return the current element indeicator's elements
      "transition": Here you can see or change your slide transition in respect of 3 slide transition effects explained above.
    };
  */
  "returnAPI": false
  
});