There is such a mini gallery, please tell me how to slow down the transition between the photos so that it does not go so abruptly

$(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>

    1 answer 1

    It looks like a magnifying glass inside a magnifying glass. In general, you need to use either the delay or the function / method from setTimeout and setInterval in jquery;