I'm using Hero Slider for my project, and I want to define a function like gotoSlideN(n)
to go to the nth slide.
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');
}
};
The code above works but it got some issues when I try to go previous slides. For example, when I call gotoSlideN(3)
, when the selected slide is number 4, the 4th slide goes hidden but the 3rd slide doesn't show.
gotoSlideN(5); //working
gotoSlideN(4); //working
gotoSlideN(5); //not working truly
I found the answer to my question
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'); } };
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.