0

При нажатии на кнопку смены слайда каждый раз происходит отсчет с 0px и слайд начинает прокручиваться с 1 слайда. Как сделать перелистывание слайда с той точки на которой я уже нахожусь. Как я понимаю использовать translate3d можно только в качестве step? и метод .animate дублирует transition из css? codepen

     (document).ready(function() {
  $(".project-gallerey").each(function () { // обрабатываем каждый слайдер
    var obj = $(this);
    $(obj).append("<div class='pagination-gallerey'></div>");
    $(obj).find(".slider-image").each(function () {
      $(obj).find(".pagination-gallerey").append("<span class='nav-pengetation' rel='"+$(this).index()+"'></span>"); // добавляем блок навигации
      $(this).addClass("slider"+$(this).index());
    });
    $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню
  });
});
function sliderJS (obj, sl) { // slider function
  var ul = $(sl).find("ul"); // находим блок
  var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока
  var step = $(bl).width(); // ширина объекта
  $(ul).animate({'opacity': step*obj
                }, {
    step: function (now, fx) {
      $(this).css({"transform": "translate3d( " + - now  + "px, 0px,  0px)"});
    },
    duration: 500,
    easing: 'linear',
    queue: false,
    complete: function () {
    }
  }, 'linear'); // 500 это скорость перемотки
}
$(document).on("click", ".nav-pengetation", function() { // slider click navigate
  var sl = $(this).closest(".project-gallerey"); // находим, в каком блоке был клик
  $(sl).find("span").removeClass("on"); // убираем активный элемент
  $(this).addClass("on"); // делаем активным текущий
  var obj = $(this).attr("rel"); // узнаем его номер
  sliderJS(obj, sl); // слайдим
  return false;
});
6
  • весь необходимый код должен быть непосредственно в вопросе, ссылки могут служить лишь дополнением
    – Grundy
    17 июл 2016 в 16:54
  • где вызывается sliderJS?
    – Grundy
    17 июл 2016 в 16:57
  • свойство opacity отвечает за прозрачность, и обычно его значения от 0 до 1
    – Grundy
    17 июл 2016 в 17:19
  • @Grundy это ясно за что отвечает opacity. Но почему значения уходят в 0? собственно пример кода с translate3d брал здесь stackoverflow.com/questions/27302395/…
    – Drop
    17 июл 2016 в 17:32
  • потому что на самом деле значение не с 0, а с 1 идут
    – Grundy
    17 июл 2016 в 17:37

1 ответ 1

0

Проблема заключается в непонимании того, как работает animate:

В передаваемом объекте указываются конечные значения свойств, jQuery берет текущее значение и рассчитывает шаги.

В случае со свойством opacity - браузеры, по крайней мере хром, хранят его значения в диапазоне от 0 до 1, таким образом при клике на вторую, третью кнопки, движение начиналось не с ожидаемого значения(например 320), а с текущего - 1.

Первый слайд убирался, потому что у него индекс - 0, а для него выставлялось новое значение свойства opacity в 0 - что значит абсолютно прозрачный элемент.

Кроме того, в данном случае лучше использовать какое-то несуществующее свойство, чтобы не влиять на остальные настройки.

$(document).ready(function() {
  $(".project-gallerey").each(function() { // обрабатываем каждый слайдер
    var obj = $(this);
    $(obj).append("<div class='pagination-gallerey'></div>");
    $(obj).find(".slider-image").each(function() {
      $(obj).find(".pagination-gallerey").append("<span class='nav-pengetation' rel='" + $(this).index() + "'></span>"); // добавляем блок навигации
      $(this).addClass("slider" + $(this).index());
    });
    $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню
  });
});

function sliderJS(obj, sl) { // slider function
  var ul = $(sl).find("ul"); // находим блок
  var bl = $(sl).find("li.slider" + obj); // находим любой из элементов блока
  var step = $(bl).width(); // ширина объекта
  $(ul).animate({
    'propForTransformAnimation': step * (+obj)
  }, {
    step: function(now, fx) {
      $(this).css({
        "transform": "translate3d( " + -now + "px, 0px,  0px)"
      });
    },
    duration: 500,
    easing: 'linear',
    queue: false,
    complete: function() {}
  }, 'linear'); // 500 это скорость перемотки
}
$(document).on("click", ".nav-pengetation", function() { // slider click navigate
  var sl = $(this).closest(".project-gallerey"); // находим, в каком блоке был клик
  $(sl).find("span").removeClass("on"); // убираем активный элемент
  $(this).addClass("on"); // делаем активным текущий
  var obj = $(this).attr("rel"); // узнаем его номер
  sliderJS(obj, sl); // слайдим
  return false;
});
ul {
  list-style-type: none;
}
.project-gallerey {
  float: left;
  width: 50%;
  position: relative;
}
.project-info {
  float: left;
  width: 50%;
  padding-left: 20px;
}
.nav-pengetation {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: red;
  border-radius: 100%;
  margin-left: 5px;
  cursor: pointer;
}
.nav-pengetation:first-child {
  margin-left: 0;
}
.slider-gallerey {
  overflow: hidden;
}
.sliders-wrapper {
  width: 2500px;
  padding: 0;
}
.slider-image {
  float: left;
  width: 120px;
}
.base {
  width: 220px;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="base">
  <div class="close-modal"></div>
  <div class="project-gallerey">

    <div class="slider-gallerey">
      <ul class="sliders-wrapper">
        <li class="slider-image">
          <img src="http://placehold.it/100/e499e4/fff&amp;text=1" alt="">
        </li>
        <li class="slider-image">
          <img src="http://placehold.it/100/e499e4/fff&amp;text=2" alt="">
        </li>
        <li class="slider-image">
          <img src="http://placehold.it/100/e499e4/fff&amp;text=3" alt="">
        </li>
      </ul>
    </div>
  </div>
</div>

2
  • А зачем экранировать в скобки (+obj)?
    – Drop
    17 июл 2016 в 20:34
  • @Drop, на автомате сделал, в любом случае, такие неочевидные преобразования лучше выделять, чтобы сразу было видно
    – Grundy
    18 июл 2016 в 6:12

Ваш ответ

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

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