0

В общем делема такая: 1. Есть контейнер со слайдами. 2. В контейнере есть слайды 5 штук. 3. Это всё приправлено свойствами overflow:hidden и height: 500%. 4. Прокручивается вверх.

Как сделать чисто Fade эффект. Чтобы например, первый слайд исчезал, проходил небольшой промежуток времени и появлялся следующий по счёту слайд?

CSS:

.slider {
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.scontainer {
    position: relative;
    height: 500%;
    width: 100%;
    animation-name: slideranim;
    animation-duration: 30s;
    animation-delay: initial;
    animation-iteration-count: infinite;
    padding: 0;
    margin: 0;
}

.slides {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.sslides {
    position: absolute;
    height: 300px;
    width: 1100px;
    left: -20px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    background: red;
}

.hoverblock {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
}

@keyframes slideranim {
    0% {z-index: 10;}
    10% {top: 0%;z-index: 10;}
    11% {z-index: 0;}
    19% {z-index: 0;}
    20% {top: -100%;z-index: 10;}
    30% {top: -100%;z-index: 10;}
    31% {z-index: 0;}
    39% {z-index: 0;}
    40% {top: -200%;z-index: 10;}
    50% {top: -200%;z-index: 10;}
    51% {z-index: 0;}
    59% {z-index: 0;}
    60% {top: -300%;z-index: 10;}
    70% {top: -300%;z-index: 10;}
    71% {z-index: 0;}
    79% {z-index: 0;}
    80% {top: -400%;z-index: 10;}
    90% {top: -400%;z-index: 10;}
    91% {z-index: 0;}
    99% {z-index: 0;}
    100% {top: 0%;z-index: 10;}
}

Html:

        <div class="slider">
            <div class="hoverblock"></div>
            <div class="scontainer">
                <div class="slides">
                    <div class="sslides sslide1">
                        text
                    </div>
                </div>
                <div class="slides">
                    <div class="sslides sslide1">
                        text2
                    </div>
                </div>
                <div class="slides">
                    <div class="sslides sslide1">
                        text3
                    </div>
                </div>
                <div class="slides">
                    <div class="sslides sslide1">
                        text4
                    </div>
                </div>
                <div class="slides">
                    <div class="sslides sslide1">
                        text5
                    </div>
                </div>
            </div>
        </div>
3
  • наддеюсь это то что Вам нужно codepen.io/gc-nomade/pen/CJpsd 26 фев 2018 в 8:27
  • @AntonDanilov всё бы хорошо, но мне не нужна анимация прокрутки вообще, мне нужен эффект fade на CSS
    – MrMEX
    26 фев 2018 в 8:44
  • там есть чекбокс который отключает прокртутку оставляя fade-in/fade-out 26 фев 2018 в 8:53

2 ответа 2

0

Сделай кнопки навигации (назад и вперед), при клике на которые вызывай функцию setTimeout

setTimeout(function () {
   //выбрал текущий слайд, перешел в следующему  
}, 800);

setTimeout(function () {
   //выбрал текущий слайд, перешел в предыдущему
}, 800);
2
  • Не подходит, нужен чистый CSS
    – MrMEX
    26 фев 2018 в 8:43
  • animation-delay укажи в секундах, к примеру 2s 26 фев 2018 в 11:24
0

Ни к чему изобретать велосипед, он давно уже изобретён. Вот самая простая галерея изображений(не автоматическая)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> 
        img{
          display:block;
          width:320px;
          height:240px;
        }
        .slider{
            width:320px;
            height:240px;
            margin:auto;
            position: relative;
        }
        #prev,#back{
            position: absolute;
            top:0;
            width:20px;
            height:100%;
            background:rgba(255,255,255,0);
            line-height: 240px;
            font-size:2em;
            text-align:center;
            text-decoration:none;
            color:#fff;

        }
        #prev{
            left:0;
        }
        #back{
            right:0;
        }
        #prev:hover,#back:hover{
            background:rgba(255,255,255,.7);
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            

            var images = ["http://1.bp.blogspot.com/-aq8b3ACr2sI/UGCIn6GY2_I/AAAAAAAAAB8/rEO7ZtZM3hQ/s320/20081026101345.jpg",
            "https://bankoboev.ru/storage/thumbnail/bankoboev.ru-329203.jpg",
            "https://pp.userapi.com/c527415/u21741383/video/l_7def738f.jpg",
            "https://pp.userapi.com/c638724/u199796686/video/l_9571397f.jpg",
            "https://pp.userapi.com/c543403/u197059094/video/l_0b6c337c.jpg"];
            var current = 0;
            $("#img").attr("src", images[current] );

            $("#prev").click(function(){
                if(current !=0){
                    current--;
                    $("#img").fadeToggle("fast");
                    $("#img").attr("src", images[current]);
                    $("#img").fadeToggle("fast");
                }
            });

            $("#back").click(function(){
                if(current != images.length - 1){
                    current++;
                   $("#img").fadeToggle("fast");
                    $("#img").attr("src", images[current]);
                    $("#img").fadeToggle("fast");
                }        
            });
            

        });
    </script>
</head>
<body>
    
    <div class="slider">
      <img src="" alt="" id="img">
      <a href="#" id="prev"><</a>
      <a href="#" id="back">></a>
    </div>
    

</body>
</html>

И как видно , можно задать любой эффект

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.