Самый простой слайдер на 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>