The simplest jQuery slider

You block advertising

Please disable ad blocker

If you need a very simple slider without pagination and navigation we have the right solution for you – the simplest jQuery slider with a fade effect. We will not describe everything in detail, because in the code there will be comments. The main thing to remember is that the contents of the slides must have a position: absolute property so that when the slides change, they do not appear under each other.

<html>
<head>
<style type="text/css">
    #slideshow div {
        position: relative;
    }
    #slideshow div img {
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
</head>
<body>
    <!-- slider markup -->
    <div id="slideshow">
        <div class="slide">
            <img width="400" src="https://an2-studio.xyz/koala/wp-content/uploads/2017/09/nadine-shaabana-226967-2000x800.jpg" alt="">
        </div>
        <div class="slide">
            <img width="400" src="http://an2-studio.xyz/koala/wp-content/uploads/2017/10/basim-shafi-261045-2000x800.jpg" alt="">
        </div>
        <div class="slide">
            <img width="400" src="http://an2-studio.xyz/koala/wp-content/uploads/2017/09/lily-lvnatikk-22441-2000x800.jpg" alt="">
        </div>
        <div class="slide">
            <img width="400" src="http://an2-studio.xyz/koala/wp-content/uploads/2017/08/alex-read-249257-2000x800.jpg" alt="">
        </div>
        <div class="slide">
            <img width="400" src="http://an2-studio.xyz/koala/wp-content/uploads/2017/08/noah-buscher-175473-2000x800.jpg" alt="">
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        // init slider
        $("#slideshow > div:gt(0)").hide();
        setInterval(function() {
            $('#slideshow > div:first')
                .fadeOut(500) // fade out speed
                .next()
                .fadeIn(1000) // fade in speed
                .end()
                .appendTo('#slideshow');
        }, 3000); // speed of slide's change
    </script>
</body>
</html>

Demo

You block advertising

Please disable ad blocker

Comments (0)