我的JQuery滑块只返回(和一次)

时间:2018-05-16 13:06:53

标签: jquery slider

我正在创建一个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>

0 个答案:

没有答案