Показать сообщение отдельно
  #2 (permalink)  
Старый 04.03.2018, 00:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,837

Chmil,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
jQuery(function() {
    jQuery(".slider").each(function(indx, el) {
        var slideWrap = jQuery(".slide-wrap", el);
        var nextLink = jQuery(".next-slide", el);
        var prevLink = jQuery(".prev-slide", el);
        var slideWidth = jQuery(".slide-item", el).outerWidth();
        var newLeftPos = slideWrap.position().left - slideWidth;
        nextLink.click(function() {
            if (!slideWrap.is(":animated")) {
                slideWrap.animate({
                    left: newLeftPos
                }, 500, function() {
                    slideWrap.find(".slide-item:first").appendTo(slideWrap).parent().css({
                        "left": 0
                    });
                });
            }
        });
        prevLink.click(function() {
            if (!slideWrap.is(":animated")) {
                slideWrap.css({
                    "left": newLeftPos
                }).find(".slide-item:last").prependTo(slideWrap).parent().animate({
                    left: 0
                }, 500);
            }
        });
    });
});
  </script>
</head>

<body>
<div class="slider">
  <div class="slide-list">
    <div class="slide-wrap">
      <div class="slide-item">
        Элемент слайдера 1
      </div>
      <div class="slide-item">
        Элемент слайдера 2
      </div>
      <div class="slide-item">
        Элемент слайдера 3
      </div>
      <div class="slide-item">
        Элемент слайдера 4
      </div>
    </div>
    <div class="clear"></div>
  </div>
  <div class="namecat">ИМЯ КАТЕГОРИИ</div>
  <div class="prjamu"></div>
  <div class="navyp prev-slide">prev</div>
  <div class="navy next-slide">next</div>

</div>
 <div class="slider">
  <div class="slide-list">
    <div class="slide-wrap">
      <div class="slide-item">
        Элемент слайдера 1
      </div>
      <div class="slide-item">
        Элемент слайдера 2
      </div>
      <div class="slide-item">
        Элемент слайдера 3
      </div>
      <div class="slide-item">
        Элемент слайдера 4
      </div>
    </div>
    <div class="clear"></div>
  </div>
  <div class="namecat">ИМЯ КАТЕГОРИИ</div>
  <div class="prjamu"></div>
  <div class="navyp prev-slide">prev</div>
  <div class="navy next-slide">next</div>

</div>
</body>
</html>

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