Responsive Full-width Automatic jQuery Image Carousel Plugin

slide.js is a jQuery-powered slideshow/carousel plugin that enables you to scroll or fade through a list of images using arrow navigation and bullets.

full width responsive slider, simple jquery image slider, jquery image slider with thumbnails, automatic image slider in jquery, jquery full width slider, multiple image slider jquery example

How to make use of it:

1. Import slide.css for basic library styles.

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

2. Add a list of photos to 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 the jQuery library and slide.js at the bottom.

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

4. Initializing the library.

$('.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"
  
})

full-width automatic jquery image carousel, Responsive carousel Plugin/Github, jquery image slider example with source code