Full-width Automatic jQuery Image Carousel Plugin - slide.js

slide.js is a jQuery powered carousel / slideshow plugin which enables you to slide or fade through a list of images with arrows and bullets navigation.

How to use it:

1. Import the slide.css for primary carousel styles.

<link rel="stylesheet" href="css/slide.css">

2. Add a list of images into the carousel container.

<div class="slide">
  <ul class="slide-container">
    <li>
      <a href=""><img src="1.png" alt=""></a>
    </li>
    <li>
      <a href=""><img src="2.png" alt=""></a>
    </li>
    <li>
      <a href=""><img src="3.png" alt=""></a>
    </li>
    <li>
      <a href=""><img src="4.png" alt=""></a>
    </li>
    ...
  </ul>
</div>

3. Load jQuery library and the slide.js at the bottom so the page loads faster.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="slide.js"></script>

4. Initialize the carousel.

$('.slide').slide({
  // options here
})

5. Configuration options.

$('.slide').slide({

  // enable autoplay
  start: true,

  // loop through the images at a specified speed
  speed: 2000,

  // horizontal or fade
  animate: "horizontal"
  
})

Change log:

2015-07-15

• Update slide.js

---

This awesome jQuery plugin is developed by TopGrd. For more Advanced Usages, please check the demo page or visit the official website.