我的网站上有一个滑块,滑块几乎完美无缺。发生的事情是滑块移动得太快一段时间后移动太快后滑动10秒滑块恢复正常
这是我的代码:
<section id="slider" class="container-slider large-12 column">
<ul class="slider-wrapper">
<li class="current-slide"><a href="historia.html">
<img src="img/slide-photo.png" alt="slide 1" title="" alt="" class="">
<div class="slider-icon">
<img src="img/cat-photo.png" class="icon-slider" alt="">
</div>
<div class="caption">
<h2 class="slider-title">Cavalo Lusitano</h2>
<p>O Cavalo Lusitano é procurado como montada de desporto e de lazer e como reprodutor pelas suas raras qualidade de caráter e antiguidade genética, continuando a ser o cavalo por excelência para a Arte Equestre e para o Toureiro.</p>
</div>
</a></li>
<li>
<img src="img/test2.jpg" title="" alt="">
<div class="slider-icon">
<img src="img/cat-photo.png" class="icon-slider" alt="">
</div>
<div class="caption">
<h2 class="slider-title">Cavalo Lusitano</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo iusto placeat aliquid tempore harum, similique!</p>
</div>
</li>
<li>
<img src="img/test1.jpg" title="" alt="">
<div class="slider-icon">
<img src="img/cat-photo.png" class="icon-slider" alt="">
</div>
<div class="caption">
<h2 class="slider-title">Cavalo Lusitano</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dicta laudantium voluptatem minima! Dolorum tempore dolores excepturi omnis provident. Commodi quis aperiam maiores, dolore a perferendis!</p>
</div>
</li>
</ul>
<ul id="buttons-slider" class="buttons-slider"></ul>
</section>
JS:
jQuery(function () {
var currentIndex = 0,
lightboxLis = jQuery(".light-box li");
var list = [];
jQuery('.thumbnail li').click(function () {
lightboxLis.eq(currentIndex).show();
jQuery('.buttons').show();
jQuery('.container-lightbox').css('height', '100%');
});
if(lightboxLis.length <= 7){
for(i=0; i<lightboxLis.length; i++){
jQuery('<li title="'+i+'"></li>').appendTo('.list');
};
}
else{
for(a=0; a < 5; a++){
jQuery('<li class="esconder"></li>').appendTo('.list');
}
}
var currentLi = jQuery('.list li').attr('title');
if(currentLi == lightboxLis.eq(currentIndex)) {
jQuery('.list li').addClass('active');
} else {
jQuery('.list li').removeClass('active');
}
jQuery('.list li').click(function(){
var current = jQuery(this).attr('title');
lightboxLis.hide();
lightboxLis.eq(current).show();
});
jQuery('.next').click(function() {
currentIndex++;
if (currentIndex == lightboxLis.length) {
currentIndex = 0;
}
lightboxLis.hide();
lightboxLis.eq(currentIndex).show();
console.log(lightboxLis.eq(currentIndex));
});
jQuery('.prev').click(function() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = lightboxLis.length - 1;
}
lightboxLis.hide();
lightboxLis.eq(currentIndex).show();
});
jQuery('.close').click(function() {
lightboxLis.hide();
jQuery('.buttons').hide();
jQuery('.container-lightbox').css('height', '0');
});
});
CSS:
.container-slider {
margin: 0px auto 0;
}
.container-slider-historia {
overflow: hidden;
}
.container-slider-historia img {
width: 100%;
}
.slider-wrapper {
z-index: 500;
position: relative;
height: 410px;
background: #transparent;
overflow: hidden;
}
.slider-wrapper li {
display: none;
cursor: pointer;
}
.slider-wrapper .current-slide {
display: block;
}
.slider-wrapper img {
position: absolute;
width: 100%;
height: auto;
top: 0;
left: 0;
}
.icon-slider {
z-index: 999;
float: right;
position: relative;
}
.slide-historia {
height: 427px;
overflow: hidden;
}
.hover-slider {
background-color: rgba(0, 0, 0, 0.45);
position: absolute;
top: 0;
height: 460px;
z-index: 999;
width: 98%;
text-align: center;
color: white;
display: none;
}
.hover-slider h6 {
color: white;
font-family: BlissProBold;
padding: auto 0;
}
.slider-icon {
position: absolute;
top: 0;
right: 0;
background: rgba(253, 253, 253, 0);
color: #FFF;
z-index: 999999;
margin: 10px 25px 0 0;
min-height: 60px;
min-width: 60px;
}
.slider-wrapper .caption {
position: absolute;
top: 0;
right: 0;
background: rgba(0,0,0,0.65);
width: 46%;
padding: 20px;
color: #FFF;
min-height: 30%;
margin-top: 125px;
}
.slider-wrapper h2 {
color: #FFFFFF;
font-size: 28px;
font-weight: 200;
margin-bottom: 0px;
text-transform: uppercase;
}
.slider-wrapper p {
font-size: 16px;
font-weight: 200;
}
.control-buttons {
text-align: center;
position: absolute;
z-index: 999;
width: 95%;
bottom: 0;
margin-bottom: 45px;
}
.control-buttons li {
cursor: pointer;
display: inline-block;
background: #d1d3d4;
text-indent: -99999px;
height: 12px;
width: 12px;
margin: 0 6px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.control-buttons li.active {
background: #cb301c;
border: 2px solid white;
}
.buttons-slider {
text-align: center;
position: absolute;
z-index: 999;
width: 95%;
bottom: 0;
margin-bottom: 45px;
}
.buttons-slider li {
cursor: pointer;
display: inline-block;
background: #d1d3d4;
text-indent: -99999px;
height: 12px;
width: 12px;
margin: 0 6px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.buttons-slider li.active {
background: #cb301c;
border: 2px solid white;
}
.authors {
text-align: center;
color: #7a8699;
display: block;
font-size: 1.6em;
font-weight: 300;
margin-top: 80px;
font-size: 300;
}
.arrows {
background-color: transparent;
}