jQuery Slideshow.js plugin

Last Updated : 26 Jul, 2024

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=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- 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(
https://media.geeksforgeeks.org/wp-content/uploads/20201213110552/logo.png);
            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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210302151833/GeeksClassesLiveSession.png" 
                 alt="">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210103105723/geeksforgeeks6.png" 
                 alt="" 
                 style="size:20px">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201027221346/CompleteInterviewPreparationCoursebyGeeksforGeeks.png" 
                 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 src="http://code.jquery.com/jquery-1.9.1.min.js">
      </script>
    <!-- End SlidesJS Required -->

    <!-- SlidesJS Required: Link to jquery.slides.js -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/slidesjs/3.0/jquery.slides.js">
    </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:

jQuery Slideshow.js plugin

faizamu19

Improve

Article Tags :

jQuery Slideshow.js plugin

Similar Reads

Thank You!

What kind of Experience do you want to share?