Open In App

jQuery Slideshow.js plugin

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 18 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads