Question

问题：

我在主页面上使用bxSlider作为主要内容。每张幻灯片我都有bxSlider个12 img。然后我为每张幻灯片提供了12块html代码。使用jQuery我正在使用bxSlider和onSlidePrev回调将内容与onSlideNext一起更改。一切都运行正常，但问题是当我点击幻灯片的链接。我有一个主菜单，转到选定的幻灯片，也有“寻呼机”，当我点击这些东西时，内容不会根据回调而改变。

我正在调用bxSlider：

var slider = $('.bxslider').bxSlider({
            adaptiveHeight:false,
            infiniteLoop: false,
            onSlideNext: function ($slideElement, oldIndex, newIndex) {
                switch(newIndex){
                    case 0:
                    $(".pag2, .pag3, .pag4, .pag5, .pag6, .pag7, .pag8, .pag9, .pag10, .pag11, .pag12").hide(); 
                            $(".pag1").show();
                                break;

                                case 1:
                    $(".pag1, .pag3, .pag4, .pag5, .pag6, .pag7, .pag8, .pag9, .pag10, .pag11, .pag12").hide(); 
                                $(".pag2").show();
                                break;
                }           
            },
            onSlidePrev: function ($slideElement, oldIndex, newIndex) {
                switch(newIndex){
                    case 0:
                    $(".pag2, .pag3, .pag4, .pag5, .pag6, .pag7, .pag8, .pag9, .pag10, .pag11, .pag12").hide(); 
                            $(".pag1").show();
                                break;

                                case 1:
                    $(".pag1, .pag3, .pag4, .pag5, .pag6, .pag7, .pag8, .pag9, .pag10, .pag11, .pag12").hide(); 
                                $(".pag2").show();
                                break;
                      } 
            }
        });

HTML代码是这样的：

<section class="pag1 section-height">
    <h2 class="slideTitle">Title</h2>
    <h3 class="slideText">"Text</h3>
</section>

 <section class="pag2 section-height">
    <h2 class="slideTitle">Title</h2>
    <h3 class="slideText">"Text</h3>
</section>

向：

我怎样才能让它发挥作用？我需要在另一页中链接这些幻灯片。

Answer 1

我用这个解决了我的问题：

if(window.location == 'mysite.com/#about') {
    slider.goToSlide(8); // Go to slide number 8 that is "About" slide.
}

所以...在我的page.html上，当页面加载bxSlider转到幻灯片8时，我有href="mysite.com/#about"的链接。

Answer 2

您可以使用data属性。福克斯的例子：

<ul class="bxslider"> <li data-id="welcome">some content</li> <li data-id="about">some content</li> <li data-id="contact">some content</li> </ul>

的jQuery

hash = window.location.hash; if(hash) { startAt = $('.bxslider li[data-id="' + hash.replace('#', '') + '"]').index(); } $('.bxslider').bxSlider({ adaptiveHeight:false, infiniteLoop: false, startSlide: startAt?startAt:0 });

那一切。

希望这个帮助

链接到bxSlider Slide

问题：

向：

2 个答案: