Некорректно работает слайдер при его дублировании

@Goggi · Регистрация: 23.02.2010

Студворк — интернет-сервис помощи студентам

Добрый день всем! Столкнулся с такой проблемой, что нужно на странице продублировать слайдер. Но когда его дублируешь, то он работает некорректно, т.е. грузится все в одном слайдере, а второй просто пустой. Прикрепляю слайдер.
Спасибо всем за внимание!
slider.zip

Или вот исходные коды

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
$(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();  
 
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
@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;
}

@Yura007 · 22.11.2019, 00:12

А разве допускается использование id дважды ?
Второй слайдер пустой потому что у него ID такие же как и у первого. Задайте ему индивидуальный ID.
Самый просто вариант просто продублировать js код с новыми ID для 2-го слайдера(но не самый правильный но работать будет ).

Новые блоги и статьи Все статьи Все блоги /
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK сделайте это, JDK, то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Перейдите по ссылке:. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .

@Yura007 61 / 44 / 16 Регистрация: 09.02.2019 Сообщений: 149
	22.11.2019, 00:12
	А разве допускается использование id дважды ? Второй слайдер пустой потому что у него ID такие же как и у первого. Задайте ему индивидуальный ID. Самый просто вариант просто продублировать js код с новыми ID для 2-го слайдера(но не самый правильный но работать будет ). 0