bxslider: scroll to certain slider on page load

时间:2015-08-26 09:30:46

标签: bxslider

I have a slider of 40 slides with 13 current slides visible. I want to jump to a certain slide on page load. For example: page1 - load slide 1 first / page25 - load slide 25 first. Thanks All.

Thats my solution:

    // calculate starting slider
    var hActive = $('.h-active');
    var hIndex = hActive.index();
    var startingSlider;
    if (hIndex <= 12) {
        startingSlider = 0;
    } else if (hIndex >= 13 && hIndex <= 25) {
        startingSlider = 1;
    } else if (hIndex >= 26 && hIndex <= 38) {
        startingSlider = 2;
    } else {
        startingSlider = 3;
    }
    // h-slider animation
    $('.h-slide').mouseover(function() {
        $(this).addClass('h-active');
        $(this).siblings().removeClass('h-active');
    });
    $('.h-slide').mouseleave(function() {
        $(this).removeClass('h-active');
        hActive.addClass('h-active');
    });
    // h-slider call
    $('.h-slider').bxSlider({
        pager: false,
        controls: true,
        minSlides: 13,
        maxSlides: 13,
        slideWidth: 80,
        nextSelector: '#h-next',
        prevSelector: '#h-prev',
        nextText: '<i class="h-next"></i>',
        prevText: '<i class="h-prev"></i>',
        speed: 1000,
        infiniteLoop: false,
        startSlide: startingSlider
    });

2 个答案:

答案 0 :(得分:1)

var bx = $(".bxslider").bxSlider({
   startSlide: 24
});

答案 1 :(得分:1)

请参阅bxslider网站上的options页面。

文档说明我们可以在初始化时传递起始幻灯片编号

  

startSlide

     

启动幻灯片索引(从零开始)

     

默认: 0 选项:整数

由于您未在此处提及任何编程语言,我假设您可以在JS变量中获取页面编号,例如pagenum,可以在初始化bxslider之前为其分配值,如下所示:

var pagenum;
//set pagenum here
$('.bxslider').bxSlider({
  startSlide: pagenum?pagenum:0;
  captions: true
});