Форум

r1sus · #1 (**permalink**) 18.10.2016, 22:33

Добрый день!
Такая задача. Есть обычный слайдер, блоки горизонтально сменяют друг друга , отображается один элемент слайдера. Сам сдайдер к примеру высотой 200px, а высота одного слайда 400px. Задача такая, нужно чтобы каждый слайд сначала прокрутился вертикально( отобразив нижнюю часть картинки) и только потом сменился другим( пользователь не скролит, не нажимает, только наблюдает

. прошу только натолкнуть ,как/чем бы это реализовать или где почитать посмотреть кто видел подобное, или подсказать как правильно загуглить ) всем добра!

Rasy · #2 (**permalink**) 18.10.2016, 22:57

Нужно искать слайдер с колбэком, когда слайд попадает в поле видимости, например добавляется класс active. Если нет такого колбэка, то самому докостылять функционал, после того как слайдер завелся (такой колбэк вероятней всего будет). Т.е регистрируем счетчик с таким же таймаутом, как у слайдера и своей функцией для анимации слайда по вертикали.
Думаю, я бы так сделал.

r1sus · #3 (**permalink**) 18.10.2016, 23:23

Спасибо большое, попробую так!

рони · #4 (**permalink**) 18.10.2016, 23:31

r1sus,
Автоматизация слайдера
достаточно добавить 1 строку для анимации блока вверх

r1sus · #5 (**permalink**) 19.10.2016, 10:19

Попробую и этот вариант, спасибо

рони · #6 (**permalink**) 19.10.2016, 10:44

r1sus,
дополненный вариант по ссылке выше ...

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    background-color: #FFE23D;
  }

  li{ position:  relative;
   margin: 0px;
   width: 300px; height:400px; float: left;
   text-align: center;
   display: block;
  }
  #carusel {
    position: absolute; top: 0px; left:0px; display:block;
    height:50px;
    padding: 0px; margin: 0px;
  }
  div.item{
     overflow:hidden; width: 300px; height:200px; position: relative;  margin: 100px auto;
  }
  li > div{margin: 0px;
    box-sizing: border-box;
    height: 50%;
    width: 100%;
    border: 5px #8A2BE2 solid;
    line-height: 180px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function () {
   $(function() {
    var ul = $('#carusel'), widthAll = 0;
    $('li', ul).each(function(indx, element){
      widthAll +=  this.offsetWidth
      });
    ul.width(widthAll);
    function go() {
        var li = $('li:first', ul), w = li.width();
        li.delay(1800).animate({top : -200},1200);
        ul.delay(4600).animate({
            left: -w
        }, 2000, function () {
            li.appendTo(this).css({top : 0})
            $(this).css({
                left: '0px'
            });
            go()
        })
    }
    go()
});
})
  </script>
</head>

<body>
<div class="item">
    <ul id="carusel">
      <li  id = "1" style="background-color:red;"><div>start</div><div>end</div></li>
      <li  id = "2" style="background-color:green;"><div>start</div><div>end</div></li>
      <li  id = "3" style="background-color:Yellow;"><div>start</div><div>end</div></li>
      <li  id = "4" style="background-color:DeepPink;"><div>start</div><div>end</div></li>
      <li  id = "5" style="background-color:MediumBlue;"><div>start</div><div>end</div></li>
    </ul>
  </div>
</body>
</html>

r1sus · #7 (**permalink**) 19.10.2016, 12:49

рони,
спасибо, то что нужно

Форум

Справочник

Discord чат

Курсы javascript