一个页面上的多个滑块：如何使箭头针对一组特定的幻灯片？

Posted

技术标签:

【中文标题】一个页面上的多个滑块：如何使箭头针对一组特定的幻灯片？【英文标题】：Multiple sliders on one page: How to make arrows target a specific set of slides? 【发布时间】：2015-03-12 20:24:49 【问题描述】：

我正在尝试创建一个投资组合网站，该网站在同一页面上包含多个图像滑块。我让 html、CSS 和 jQuery 为单个滑块工作，但当我添加另一个滑块时——具有相同的类——事情变得很时髦。

我的问题：如何使左右箭头仅针对它们所连接的幻灯片？

 

可能的修复：

-我需要重新组织 HTML 以使箭头与幻灯片同级吗？不过，它们已经包含在同一个“portfolio-item”div 中。

-我需要在 jQuery 中使用“this”和/或“each”吗？我尝试在不同的位置使用“this”和“each”选择器，但没有运气。我是新手，所以我可能用错了。

 

附加的代码正在运行，但箭头正在移动文档中的所有图像，而不仅仅是它们各自滑块上的图像。

感谢您的帮助！！

瑞恩

var main = function()
	
	$('.slide:first-child').fadeIn(600).addClass('active-slide');
    
	//right arrow!
	
    $('.portfolio-item .right-arrow').click( function()
        var currentSlide=$('.active-slide');
        var nextSlide=currentSlide.next();
        
        if(nextSlide.length === 0) 
            nextSlide=$('.slide:first-child');
        
        
        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');
        
    );
    
	//left arrow!
	
    $('.portfolio-item .left-arrow').click( function()
        var currentSlide=$('.active-slide');
        var prevSlide = currentSlide.prev();
        
        if(prevSlide.length === 0) 
           prevSlide=$('.slide:last-child');
        
        
        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');

        
	);
    


$(document).ready(main);
@charset "UTF-8";
/* CSS Document */

.slider-container 
	display: block;
	position:relative;
	width: 100%;
	max-width:600px;
	background-color: black;
	margin: 0% 0% 1% 0%;
	overflow:hidden;
	float:left;


.slider 
	position:relative;
	padding-top: 45%;
	z-index:0;


ul.slides 
	z-index:1;
	list-style-type:disc;
	display:block;
	position:absolute;
	padding:0;
	margin:0;
	top:0;
	left:0;
	width:100%;
	height:100%;


.active-slide 
	display:block;
	margin:0 auto;


.slide 
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   overflow:hidden;


.slide img
	margin:0;
	position:absolute;
	width:100%;
	z-index:2;
	left:0;


.arrow 
	position:absolute;
	top:42%;
	width:5%;
	opacity: 0.7;
	transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   z-index:3;


.left-arrow 
	left:1%;


.right-arrow 
	right:1%;


.arrow:hover 
	opacity:1;
	cursor:pointer;


@media (max-width:886px) 
.slider-container 
	max-width:none;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>


<body>


<div id="content">
		
        
        
        
        <div class="portfolio-item" id="woll">
            
     		<div class="slider-container">
					<div class="slider"></div>
                    
            			<img class="arrow left-arrow" src="http://authenticid.co/img/leftarrow.png" />
        				<img class="arrow right-arrow" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" />
                        
    				<ul class="slides">
    
    					<li class="slide img-1"><img src="https://ryanachtman.files.wordpress.com/2014/01/wollwoll-brainstorm.jpg?w=986&h=632&crop=1"></li>
        				<li class="slide img-2"><img src="https://ryanachtman.files.wordpress.com/2014/01/wollwoll-spread.png?w=521&h=658&crop=1"></li>
        				<li class="slide img-3"><img src="https://ryanachtman.files.wordpress.com/2014/01/wollwoll_empowerment-email.png?w=461&h=658&crop=1"></li>
    
    				</ul>

        	</div>
            
    	</div>
        
        
                
        
        <div class="portfolio-item" id="jennyandshawn">
            
     		<div class="slider-container">
					<div class="slider"></div>
                    
                    <img class="arrow left-arrow" src="http://authenticid.co/img/leftarrow.png">
        			<img class="arrow right-arrow" src="http://www.clker.com/cliparts/9/N/a/Q/C/n/white-arrow-right-md.png">      
    
    				<ul class="slides">
    
    					<li class="img-1 slide"><img src="https://ryanachtman.files.wordpress.com/2014/09/jenny_shawn-wedding_small_1.jpg?w=1000&h=&crop=1"></li>
        				<li class="img-2 slide"><img src="https://ryanachtman.files.wordpress.com/2014/09/jenny_shawn-save-the-date.jpg?w=1000&h=&crop=1"></li>
        				<li class="img-3 slide"><img src="https://ryanachtman.files.wordpress.com/2014/09/jenny_shawn-table-number.jpg?w=1000&h=&crop=1"></li>
        				<li class="img-4 slide"><img src="Jenny&Shawn/138.jpg"></li>
                        <li class="img-5 slide"><img src="https://ryanachtman.files.wordpress.com/2014/06/138_21.jpg?w=1000&h=&crop=1"></li>
    
    				</ul>
     
        	</div>
            
    	</div>
        
        
        
        
</div>



<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="slider.js"></script>

</body>

</html>

【问题讨论】：

