Добрый день всем! Столкнулся с такой проблемой, что нужно на странице продублировать слайдер. Но когда его дублируешь, то он работает некорректно, т.е. грузится все в одном слайдере, а второй просто пустой. Прикрепляю слайдер.
Спасибо всем за внимание!
$(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="#"><</a><a id="nextbuttonnew" href="#">></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;
}
