JSCarousel

Simple implementation

Import the script file:

  <script src="Your/Script/Directory/JSCarousel.min.js"></script>

Build the HTML content:

# Carousel:
  <div id="carousel_outside_container">       
    <div id="carousel_container_id">
      <!-- Slide 1 -->
      <div class="slide_class">
          ....
      </div>
      <!-- Slide 2 -->        
      <div class="slide_class">
          ....
      </div>
      ... Other slides'
    </div>
  </div>

# Controls
<div id="navigation_menu_container_id"> 
  <!--Button Next -->
  <button class="navigation_button_preview_class"></button>
  <ul id="navigation_buttons_container_id">
    <!--JS generated LI and Buttons-->
  </ul>
  <!--Button Next -->
  <button class="navigation_button_next_class"></button> 
</div>

Setup the carousel:

  window.onload = function () {
      var MyCarousel = new JSCarousel({
          carousel  : '#carousel_container_id',
          slide     : '.slide_class',
          navButtons: '#navigation_menu_container_id',
          btnIndex  : '#navigation_buttons_container_id',
          btnNext   : '.navigation_button_next_class',
          btnPrev   : '.navigation_button_preview_class',
          autoPlay : 10,
      });

      /* Jump to slide 1 */
      MyCarousel.goTo(1);
  }           

Support or Contact

Having trouble with Pages? Check out our documentation or contact optimizLab support and we’ll help you sort it out.