Press "Enter" to skip to content

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

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


See Demo And Download

Official Website(TopGrd): Click Here

This superior jQuery/javascript plugin is developed by TopGrd. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.