logo标签列表

创建自定义 Flexslider 导航箭头的问题

jquerynavigationcontrolsflexslider
4
我正在使用Flexslider v2.0，并尝试创建自己的自定义导航箭头，这些箭头将直接位于幻灯片下方。
根据我所阅读的内容，我需要创建自己的滑块导航并利用Flexslider的“controlsContainer”和“manualControls”控件。
到目前为止，我只成功地让新的自定义箭头向前或向后导航一步。我无法像内置导航箭头一样进行导航。
以下是代码：
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"
});

任何帮助都将不胜感激。
谢谢。
3个回答
1

或者您可以尝试触发导航行为，就像这里所解释的那样

(或者您可以转换到slick :) )

1
如果您想自定义控件，您不必在源代码中手动添加控件。如果将“controlsContainer”更改为“.testimonials”，则会在幻灯片列表后立即创建“ul”以位于该容器内。然后，您可以根据需要自定义样式。我们在ND.edu和其他一些网站（例如provost.nd.edu和dailydomer.nd.edu）上有自定义样式的箭头，它们坐落在滑块下面。为了实现您想要的效果，您可能需要在“.testimonials”周围包装一个额外的div，并将控件容器设置为该div。
嗨Erik，非常感谢您的回复。我在“testimonials”周围包裹了一个额外的div，我将其称为"<div class="test">"。然后我删除了我添加的手动控件，但保留了控件的容器。"<div class="flex-direction-nav2"></div>"。现在发生的情况是原始导航点重新出现了。我还将ControlsContainer更改为“.testimonials”。 - Jason
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接