[英]How to make hero slider go to a specific slide
我在我的項目中使用Hero Slider ,我想定義一個像gotoSlideN(n)
這樣的函數來轉到第 n 張幻燈片。
var gotoSlideN = function (n) {
$(".cd-hero-slider .selected").removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
$(".cd-hero-slider .selected").removeClass('is-moving');
});
var selectedPosition = n,
activePosition = $('.cd-hero-slider .selected').index();
if (activePosition < selectedPosition) {
$(".cd-hero-slider").children('li').eq(n).addClass('selected from-left').nextAll().addClass('move-left');
} else {
$(".cd-hero-slider").children('li').eq(n).addClass('selected from-left').prevAll().addClass('move-right');
}
};
上面的代碼有效,但是當我嘗試查看之前的幻燈片時出現了一些問題。 例如,當我調用gotoSlideN(3)
,當所選幻燈片為 4 號時,第 4 張幻燈片將隱藏,但第 3 張幻燈片不顯示。
gotoSlideN(5); //working
gotoSlideN(4); //working
gotoSlideN(5); //not working truly
我找到了我的問題的答案
enter code herevar gotoSlideN = function (n) {var selectedPosition = n,
activePosition = $('.cd-hero-slider .selected').index();
if (activePosition < selectedPosition) {
$(".cd-hero-slider .selected").removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
$(".cd-hero-slider .selected").removeClass('is-moving');
});
$(".cd-hero-slider").children('li').eq(n).addClass('selected from-left').nextAll().addClass('move-left');
}
else {
$(".cd-hero-slider .selected").removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
$(".cd-hero-slider .selected").removeClass('is-moving');
});
$(".cd-hero-slider").children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
// container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left'); } };
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.