【参考方案1】：

我认为你应该把你在哪里使用这样的 jquery 上下文化

var currentContext = $(this).closest('.slider-container');

因为现在，当你这样做时： var currentSlide=$('.active-slide');实际上，这会选择两个活动的滑块，而您只想激活您单击的那个。

var main = function()
	
	$('.slide:first-child').fadeIn(600).addClass('active-slide');
    
	//right arrow!
	
    $('.portfolio-item .right-arrow').click( function()
        // this saves context
        var currentContext = $(this).closest('.slider-container');
        // this select active-slide of the context
        var currentSlide= currentContext.find('.active-slide');
        
        //var currentSlide=$('.active-slide');
        var nextSlide=currentSlide.next();
        
        if(nextSlide.length === 0) 
            //nextSlide=$('.slide:first-child');
            // this selects the next slide of the context
            nextSlide= currentContext.find('.slide:first-child');
        
        
        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');
        
    );
    
	//left arrow!
	
    $('.portfolio-item .left-arrow').click( function()
        // this saves context
        var currentContext = $(this).closest('.slider-container');
        // this selects the current active slide of the context
        var currentSlide= currentContext.find('.active-slide');
        
        //var currentSlide=$('.active-slide');
        var prevSlide = currentSlide.prev();
        
        if(prevSlide.length === 0) 
           //prevSlide=$('.slide:last-child');
           // this selects the previous slide of the context
           prevSlide= currentContext.find('.slide:last-child');
        
        
        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
	);


$(document).ready(main);
@charset "UTF-8";
/* CSS Document */

.slider-container 
	display: block;
	position:relative;
	width: 100%;
	max-width:600px;
	background-color: black;
	margin: 0% 0% 1% 0%;
	overflow:hidden;
	float:left;


.slider 
	position:relative;
	padding-top: 45%;
	z-index:0;


ul.slides 
	z-index:1;
	list-style-type:disc;
	display:block;
	position:absolute;
	padding:0;
	margin:0;
	top:0;
	left:0;
	width:100%;
	height:100%;


.active-slide 
	display:block;
	margin:0 auto;


.slide 
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   overflow:hidden;


.slide img
	margin:0;
	position:absolute;
	width:100%;
	z-index:2;
	left:0;


.arrow 
	position:absolute;
	top:42%;
	width:5%;
	opacity: 0.7;
	transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   z-index:3;


.left-arrow 
	left:1%;


.right-arrow 
	right:1%;


.arrow:hover 
	opacity:1;
	cursor:pointer;


@media (max-width:886px) 
.slider-container 
	max-width:none;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>
<body>

<div id="content">
        <div class="portfolio-item" id="woll">
     		<div class="slider-container">
					<div class="slider"></div>
            			<img class="arrow left-arrow" src="http://authenticid.co/img/leftarrow.png" />
        				<img class="arrow right-arrow" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" />
    				<ul class="slides">
    					<li class="slide img-1"><img src="https://ryanachtman.files.wordpress.com/2014/01/wollwoll-brainstorm.jpg?w=986&h=632&crop=1"></li>
        				<li class="slide img-2"><img src="https://ryanachtman.files.wordpress.com/2014/01/wollwoll-spread.png?w=521&h=658&crop=1"></li>
        				<li class="slide img-3"><img src="https://ryanachtman.files.wordpress.com/2014/01/wollwoll_empowerment-email.png?w=461&h=658&crop=1"></li>
    				</ul>
        	</div>
    	</div>
        
        <div class="portfolio-item" id="jennyandshawn">
     		<div class="slider-container">
					<div class="slider"></div>
                    <img class="arrow left-arrow" src="http://authenticid.co/img/leftarrow.png">
        			<img class="arrow right-arrow" src="http://www.clker.com/cliparts/9/N/a/Q/C/n/white-arrow-right-md.png">      
    
    				<ul class="slides">
    					<li class="img-1 slide"><img src="https://ryanachtman.files.wordpress.com/2014/09/jenny_shawn-wedding_small_1.jpg?w=1000&h=&crop=1"></li>
        				<li class="img-2 slide"><img src="https://ryanachtman.files.wordpress.com/2014/09/jenny_shawn-save-the-date.jpg?w=1000&h=&crop=1"></li>
        				<li class="img-3 slide"><img src="https://ryanachtman.files.wordpress.com/2014/09/jenny_shawn-table-number.jpg?w=1000&h=&crop=1"></li>
        				<li class="img-4 slide"><img src="Jenny&Shawn/138.jpg"></li>
                        <li class="img-5 slide"><img src="https://ryanachtman.files.wordpress.com/2014/06/138_21.jpg?w=1000&h=&crop=1"></li>
    				</ul>
        	</div>
    	</div>
</div>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="slider.js"></script>

</body>

</html>

【讨论】：

以上是关于一个页面上的多个滑块：如何使箭头针对一组特定的幻灯片？的主要内容，如果未能解决你的问题，请参考以下文章

光滑的滑块箭头在响应模式下表现得像幻灯片

如何使滑块图像更暗？

猫头鹰旋转木马2 - 如何在幻灯片放映之外获得左箭头和右箭头？

在多个滑块元素上捕获鼠标悬停

Slick Slider - 在多个滑块上显示计数器

当用户将鼠标悬停在滑块上时，使光标成为手