Skip to content
Related Articles

Related Articles

Improve Article

jQuery Slideshow.js plugin

  • Difficulty Level : Medium
  • Last Updated : 18 Mar, 2021

Slides.js is a responsive slideshow plugin for jQuery with features like touch and CSS3 transitions. It helps in implementing slideshow easily along with animations that run smoothly on devices.

Its features are as follows:

  • Responsive: You can create responsive slideshows.
  • Touch: You can add touch movements in your slideshow.
  • CSS3 transitions: You can add animations that run perfectly well in your slideshow.

To use this plugin, simply add the CDN link just above the body tag:

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

<script src="jquery.slides.min.js"></script>

Example:

HTML




<!Doctype html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>SlidesJS Example</title>
    <meta name="description"
          content="SlidesJS is a simple slideshow plugin for jQuery. ">
    <!-- SlidesJS Required (if responsive): 
        Sets the page width to the device width. -->
    <meta name="viewport" 
          content="width=device-width">
    <!-- End SlidesJS Required -->
  
    <!-- CSS for slidesjs.com example -->
    <link rel="stylesheet" 
          href=
    <!-- End CSS for slidesjs.com example -->
  
<!-- SlidesJS Optional: If you'd like to use this design -->
    <style>
        #slides {
            display: none
        }
          
        #slides .slidesjs-navigation {
            margin-top: 3px;
        }
          
        #slides .slidesjs-previous {
            margin-right: 5px;
            float: left;
        }
          
        #slides .slidesjs-next {
            margin-right: 5px;
            float: left;
        }
          
        .slidesjs-pagination {
            margin: 6px 0 0;
            float: right;
            list-style: none;
        }
          
        .slidesjs-pagination li {
            float: left;
            margin: 0 1px;
        }
          
        .slidesjs-pagination li a {
            display: block;
            width: 13px;
            height: 0;
            padding-top: 13px;
            background-image: url(
            background-position: 0 0;
            float: left;
            overflow: hidden;
        }
          
        .slidesjs-pagination li a.active,
        .slidesjs-pagination li a:hover.active {
            background-position: 0 -13px
        }
          
        .slidesjs-pagination li a:hover {
            background-position: 0 -26px
        }
          
        #slides a:link,
        #slides a:visited {
            color: #333
        }
          
        #slides a:hover,
        #slides a:active {
            color: #9e2020
        }
          
        .navbar {
            overflow: hidden
        }
    </style>
  
    <!-- SlidesJS Required: These styles are required 
        if you'd like a responsive slideshow -->
    <style>
        #slides {
            display: none
        }
          
        .container {
            margin: 0 auto
        }
        /* For tablets & smart phones */
          
        @media (max-width: 767px) {
            body {
                padding-left: 20px;
                padding-right: 20px;
            }
            .container {
                width: auto
            }
        }
        /* For smartphones */
          
        @media (max-width: 480px) {
            .container {
                width: auto
            }
        }
        /* For smaller displays like laptops */
          
        @media (min-width: 768px) and (max-width: 979px) {
            .container {
                width: 724px
            }
        }
        /* For larger displays */
          
        @media (min-width: 1200px) {
            .container {
                width: 1170px
            }
        }
    </style>
    <!-- SlidesJS Required: -->
</head>
  
<body>
  
    <!-- SlidesJS Required: Start Slides -->
    <!-- The container is used to define the width of the slideshow -->
    <div class="container">
        <div id="slides">
            <img src=
                 alt="">
            <img src=
                 alt="" 
                 style="size:20px">
            <img src=
                 alt="">
            <a href="#" class="slidesjs-next slidesjs-navigation">
                <i class="fa fa-chevron-circle-left"></i></a>
            <a href="#" class="slidesjs-previous slidesjs-navigation">
                <i class="fa fa-chevron-circle-right"></i></a>
        </div>
    </div>
    <!-- End SlidesJS Required: Start Slides -->
  
    <!-- SlidesJS Required: Link to jQuery -->
      </script>
    <!-- End SlidesJS Required -->
  
    <!-- SlidesJS Required: Link to jquery.slides.js -->
    <script src=
    </script>
    <!-- End SlidesJS Required -->
  
    <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
    <script>
        $(function() {
            $('#slides').slidesjs({
                width: 940,
                height: 528,
                navigation: false
            });
        });
    </script>
    <!-- End SlidesJS Required -->
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :