Link to bxSlider Slide

Question

Problem:

I'm using bxSlider as main content on main page. I have bxSlider with 12 img for each slide. Then i have 12 blocks of html code for each slide. With jQuery i'm changing the content together with bxSlider using onSlidePrev and onSlideNext callbacks. Every thing works fine but the problem is when i click on links to the slides. I have a main menu with goes to selected slide, also have the "pager" and when i click on this things the content is not changing according callbacks.

I'm calling bxSlider like this:

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;
                      } 
            }
        });

The HTML Code is this:

<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>

Ask:

How can i get this to work? I need to link this slides in another page.

Answer 1

I resolve my problem using this:

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

So... on my pageb.html i have an link with href="mysite.com/#about" when page load bxSlider go to slide 8.

Answer 2

you can use data attributes. fox example:

<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 });

That all.

Hope this help