Показать сообщение отдельно
  #16 (permalink)  
Старый 07.07.2017, 01:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

слайдер на js
Сообщение от j0hnik
попробую на классах сделать.
ок, будем посмотреть!

вспомнил хак, убрал таймер, проверь в опере пропадёт анимация(быстрая смена, вместо плавной) или нет, кликать много раз.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   * { box-sizing: border-box;margin: 0;padding: 0; }

.slider {
    width: 300px;
    height: 170px;
    overflow: hidden;
    position: relative;
}

.slider__arrow {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    background-color: #3294FD;
    text-align: center;
    line-height: 20px;
    color: #fff;
    z-index: 9;
    cursor: pointer;
}

.slider__left { left: 0; }
.slider__right { right: 0; }

.slider__container {
    width: 900px;
    height: 170px;
    position: absolute;
    top: 0;
    left: 0;
}

.slider__item {
    width: 100px;
    height: 170px;
    line-height: 170px;
    background: pink;
    display: block;
    float: left;
    text-align: center;
}

.slider__item:hover {
    background-color: #F7F7F7;
}
.slider__arrow.hide{
  display: none;
}
.slider {
  margin: 20px auto;
}
.slider__container.animate{
   transition: left 1.2s cubic-bezier(.455, .03, .515, .955);
}
.slider__container.left{
  left: -100px;
}

  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var left = document.querySelector(".slider__left"),
        right = document.querySelector(".slider__right"),
        container = document.querySelector(".slider__container");
    right.addEventListener("click", function() {
        var last = container.querySelector(".slider__item:last-child");
        var first = container.querySelector(".slider__item:first-child");
        container.classList.remove("animate");
        if (!container.classList.contains("left")) {
            container.classList.add("left");
            container.insertBefore(last, first);
        }
            document.documentElement.clientWidth;
            container.classList.add("animate");
            container.classList.remove("left")

    });
    left.addEventListener("click", function() {
        var first = container.querySelector(".slider__item:first-child");
        container.classList.remove("animate");
        if (container.classList.contains("left")) {
            container.classList.remove("left");
            container.appendChild(first)
        }
            document.documentElement.clientWidth;
            container.classList.add("animate");
            container.classList.add("left")

    })
});
  </script>
</head>

<body>
<div class="slider">
    <div class="slider__arrow slider__left"><</div>
    <div class="slider__arrow slider__right">></div>
    <div class="slider__container">
        <div class="slider__item">1</div>
        <div class="slider__item">2</div>
        <div class="slider__item">3</div>
        <div class="slider__item">4</div>
        <div class="slider__item">5</div>
        <div class="slider__item">6</div>
        <div class="slider__item">7</div>
        <div class="slider__item">8</div>
        <div class="slider__item">9</div>
    </div>
</div>


</body>
</html>

Последний раз редактировалось рони, 07.07.2017 в 01:44.
Ответить с цитированием