CODEWITHSUNDEEP
javascriptjquerybxslider
OussamaLord
OussamaLord

Reputation: 1095

Bxslider How to move the slider to a specific image (item)

I'm using the Bxslider : Bxslider and I'm looking to see if there is a way to move my slider to show a specific item (an image), I have 2 sliders one below the other, here is the code I'm using :

$(document).ready(function(){
      slider = $('.bxslider').bxSlider({
          pager: false,
          speed: 1500,
          captions: true,
          minSlides: 3,
          maxSlides: 12,
          slideWidth: 480,
          slideMargin: 0
      });
    $('.bxslider2').bxSlider({
      pager: false,
      controls: false,
      minSlides: 3,
      maxSlides: 12,
      slideWidth: 115,
      slideMargin: 0
    });
$(".secondSlider").mouseover(function(){
        /* I want to move the first slider to show the image that is hovered on the second slider*/
         slider.(move slider one to the hovered image on the second slider) // Here is the line I want to fix.
    });
});


<ul class="bxslider">
    <li><img src="img/picture1.jpg" /></li>
    <li><img src="img/picture2.jpg" /></li>
    <li><img src="img/picture3.jpg" /></li>
    <li><img src="img/picture4.jpg" /></li>
    <li><img src="img/picture5.jpg" /></li>          
</ul>
<ul class="bxslider2">
    <li><img class="secondSlider" src="img/picture1.jpg" /></li>
    <li><img class="secondSlider" src="img/picture2.jpg" /></li>
    <li><img class="secondSlider" src="img/picture3.jpg" /></li>
    <li><img class="secondSlider" src="img/picture4.jpg" /></li>
    <li><img class="secondSlider" src="img/picture5.jpg" /></li>     
</ul>

How can I do that please ?

Upvotes: 3

Views: 10020

Answers (2)

Alfred Landik
Alfred Landik

Reputation: 500

You just need to enumerate your slides and then use goToSlide function. Please, be sure you started enumeration with 0. This is working example:

HTML

<ul class="gallery">
  <li>
     <a class="slider-move" href="#" data-number="0">
       <img src="/uploads/0/1810-008.jpg">
     </a>
  </li>
  <li>
     <a class="slider-move" href="#" data-number="1">
       <img src="/uploads/0/1812-VDS_3236-600x399.jpg">
     </a>
  </li>
</ul>

Javascript

gallerySlider = $('.gallery').bxSlider();

$('.slider-move').click(function(e){
    e.preventDefault();
    var number = $(this).data('number');
    gallerySlider.goToSlide(number);
    return false;
});

Upvotes: 1

hotohoto
hotohoto

Reputation: 487

Maybe your're looking for this one.

goToSlide() Performs a slide transition to the supplied slide index (zero-based)

example:

slider = $('.bxslider').bxSlider();
slider.goToSlide(3);

Upvotes: 4

Related Questions