3

私は Bxslider を使用しています: Bxsliderで、スライダーを動かして特定のアイテム (画像) を表示する方法があるかどうかを調べています。2 つのスライダーが上下にあり、ここにコードがあります。使用:

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

どうすればそれができますか？

4

2 に答える 2

1

スライドを列挙してから、goToSlide 関数を使用するだけです。0 で列挙を開始したことを確認してください。これは実際の例です。

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;
});
于 2016-02-29T19:13:06.097 に答える