How to make the slider work correctly when duplicating?

S

SergeyVladimirovich93932019-11-21 17:03:19

JavaScript

SergeyVladimirovich9393, 2019-11-21 17:03:19

Good day to all! Faced such a problem that you need to duplicate the slider on the page. But when you duplicate it, it does not work correctly, i.e. everything is loaded in one slider, and the second one is just empty. I'm attaching a slider.
Thank you all for your attention!

$(document).ready(function () {
 
var timeList = 700;
var TimeView = 5000;
var RadioBut = true;
 
var slidenewNum = 1;
var slidenewTime;
slidenewCount = $("#slid .slide1").length;
 
var animSlidenew = function(arrow){
    clearTimeout(slidenewTime); 
 
    if(arrow == "nextnew"){
      if(slidenewNum == slidenewCount) { slidenewNum=1; }
      else{slidenewNum++}
       translateWidth = -$('#active-slide').width() * (slidenewNum - 1);
       $('#slid').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
    }
    else if(arrow == "prewnew")
    {   
       if(slidenewNum == 1) { slidenewNum=slidenewCount; }
      else{slidenewNum-=1}
      translateWidth = -$('#active-slide').width() * (slidenewNum - 1); 
       $('#slid').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
    }else{
       slidenewNum = arrow;
      translateWidth = -$('#active-slide').width() * (slidenewNum -1);
       $('#slid').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
    }
 
    $(".ctrl-select.active").removeClass("active");
    $('.ctrl-select').eq(slidenewNum - 1).addClass('active');
}
 
    if(RadioBut){
    var $linkArrow = $('<a id="prewbuttonnew" href="#">&lt;</a><a id="nextbuttonnew" href="#">&gt;</a>')
        .prependTo('#active-slide');
        $('#nextbuttonnew').click(function(){
           animSlidenew("nextnew");
           return false;
           })
        $('#prewbuttonnew').click(function(){
           animSlidenew("prewnew");
           return false;
           })
    }
        var adderSpan = '';
        $('.slide1').each(function(index) {
               adderSpan += '<span class = "ctrl-select">' + index + '</span>';
           });
        $('<div class ="Radio-Butnew">' + adderSpan +'</div>').appendTo('#slid-wrap');
        $(".ctrl-select:first").addClass("active");
        $('.ctrl-select').click(function(){
        var goToNum = parseFloat($(this).text());
        animSlidenew(goToNum + 1);
        });
        var pause = false;
        var rotator = function(){
               if(!pause){slidenewTime = setTimeout(function(){animSlidenew('nextnew')}, TimeView);}
               }
        $('#slid-wrap').hover(
           function(){clearTimeout(slidenewTime); pause = true;},
           function(){pause = false; rotator();
           });
        
    var clicking = false;
    var prevX;
    $('.slide1').mousedown(function(e){
        clicking = true;
        prevX = e.clientX;
    });
 
    $('.slide1').mouseup(function() {
     clicking = false;
    });
 
    $(document).mouseup(function(){
        clicking = false;
    });
 
    $('.slide1').mousemove(function(e){
        if(clicking == true)
         {
             if(e.clientX < prevX) { animSlidenew("nextnew"); clearTimeout(slidenewTime); }
             if(e.clientX > prevX) { animSlidenew("prewnew"); clearTimeout(slidenewTime); }
           clicking = false;
        }
    });
    $('.slide1').hover().css('cursor', 'pointer');
    rotator();  
 
});

<!doctype html>
<html lang="ru">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Адаптивный слайдер карусель, содержит эффект горизонтального пролистывая, с плавным появлением и исчезновением слайдов. Прост в установке и настройке, не требует дополнительных плагинов.">
<meta name=viewport content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" type="text/css" href="style1.css">
<script src="jquery-3.2.1.1.min.js"></script>
<script src="slid.js"></script>
 
<title>Адаптивный слайдер карусель, с плавным эффектом автопрокрутки HTML5 + CSS3 + jQuery</title>
</head>
<body>
 
 
 
<div id="slid-wrap">
    <div id="active-slide">
        <div id="slid">
            <div class="slide1"><img src="1.jpg"></div>
            <div class="slide1"><img src="2.jpg"></div>
            <div class="slide1"><img src="3.jpg"></div>
            <div class="slide1"><img src="4.jpg"></div>
        </div>
    </div>
</div>
 
<div id="slid-wrap">
    <div id="active-slide">
        <div id="slid">
            <div class="slide1"><img src="1.jpg"></div>
            <div class="slide1"><img src="2.jpg"></div>
            <div class="slide1"><img src="3.jpg"></div>
            <div class="slide1"><img src="4.jpg"></div>
        </div>
    </div>
</div>
 
 
</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
 
body {
    color: #4f4f5a;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
}
 
#slid-wrap{ 
    max-width:800px;
    margin: 0 auto;
    margin-top: 200px;
}
 
#active-slide {
    width: 100%;
    display: table;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
 
#slid{
    position: relative;
    width: calc(100% * 4);
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}
 
.slide1{
    width: calc(100%/4);
    list-style: none;
    display: inline;
    float: left;
}
 
.slide1 img {
    width:100%;
}
 
.Radio-Butnew{
    margin-top:10px;
    text-align:center;
}
 
.Radio-Butnew .ctrl-select {
    margin:2px;
    display:inline-block;
    width:16px;
    height:16px;
    overflow:hidden;
    text-indent:-9999px;
    background:url(radioBg.png) center bottom no-repeat;
}
 
.Radio-Butnew .ctrl-select:hover {
    cursor:pointer;
    background-position:center center;
}
 
.Radio-Butnew .ctrl-select.active {
    background-position:center top;
}
 
#prewbuttonnew, #nextbuttonnew {
    display:block;
    width:40px;
    height:100%;
    position:absolute;
    top:0;
    overflow:hidden;
    text-indent:-999px;
    background: url("arrowBg.png") left center no-repeat;
    opacity:0.5;
    z-index:3;
    outline:none !important;
}
 
#prewbuttonnew {
    left:10px;
}
 
#nextbuttonnew {
    right:10px;
    background:url(arrowBg.png) right center no-repeat;
}
 
#prewbuttonnew:hover, #nextbuttonnew:hover {
    opacity:1;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

P

pavelpolitaev, 2019-11-21
@pavelpolitaev

Of course, there are a lot of problems here, but first, remove the same div id from the page. Id for that and id, it is unique for the whole page. Inside your function, you work with classes within the entire page, but you should only within the current slider. Remove all id, they are not needed here. Change all your id's to classes. Write a class for the slider, for example, slider, then go through all the sliders like this

let your_function = function (dom_slider){
// Код слайдера 
}
$( ".slider" ).each(function( index ) {
   your_function($(this))
});

and do all searches inside dom_slider. On jQuery, as mentioned above, you can wrap everything in a plugin, but the meaning is the same.