Найпростіший слайдер на jQuery

Ви блокуєте рекламу

Будь ласка, вимкніть блокування реклами

Детальніше

Якщо вам потрібен дуже простий слайдер без пагінації, навігації та інших налаштувань, то в нас є для вас потрібне рішення – найпростіший слайдер на jQuery c fade ефектом. Не будемо розписувати все докладно, тому що в коді будуть коментарі. Головне пам’ятати, що вміст слайдів повинно мати властивість position: absolute, щоб при зміні слайдів вони не з’являлися один під одним. Подивитися роботу слайдера можна тут.

<html>
<head>
<style type="text/css">
    #slideshow div {
        position: relative;
    }
    #slideshow div img {
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
</head>
<body>
    <!-- розмітка слайдера -->
    <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 -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        // запускаемо наш слайдер
        $("#slideshow > div:gt(0)").hide();
        setInterval(function() {
            $('#slideshow > div:first')
                .fadeOut(500) // швидкість зникання блоку
                .next()
                .fadeIn(1000) // швидкість появи блоку
                .end()
                .appendTo('#slideshow');
        }, 3000); // швидкість зміни блоків
    </script>
</body>
</html>