Есть такая мини галерея, подскажите пожалуйста как замедлить переход между фото, чтобы он не так резко переходил
$(function() {
$(".img-product").brazzersCarousel();
});
(function($) {
$.fn.brazzersCarousel = function() {
return this.addClass("brazzers-daddy").append("<div class='tmb-wrap'><div class='tmb-wrap-table'>").append("<div class='image-wrap'>").each(function() {
var this_wrapper = $(this);
this_wrapper.find("img").appendTo(this_wrapper.find(".image-wrap")).each(function() {
this_wrapper.find(".tmb-wrap-table").append("<div>");
});
}).find(".tmb-wrap-table").bind('touchmove', function(event) {
event.preventDefault();
var myLocation = event.originalEvent.changedTouches[0];
var realTarget = document.elementFromPoint(myLocation.clientX, myLocation.clientY);
var this_img = $(realTarget).parent(".tmb-wrap-table").closest(".brazzers-daddy").find("img");
var all_thmbs = $(realTarget).parent(".tmb-wrap-table").find("div");
this_img.hide().eq($(realTarget).index()).css("display", "block");
all_thmbs.removeClass("active");
$(realTarget).addClass("active");
}).find("div").hover(function() {
var this_img = $(this).parent(".tmb-wrap-table").closest(".brazzers-daddy").find("img");
var all_thmbs = $(this).parent(".tmb-wrap-table").find("div");
this_img.hide().eq($(this).index()).css("display", "block");
all_thmbs.removeClass("active");
$(this).addClass("active");
}).parent().find(":first").addClass("active");
};
})(jQuery);
/*!
* jQuery Brazzers Carousel v1.0.0 (http://webdesign-master.ru)
* Copyright 2015 WebDesign Master.
*/
.img-product{
width: 150px;}
.img-product{
padding: 50px;}
.brazzers-daddy:after {
content: "";
display: table;
clear: both;
}
.brazzers-daddy {
position: relative;
}
.brazzers-daddy img {
width: 100%;
position: relative;
display: none;
top: 0;
left: 0;
margin-bottom: 10px;
}
.brazzers-daddy img:first-child {
display: block;
}
.tmb-wrap {
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.tmb-wrap .tmb-wrap-table {
display: table;
height: 100%;
width: 100%;
}
.tmb-wrap-table div {
display: table-cell;
transition: all .3s ease;
border-bottom: 2px solid transparent;
padding-top: 10px;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.tmb-wrap-table div.active {
border-bottom: 2px solid #E94A26;
}
.tmb-wrap-table div:first-child:last-child {
border-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-product">
<img src="https://185504.selcdn.ru/static/antkingdom.reshops.ru/catalog/12/4183998825b4914ed43910_small.jpg" alt="">
<img src="https://185504.selcdn.ru/static/antkingdom.reshops.ru/catalog/13/16922066705b49004cd371e_small.jpg" alt="">
<img src="https://185504.selcdn.ru/static/antkingdom.reshops.ru/catalog/12/4183998825b4914ed43910_small.jpg" alt="">
</div>
Похоже на луп внутри лупа. А вообще нужно или в jquery использовать дилэй или функцию/метод от яваскрипта setTimeout и setInterval ;ну если это луп внутри лупа то там как то за функцию выносить нужно , лень искать ответ, но если очень надо - напишите - я псмотрю что то
Сборка персонального компьютера от Artline: умный выбор для современных пользователей