6

1つのプロジェクトにFlexスライドrを使用しています。同じコントロールで1ページの2つのスライダーを制御する必要があります。

1つは画像を表示するメインスライダーで、もう1つはテキストです（この場合、WPの「the_excerpt」から取得されます）。

基本的に、これは1ページで2つのスライドを呼び出すために使用しているコードです。

  $(window).load(function() {
    $('#main-slider').flexslider({
      animation: 'slide',
      controlsContainer: '.flex-container'
    });

    $('#secondary-slider').flexslider();
  });

次に、両方を同じコントロールに「接続」する必要があるため、矢印をクリックすると、両方がスライド/フェードします。

4

5 に答える 5

9

ControlsContainer設定を破棄し、両方のスライダーにリンクする独自のナビゲーションを作成することで、実行しようとしていることを実行できます。これがその方法のアイデアです（テストされていないことに注意してください）

マークアップは次のようになります。リンクのrel属性に注意してください。以下で使用します。また、値は0から始まることに注意してください。これはスライドの値と一致します（たとえば、最初のスライドは0、2番目のスライドは1など）。

<a rel="0" class="slide_thumb" href="#">slide link 1</a>
<a rel="1" class="slide_thumb" href="#">slide link 2</a>
<a rel="2" class="slide_thumb" href="#">slide link 3</a>
<a rel="3" class="slide_thumb" href="#">slide link 3</a>

<div id="main-slider" class="flexslider">
<ul class="slides">
    <li>
        <img src="image1.jpg" />
    </li>
    <li>
        <img src="image2.jpg" />
    </li>
    <li>
        <img src="image3.jpg" />
    </li>
    <li>
        <img src="image4.jpg" />
    </li>
</ul>
</div>

<div id="secondary-slider" class="flexslider">
<ul class="slides">
    <li>
        <p>Text 1</p>
    </li>
    <li>
        <p>Text 2</p>
    </li>
    <li>
        <p>Text 3</p>
    </li>
    <li>
        <p>Text 4</p>
    </li>
</ul>

次に、flexsliderへの呼び出しを設定します

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {

$('#main-slider').flexslider({
    animation: "slide",
    slideToStart: 0,
    start: function(slider) {
        $('a.slide_thumb').click(function() {
            $('.flexslider').show();
            var slideTo = $(this).attr("rel")//Grab rel value from link;
            var slideToInt = parseInt(slideTo)//Make sure that this value is an integer;
            if (slider.currentSlide != slideToInt) {
                slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want);
            }
        });
    }

});

$('#secondary-slider').flexslider({
    animation: "slide",
    slideToStart: 0,
    start: function(slider) {
        $('a.slide_thumb').click(function() {
            $('.flexslider').show();
            var slideTo = $(this).attr("rel")//Grab rel value from link;
            var slideToInt = parseInt(slideTo)//Make sure that this value is an integer;
            if (slider.currentSlide != slideToInt) {
                slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want);
            }
        });
    }

});

});
</script>

基本的に、両方のスライダーは同じナビゲーションリンクのセットによって制御されます。これで正しい方向に進むはずだと思いますが、何か説明が必要な場合は叫んでください。

于 2012-04-16T17:13:15.750 に答える
9

Flexslider 2の場合、sync: "selector"オプションを使用できます。スライダーの1つを設定するだけcontrolNav: falseです。

$(window).load(function() {
    $('#main-slider').flexslider({
        animation: 'slide',
        controlNav: true,
        sync: '#secondary-slider'
    });

    $('#secondary-slider').flexslider({
        controlNav: false
    });
});
于 2014-02-07T02:34:39.893 に答える
3

だから、私は同じ問題を抱えていて、それは本当のドラッグになる可能性があります...しかし、私はパイのように簡単な迅速な解決策に到達しました。これは、親フレックススライダーで制御される1人の子供または100人の子供に対して機能します。すべてのアクションで機能します。うまくいけば、これを修正し、そこに同期メソッド用のjqueryオブジェクトの配列を許可するように彼らに話しかけることができます。

<div id="main-slider" class="flexslider">
  <ul class="slides">
    <li><img src="image1.jpg" /></li>
    <li><img src="image2.jpg" /></li>
    <li><img src="image3.jpg" /></li>
    <li><img src="image4.jpg" /></li>
  </ul>
</div>

<div class="flexslider_children">
  <ul class="slides">
    <li><p>Text 1</p></li>
    <li><p>Text 2</p></li>
    <li><p>Text 3</p></li>
    <li><p>Text 4</p></li>
  </ul>
</div>

<div class="flexslider_children">
  <ul class="slides">
    <li><p>Text 1</p></li>
    <li><p>Text 2</p></li>
    <li><p>Text 3</p></li>
    <li><p>Text 4</p></li>
  </ul>
</div>

次に、JavaScriptに対してこれを実行します。

/** 
* Create the children flexsliders. Must be array of jquery objects with the
* flexslider data. Easiest way is to place selector group in a var.
*/
var children_slides = $('.flexslider_children').flexslider({
  'slideshow': false, // Remove the animations
  'controlNav' : false // Remove the controls
}); 

