Я делаю слайдер контента jquery, в котором вы просматриваете слайды контента (изображения и текст) с помощью кнопок «Вперед» и «Предыдущая». По какой-то причине я могу заставить его работать, только когда я нажимаю назад после того, как документ готов, ползунок выходитдо последнего слайда.
Это потому, что после каждого события щелчка я проверяю, является ли текущий индекс слайдера последним или первым, чтобы я мог эффективно зациклить содержимое слайдера.
Когда я нажимаю следующую кнопку, я получаю это сообщение об ошибке:
sliders.size не является функцией
Разве размер () не равен длине ()?
Также, после добавления журналов консоли, когда я нажимаю на предыдущую кнопку, она всегда думает, что текущий ползунок первый
Это мой текущий код (откройте фрагмент, чтобы увидеть):
$(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>