2 Demos of jQuery Image Rotator/Slider: jquery.hiSlide

The hiSlide jQuery plug-in

Easily create image rotator with seven images in your web pages. The images will keep on rotating automatically or arrows are also given for moving the next or previous image.

The plug-in file size is only 3K (which is negligible) and is cross-browser compatible. The markup is also pretty simple; just use the image tags inside the <ul> and <li> tags. See the demos and code in the coming section.

Developer’s page Download plug-in

How to use the image rotator/slider plug-in?

Include the jquery.hislide.js (plug-in file) and jQuery library before the body closing tag:

 <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

<script type=”text/javascript” src=”js/hislide/jquery.hislide.js” ></script>

(Adjust the path as per your physical directory structure.)

Initiate the plug-in with default options:

<script>

                $('.image-rotator').hiSlide();

</script>

The plug-in has options to control the speed and interval of rotating or sliding the images by using:

  • interval: 2500, //Interval in milliseconds
  • speed: 750 //Speed of rotating images in milliseconds

A demo of image rotation with default options

Ideally, you should use seven images for rotation. If you reduce or increase then you need to adjust the CSS or workaround with the plug-in.

The demo below uses seven images while the rotator is initiated with default options:

jQuery image rotator

See online demo and code

The complete code used for the demo:

<!DOCTYPE html>

<html>

<head>

   <link rel="stylesheet" href="css/hislide/jquery.hislide.css" />

 

</head>

</head>

<body>

    <div class="image-rotator hi-slide">

        <div class="hi-prev "></div>

       <div class="hi-next "></div>

         <ul>

        <li><img src="images/slide-1.jpg" /></li>

        <li><img src="images/slide-2.jpg" /></li>

        <li><img src="images/slide-3.jpg" /></li>

        <li><img src="images/slide-4.jpg" /></li>

        <li><img src="images/slide-5.jpg" /></li>

        <li><img src="images/slide-6.jpg" /></li>

        <li><img src="images/slide-7.jpg" /></li>

      </ul>

   </div>



   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

   <script type="text/javascript" src="js/hislide/jquery.hislide.js" ></script>

<script>

  $('.image-rotator').hiSlide();

</script>

</body>

</html>

Adjust the path of images.

A demo with speed and interval for sliding images

For this demo, the speed of sliding is set as 700 milliseconds while the interval between two slides is 2000 milliseconds.

If you decide to make changes then ensure the rotation of images does not produce jerks:

Complete code:

<script>

    $('#rotator-demo').hiSlide({

     interval: 2000,

     speed: 700

   });

</script>