При нажатии на кнопку смены слайда каждый раз происходит отсчет с 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;
});
opacity
отвечает за прозрачность, и обычно его значения от 0 до 1