https://sto-soft.ru/t/v597/images/startstop-slider.js

1jQuery(document).ready(function($) {
2	// SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND
3	var delayLength = 10000;/*4000*/
4	var moving = false;
5	var total = $(".slide").length;
6	var sliderHeight = $(".slide img").height();
7	var imgTop = $('.slide img').css('top');
8	//var imgTop = parseFloat($('.slide img').css('top'),10); //Кут. Кирилл
9	if (imgTop == 'auto') imgTop = 0;
10	var sliderIntervalID;
11	var panelWidth;
12	function doMove(to) {
13	    if (!moving) {
14	                moving = true;
15	                var leftValue = $("#mover").css("left");
16	
17	                // Fix for IE
18	                if (leftValue == "auto") { leftValue = 0; };
19	
20	                var currentSlide = -(parseFloat(leftValue)/panelWidth).toFixed();
21	
22	                var nextSlide;
23	                if (to !== null) {
24	                    nextSlide = to;
25	                    clearInterval(sliderIntervalID);
26	                } else {
27	                    nextSlide = (currentSlide+1 !== total) ? currentSlide+1 : 0;
28	                }
29	                var movement = -panelWidth*nextSlide;
30	
31	                // поднимаем вверх текущий и следующий слайды
32	                $(".slide img").eq(nextSlide).animate({
33	                    "top": -sliderHeight-50
34	        },function() {
35	                    // текущий кружок делаем неактивным
36	                    $('#slider .controllers > span').eq(currentSlide).attr('class','screenlist active');
37	                    $(".slide img").eq(currentSlide).animate({
38	                        "top": -sliderHeight-50
39	                    },function() {
40	                        // двигаем слайды
41	                        $("#mover").animate({
42	                            "left": movement
43	                        },function() {
44	                            // бывший следующий кружок делаем активным
45	                            $('#slider .controllers > span').eq(nextSlide).attr('class','screenlist');
46	                            // опускаем бывшие текущий и следующий
47	                            $(".slide img").eq(nextSlide).animate({
48	                                "top": imgTop
49	                            },function() {
50	                                moving = false;
51	                                $(".slide img").eq(currentSlide).animate({
52	                                    "top": imgTop
53	                                });
54	                            });
55	                        });
56	                    });
57	                });
58	    }
59	}
60	
61	$(function(){
62		let IsMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
63		if(IsMobile) {
64			$('#mover').slick({
65				dots: true,
66				arrows: false,
67				infinite: true,
68				speed: 1200,				
69				autoplay: false,
70				autoplaySpeed: 4000,
71				draggable: true,
72				slidesToShow: 1
73			})
74		} else {
75		    moving = false;
76		    total = $(".slide").length;
77		    sliderHeight = $(".slide img").height();
78		    var imgTop = $('.slide img').css('top');
79		    //var imgTop = parseFloat($('.slide img').css('top'),10); //Кут. Кирилл
80		    if (imgTop == 'auto') imgTop = 0;
81		
82		    var $slide1 = $("#slide-1");
83		
84		    panelWidth = $slide1.css("width");
85		    var panelPaddingLeft = $slide1.css("paddingLeft");
86		    var panelPaddingRight = $slide1.css("paddingRight");
87		
88		    panelWidth = parseFloat(panelWidth, 10);
89		    panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
90		    panelPaddingRight = parseFloat(panelPaddingRight, 10);
91		
92		    panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;
93		
94		    var totalMoverwidth = total * panelWidth;
95		    $("#mover").css("width", totalMoverwidth);
96		    $("#slider").mouseenter(
97		            function(){
98		                clearInterval(sliderIntervalID);
99		            }
100		    );
101		    $("#slider").mouseleave(
102		            function(){
103		                sliderIntervalID = setInterval(function(){
104		                        doMove(null);
105		                    }, delayLength);
106		            }
107		    )
108		
109		// Добавляем панель навигации
110		    var navs = $('<div class="controllers">');
111		    for (var i = 0; i < total; ++i) {
112		        navs.append('<span class="screenlist active">' +(i+1)+'</span>');//<span/>
113		    }
114		    navs.appendTo($('#slider'));
115		
116		    var leftValue = $("#mover").css("left");
117		    // Fix for IE
118		    if (leftValue == "auto") { leftValue = 0; };
119		    var currentSlide = -(parseFloat(leftValue)/panelWidth).toFixed();
120		
121		    var navs = $('#slider .controllers > span');
122		    $(navs).each(function(index){
123		        if (index === currentSlide) {
124		            $(this).attr('class','screenlist');//active
125		        }
126		        if( $(this).attr('onclick') == null ){
127		            $(this).click( function(){
128		                doMove(index);
129		                return false;
130		            } );
131		        }
132		    });
133		
134		    sliderIntervalID = setInterval(function(){
135		            doMove(null);
136		    }, delayLength);
137		}
138	});
139});