1

Всем здравствуйте! Есть вот такой код CSS:

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

@keyframes slideranim {
    10% {
        left: 0%;
    }

    20% {
        left: -100%;
    }

    30% {
        left: -100%;
    }

    40% {
        left: -200%;
    }

    50% {
        left: -200%;
    }

    60% {
        left: -300%;
    }

    70% {
        left: -300%;
    }

    80% {
        left: -400%;
    }

    90% {
        left: -400%;
    }

    100% {
        left: 0%;
    }
}

И вот это притормаживает анимацию, но траблы то в том, что анимация сразу приостанавливается:

.scontainer:hover {
    animation-play-state: paused;
}

Не закончив промежуточную анимацию.

Теперь собственно вопрос, как реализовать, такое, чтобы слайдер при наведении прокручивал слайды допустим, второй слайд, прокрутился до конца, а не замирал допустим на:

left: 145%;

А прокручивал до конца и замирал, то есть, было бы:

left: 200%;

1 ответ 1

1

Вот такой хак:

Накрываем сверху слайдер прозрачным <div>, который будет забирать на себя событие hover. Остается только сделать анимацию z-index слайдера, чтобы в момент, когда он движется, он был под прозрачным <div>, а когда не движется — над ним:

....
10% { left: 0%; z-index:3; }
11% { z-index:0; }
19% { z-index:0; }
20% { left: -100%; z-index:3; }
30% { left: -100%; z-index:3; }
....

Итого рабочее демо:

Накрывающий <div> сделал с обводкой в целях тестирования, естественно обводку border нужно будет убрать

body {
  overflow: hidden;
}

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

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

.scontainer:hover {
  animation-play-state: paused;
}

.scontainer>div {
  background: #ccc;
  width: 20%;
  display: inline-block;
  height: 100px;
}

.scontainer>div:nth-child(even) {
  background: #ddd;
}

.hoverblock {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  border: 1px dotted #777;
}
<div class="hoverblock"></div>

<div class="scontainer">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

1
  • Блестяще! Спасибо!
    – MrMEX
    8 июн 2017 в 14:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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