当滑块开始更改项目时添加寻呼机活动 class
add pager active class when slider starts changing items
我找到了this fiddle
这与我的任务非常相似,只是有一个问题,您现在如何看到第一个项目已激活 class 但是当滑块自动启动时,激活的 class 不会添加到下一个或上一个项目,只有当您单击每个左侧项目时,在这种情况下它才会收到活动 class。所以我想在滑块自动旋转时向每个当前项目添加 active class。
$(function() {
var slider = $('#banner-slider').bxSlider({
controls: true,
mode: 'vertical',
auto: true,
pager:true
});
$('.banner-pager a').click(function() {
var thumbIndex = $('..banner-pager a').index(this);
slider.goToSlide(thumbIndex);
$('.banner-pager a').removeClass('pager-active');
$(this).addClass('pager-active');
return false;
});
$('.banner-pager a:first').addClass('pager-active');
});
如果你可以升级到更新版本的 bxslider,那么你可以使用像
这样的回调
$(function() {
$(function() {
var $as = $('.banner-pager a');
// assign the slider to a variable
var slider = $('#banner-slider').bxSlider({
controls: true,
mode: 'vertical',
auto: true,
pager: true,
onSlideAfter: function($el, pidx, idx) {
$as.eq(pidx).removeClass('pager-active');
$as.eq(idx).addClass('pager-active');
}
});
$as.click(function() {
var thumbIndex = $as.index(this);
slider.goToSlide(thumbIndex);
return false;
});
// assign "pager-active" class to the first thumb
$('.banner-pager a:first').addClass('pager-active');
});
});
#banner {
height: 294px;
width: 100%;
position: relative;
background: #e5e5e5;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
overflow: hidden;
}
.banner-nav {
max-width: 260px;
width: auto;
height: 294px;
float: left;
position: relative;
background: #cccccc;
position: absolute;
}
.banner-pager a {
width: 220px;
display: block;
float: left;
height: 18px;
padding: 12px 20px;
color: #111;
text-decoration: none;
}
.banner-pager a.pager-active,
.banner-pager a:hover {
background: #e5e5e5;
text-decoration: underline;
}
.banner-wrap {
float: left;
height: 294px;
padding-left: 260px;
}
.banner-slide {
height: 294px;
width: 720px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>
<div id="banner">
<div class="banner-nav">
<div class="banner-pager">
<a href="">Dubery Wotsit</a>
<a href="">Laterz on a'menjey</a>
<a href="">Joben</a>
<a href="">Tukka Tukka</a>
<a href="">Horse Hair Duvet</a>
<a href="">FML</a>
<a href="">Balls Deep</a>
</div>
</div>
<div class="banner-wrap">
<ul id="banner-slider">
<li style="background: #FF0000;">
<div class="banner-slide">Dubery Wotsit</div>
</li>
<li style="background: #FF8000;">
<div class="banner-slide">Laterz on a'menjey</div>
</li>
<li style="background: #FFFF00;">
<div class="banner-slide">Joben</div>
</li>
<li style="background: #80FF00;">
<div class="banner-slide">Tukka Tukka</div>
</li>
<li style="background: #00FF00;">
<div class="banner-slide">Horse Hair Duvet</div>
</li>
<li style="background: #00FF80;">
<div class="banner-slide">FML</div>
</li>
<li style="background: #00FFFF;">
<div class="banner-slide">Balls Deep</div>
</li>
</ul>
</div>
</div>
我找到了this fiddle
这与我的任务非常相似,只是有一个问题,您现在如何看到第一个项目已激活 class 但是当滑块自动启动时,激活的 class 不会添加到下一个或上一个项目,只有当您单击每个左侧项目时,在这种情况下它才会收到活动 class。所以我想在滑块自动旋转时向每个当前项目添加 active class。
$(function() {
var slider = $('#banner-slider').bxSlider({
controls: true,
mode: 'vertical',
auto: true,
pager:true
});
$('.banner-pager a').click(function() {
var thumbIndex = $('..banner-pager a').index(this);
slider.goToSlide(thumbIndex);
$('.banner-pager a').removeClass('pager-active');
$(this).addClass('pager-active');
return false;
});
$('.banner-pager a:first').addClass('pager-active');
});
如果你可以升级到更新版本的 bxslider,那么你可以使用像
这样的回调$(function() {
$(function() {
var $as = $('.banner-pager a');
// assign the slider to a variable
var slider = $('#banner-slider').bxSlider({
controls: true,
mode: 'vertical',
auto: true,
pager: true,
onSlideAfter: function($el, pidx, idx) {
$as.eq(pidx).removeClass('pager-active');
$as.eq(idx).addClass('pager-active');
}
});
$as.click(function() {
var thumbIndex = $as.index(this);
slider.goToSlide(thumbIndex);
return false;
});
// assign "pager-active" class to the first thumb
$('.banner-pager a:first').addClass('pager-active');
});
});
#banner {
height: 294px;
width: 100%;
position: relative;
background: #e5e5e5;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
overflow: hidden;
}
.banner-nav {
max-width: 260px;
width: auto;
height: 294px;
float: left;
position: relative;
background: #cccccc;
position: absolute;
}
.banner-pager a {
width: 220px;
display: block;
float: left;
height: 18px;
padding: 12px 20px;
color: #111;
text-decoration: none;
}
.banner-pager a.pager-active,
.banner-pager a:hover {
background: #e5e5e5;
text-decoration: underline;
}
.banner-wrap {
float: left;
height: 294px;
padding-left: 260px;
}
.banner-slide {
height: 294px;
width: 720px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>
<div id="banner">
<div class="banner-nav">
<div class="banner-pager">
<a href="">Dubery Wotsit</a>
<a href="">Laterz on a'menjey</a>
<a href="">Joben</a>
<a href="">Tukka Tukka</a>
<a href="">Horse Hair Duvet</a>
<a href="">FML</a>
<a href="">Balls Deep</a>
</div>
</div>
<div class="banner-wrap">
<ul id="banner-slider">
<li style="background: #FF0000;">
<div class="banner-slide">Dubery Wotsit</div>
</li>
<li style="background: #FF8000;">
<div class="banner-slide">Laterz on a'menjey</div>
</li>
<li style="background: #FFFF00;">
<div class="banner-slide">Joben</div>
</li>
<li style="background: #80FF00;">
<div class="banner-slide">Tukka Tukka</div>
</li>
<li style="background: #00FF00;">
<div class="banner-slide">Horse Hair Duvet</div>
</li>
<li style="background: #00FF80;">
<div class="banner-slide">FML</div>
</li>
<li style="background: #00FFFF;">
<div class="banner-slide">Balls Deep</div>
</li>
</ul>
</div>
</div>