4

私は Flexslider v2.0 を使用しており、スライドショーのすぐ下に配置される独自のカスタム ナビゲーション矢印を作成しようとしています。

私が読んでいることから、独自のスライダー ナビゲーションを作成し、Flexslider の「controlsContainer」および「manualControls」コントロールを利用する必要があります。

これまでのところ、新しいカスタム矢印を 1 ステップだけ前進または 1 ステップ後退させることしかできませんでした。組み込みのナビゲーション矢印のようにナビゲートできません。

コードは次のとおりです。

CSS

.flex-direction-nav2 {  }
.flex-direction-nav2 a {width:30px; height:30px; margin:-20px 0 0; display:block; background:url(../images/flexslider/bg_direction_nav.png) no-repeat 0 0; z-index:10; cursor:pointer; text-indent:-9999px; -webkit-transition:all .3s ease }
.flex-direction-nav2 .flex-next {  display:inline-block;background:url(../images/shortcodes/testimonials/arrow-right-01.png) no-repeat 50%; background-color:#000; right:-1px; z-index:6}
.flex-direction-nav2 .flex-prev {  display:inline-block;background:url(../images/shortcodes/testimonials/arrow-left-01.png) no-repeat 50%; background-color:#fff; right:25px; -webkit-box-shadow:3px 0 0 0 #fff; box-shadow:3px 0 0 0px #fff; z-index:5}

HTML

<div class="testimonial-container clearfix">
  <div class="title">
    <h3><span>What Client’s Say</span></h3>
  </div>
  <div class="testimonials clearfix">
    <ul class="slides">
      <li>
        <div class="testimonials-content">CONTENT</div>
      </li>
      <li>
        <div class="testimonials-content">CONTENT</div>
      </li>
      <li>
        <div class="testimonials-content">CONTENT</div>
      </li>
    </ul>
  </div>
  <ul class="flex-direction-nav2">
    <li><a href="#" class="flex-prev">Prev</a></li>
    <li><a href="#" class="flex-next">Next</a></li>
  </ul>
</div>

jQuery

/* Testimonial Slider */
$('.testimonials').flexslider({
    animation: "slide",
    directionNav: true,
    controlNav: true,
    animationLoop: true,
    pauseOnAction: true,
    pauseOnHover: true,
    nextText: "Next",
    prevText: "Previous",
    controlsContainer: ".testimonial-container",
    manualControls: ".flex-direction-nav2 li a"
});

どんな助けでも大歓迎です。

ありがとう

4

3 に答える 3

1

Or you could try to trigger navigation behaviours like explained here

(Or you could switch to slick :) )

于 2015-08-04T08:50:11.413 に答える
1

コントロールをカスタマイズする場合、ソースにコントロールを手動で追加する必要はありません。「controlsContainer」を「.testimonials」に変更すると、そのコンテナー内にスライド リストの直後に「ul」が作成されます。その後、必要に応じてスタイルを設定できます。ND.edu や、provost.nd.edu や Dailydomer.nd.edu などの他のサイトでは、スライダーの下にカスタム スタイルの矢印があります。目的を達成するには、「.testimonials」を余分な div で囲み、controlsContainer をそれに設定する必要がある場合があります。

于 2013-03-03T01:10:50.587 に答える