/** 
* Set up the main flexslider
*/
$('.flexslider').flexslider({
  'pauseOnHover' : true,
  'animationSpeed': 2000,
  'slideshowSpeed': 5000,
  'initDelay': 3000,
  // Call the update_children_slides which itterates through all children slides 
  'before' : function(slider){ // Hijack the flexslider
    update_children_slides(slider.animatingTo);
  }   
}); 

/** 
* Method that updates children slides
* fortunately, since all the children are not animating,
* they will only update if the main flexslider updates. 
*/
function update_children_slides (slide_number){
  // Iterate through the children slides but not past the max
  for (i=0;i<children_slides.length;i++) {
    // Run the animate method on the child slide
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number);
  }   
}

お役に立てれば！！これを追加したことに注意してください。これは、私がやろうとしていたことに非常に似ているためです。flexsliderで複数の同期を使用しようとしているのは私だけではないようです。

于 2012-08-20T21:12:45.370 に答える
0

MrBandersnatchのソリューションが機能することを確認したいと思います。彼の作品のバリエーションを示すために、彼のコードの変更を以下に投稿します。

/** 
* Create the children flexsliders. Must be array of jquery objects with the
* flexslider data. Easiest way is to place selector group in a var.
*/
var children_slides = $('.flexslider_children').flexslider({
    slideshow: false, // Remove the animations
    controlNav : false, // Remove the controls
    animationSpeed: 1200,
    itemWidth: 175,
    itemMargin: 20,
    animation: 'linear',
    easing: 'swing',
    animationLoop: false,
    minItems: getGridSize(), // use function to pull in initial value
    maxItems: getGridSize()
}); 


/** 
* Set up the main flexslider
*/
$('#flexslider_index_band_1').flexslider({
    pauseOnHover : true,
    animationSpeed: 1200,
    slideshow: false,
    initDelay: 3000,
    directionNav: true,
    animation: 'linear',
    easing: 'swing',
    animationLoop: false,
    controlsContainer: '.paginated_nav',
    directionNav: true,
    prevText: '',
    nextText: '',
    itemWidth: 175,
    itemMargin: 20,
    sync: '#flexslider_index_band_2',
    minItems: getGridSize(), // use function to pull in initial value
    maxItems: getGridSize(), // use function to pull in initial value
    // Call the update_children_slides which itterates through all children slides 
    before : function(slider){ // Hijack the flexslider
        update_children_slides(slider.animatingTo);
    }   
}); 

/** 
* Method that updates children slides
* fortunately, since all the children are not animating,
* they will only update if the main flexslider updates. 
*/
function update_children_slides (slide_number){
    // Iterate through the children slides but not past the max
    for (i=0;i<children_slides.length;i++) {
    // Run the animate method on the child slide
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number);
    }   
}

}）;

于 2013-08-18T07:39:57.353 に答える
0

私が見つけた解決策の1つは、独自のカスタムバナーナビゲーションを作成することでした。配置して、好きなようにスタイルを設定します。唯一の重要なことは、それをターゲットにする方法を持っていることです。この例では、slider-nextとslider-prevのIDを使用しました。

<ul>
  <li><a id="slider-next" href="#">Next</a></li>
  <li><a id="slider-prev" href="#">Prev</a></li>
</ul>

次に、2つのフレクサースライダーを作成し、CSSで好きなように配置します。メインバナーの.flexsliderとキャプションの.captionsにタイトルを付けます。

<div class="flexslider">
  <ul class="slides">
    <li><img src="/assets/images/banner-example.png" width="893" height="377"></li>
    <li><img src="/assets/images/banner-example-2.png" width="893" height="377" /></li>
    <li><img src="/assets/images/banner-example-3.png" width="893" height="377" /></li>
    <li><img src="/assets/images/banner-example-4.png" width="893" height="377" /></li>
  </ul>
</div>
<!-- Some other place in the code -->
<div class="captions">
  <ul id="info" class="slides">
    <li>
      <h2>Example Banner 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
    <li>
      <h2>Example Banner 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
    <li>
      <h2>Example Banner 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
    <li>
      <h2>Example Banner 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
  </ul>
</div>

さて、それを機能させるための単純な魔法について。javascriptファイルで両方のスライドをアクティブにし、cssでバナーとキャプションのナビゲーションコントロールを非表示にします。そうすれば、カスタムナビゲーションが表示される唯一のコントロールになります。次に、クリック時にスライダーとキャプションのコントロールナビゲーションの両方をトリガーする関数を作成します。以下の例。.trigger jQuery関数は、ここでウィザードを実行するものです。ここでそのドキュメントをチェックしてください：http：//api.jquery.com/trigger/

//Load slider after .ready()
$(window).load(function(){

    //Activate Both Banner and Caption slides
    $('.flexslider').flexslider({
        controlNav: false,
    });

    $('.captions').flexslider({
        controlNav: false,
    });

    //Sink Control Navs
    $('#slider-next').click(function(){
        $('.flexslider .flex-next').trigger('click');
        $('.captions .flex-next').trigger('click');
    });

    $('#slider-prev').click(function(){
        $('.flexslider .flex-prev').trigger('click');
        $('.captions .flex-prev').trigger('click');
    })
});
于 2014-08-20T18:41:28.127 に答える