我正在创建一个jquery内容滑块,您可以使用next和prev按钮浏览内容幻灯片(图像和文本),出于某种原因,我只能在文档就绪后按回来时才能使其工作,滑块进入到最后一张幻灯片。
这是因为在每次点击事件之后,我检查当前滑块索引是最后一个还是第一个,这样我就可以有效地循环滑块内容。
当我点击下一个按钮时,我收到以下错误消息:
sliders.size不是函数
size()与length()不一样吗?
此外,在我点击prev buttom添加控制台日志后,它总是认为当前的滑块是第一个
这是我目前的代码(要看的开放代码段):
$(document).ready(function(){
var sliders = $('.full_slider_big_item');
var show_index = 0;
$('.full_slider_big_item').eq(show_index).addClass('active_slider');
$(".full_slider_big_items_next").click(function(){
console.log('clicked next');
if(show_index == sliders.length){
console.log('slide is last');
$('.full_slider_big_item').eq(show_index).removeClass('active_slider');
$('.full_slider_big_item').eq(0).addClass('active_slider');
}
else{
console.log('slide is not last');
$('.full_slider_big_item').eq(show_index).removeClass('active_slider');
$('.full_slider_big_item').eq(show_index++).addClass('active_slider');
}
});
$(".full_slider_big_items_prev").click(function(){
console.log('clicked prev');
if(show_index == 0){
console.log('slide is first');
$('.full_slider_big_item').eq(show_index).removeClass('active_slider');
$('.full_slider_big_item').eq(show_index-1).addClass('active_slider');
}
else{
console.log('slide is not first');
$('.full_slider_big_item').eq(show_index).removeClass('active_slider');
$('.full_slider_big_item').eq(show_index--).addClass('active_slider');
}
});
});
.full_slider_maincontainer{width:100%; height:74vh; display:flex; flex-wrap:wrap; justify-content:space-between;}
.full_slider_big_items_container{width:69%; height:100%; position:relative; box-shadow:2px 2px 2px rgba(0,0,0,0.3); overflow:hidden;}
.full_slider_big_items_prev{z-index:9999; cursor:pointer; position:absolute; left:25px; bottom:25px;}
.full_slider_big_items_prev .fa{font-size:25px; color:white}
.full_slider_big_items_next{z-index:9999; cursor:pointer; position:absolute; right:25px; bottom:25px;}
.full_slider_big_items_next .fa{font-size:25px; color:white}
.full_slider_big_item{position:absolute; top:0px; left:0px; width:100%; height:100%; display:none;}
.full_slider_big_item_image_container{width:100%; height:100%;}
.full_slider_big_item_image{width:100%; height:100%; background-size:cover;}
.full_slider_big_item_texts_container{width:60%; height:100%; display:flex; flex-direction:column; padding:25px 125px 25px 25px; position:absolute; top:0px; left:0px; background: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));}
.full_slider_big_item_texts_title{font-size:35px; color:var(--main_color); margin:10px 0px; text-shadow: 4px 4px 12px rgba(0,0,0,0.9);}
.full_slider_big_item_texts_info_container{height:30px; display:flex; align-items:center;}
.full_slider_big_item_texts_info_category_icon{margin-right:5px; color:white; font-size:13px; text-shadow:2px 2px 11px rgba(0,0,0,0.9);}
.full_slider_big_item_texts_info_category{font-size:13px; margin-right:20px; color:white; text-shadow:2px 2px 11px rgba(0,0,0,0.9);}
.full_slider_big_item_texts_info_date_icon{margin-right:7px; color:white; font-size:13px; text-shadow:2px 2px 11px rgba(0,0,0,0.9);}
.full_slider_big_item_texts_info_date{font-size:13px; color:white; text-shadow:2px 2px 11px rgba(0,0,0,0.9);}
.full_slider_big_item_texts_description{font-size:23px; color:white; margin:20px 0px; line-height:37px; text-shadow:2px 2px 11px rgba(0,0,0,0.9);}
.full_slider_big_item_texts_link{padding:7px 13px; background-color:var(--main_color); box-shadow:3px 3px 9px rgba(0,0,0,0.9); color:white; font-size:17px; border-radius:5px; align-self:flex-start;}
.full_slider_big_item_texts_link .fa{color:white; font-size:17px; margin-right:8px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full_slider_maincontainer push " style="">
<div class="full_slider_big_items_container slider_container" style="">
<div class="full_slider_big_items_prev" style=""><i class="fa fa-chevron-left" style=""></i></div>
<div class="full_slider_big_items_next" style=""><i class="fa fa-chevron-right" style=""></i></div>
<div class="full_slider_big_item slider_item" style="">
<div class="full_slider_big_item_image_container" style="">
<div class="full_slider_big_item_image move" style="background-image:url('img/dogs35.jpg');"></div>
</div>
<div class="full_slider_big_item_texts_container" style="">
<span class="full_slider_big_item_texts_title" style="">Titulo</span>
<div class="full_slider_big_item_texts_info_container" style="">
<i class="full_slider_big_item_texts_info_category_icon fa fa-paw" style=""></i>
<span class="full_slider_big_item_texts_info_category" style="">Categoria</span>
<i class="full_slider_big_item_texts_info_date_icon fa fa-calendar" style="" ></i>
<span class="full_slider_big_item_texts_info_date" style="">24/01/2018</span>
</div>
<p class="full_slider_big_item_texts_description" style="">Esta es una descripcion muy chula sobre una seccion de esta increible pagina web, es jodidamente sombrosa.</p>
<a class="full_slider_big_item_texts_link" href="" style=""><i class="fa fa-arrow-circle-right"></i>Leer más</a>
</div>
</div>
<div class="full_slider_big_item slider_item" style="">
<div class="full_slider_big_item_image_container" style="">
<div class="full_slider_big_item_image move" style="background-image:url('img/dogs45.jpg');"></div>
</div>
<div class="full_slider_big_item_texts_container" style="">
<span class="full_slider_big_item_texts_title" style="">Titulo</span>
<div class="full_slider_big_item_texts_info_container" style="">
<i class="full_slider_big_item_texts_info_category_icon fa fa-paw" style=""></i>
<span class="full_slider_big_item_texts_info_category" style="">Categoria</span>
<i class="full_slider_big_item_texts_info_date_icon fa fa-calendar" style="" ></i>
<span class="full_slider_big_item_texts_info_date" style="">24/01/2018</span>
</div>
<p class="full_slider_big_item_texts_description" style="">Esta es una descripcion muy chula sobre una seccion de esta increible pagina web, es jodidamente sombrosa.</p>
<a class="full_slider_big_item_texts_link" href="" style=""><i class="fa fa-arrow-circle-right"></i>Leer más</a>
</div>
</div>
<div class="full_slider_big_item slider_item" style="">
<div class="full_slider_big_item_image_container" style="">
<div class="full_slider_big_item_image move" style="background-image:url('img/dogs25.jpg');"></div>
</div>
<div class="full_slider_big_item_texts_container" style="">
<span class="full_slider_big_item_texts_title" style="">Titulo</span>
<div class="full_slider_big_item_texts_info_container" style="">
<i class="full_slider_big_item_texts_info_category_icon fa fa-paw" style=""></i>
<span class="full_slider_big_item_texts_info_category" style="">Categoria</span>
<i class="full_slider_big_item_texts_info_date_icon fa fa-calendar" style="" ></i>
<span class="full_slider_big_item_texts_info_date" style="">24/01/2018</span>
</div>
<p class="full_slider_big_item_texts_description" style="">Esta es una descripcion muy chula sobre una seccion de esta increible pagina web, es jodidamente sombrosa.</p>
<a class="full_slider_big_item_texts_link" href="" style=""><i class="fa fa-arrow-circle-right"></i>Leer más</a>
</div>
</div>
</div>
</div>