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

Posted 2023-02-22

【中文标题】创建自定义 Flexslider 导航箭头的问题

【英文标题】：Issues creating custom Flexslider navigational arrows

【发布时间】：2013-02-17 08:10:30

【问题描述】：

我正在使用 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"
);

任何帮助将不胜感激。

谢谢

【参考方案1】：

如果您想自定义控件，则无需在源中手动添加控件。如果您将“controlsContainer”更改为“.testimonials”，它将在该容器内紧跟幻灯片列表创建“ul”。然后，您可以根据需要设置样式。我们在 ND.edu 和其他网站（例如 provost.nd.edu 和 dailydomer.nd.edu）上有自定义样式的箭头，它们位于滑块下方。要完成您所追求的，您可能需要在“.testimonials”周围包裹一个额外的 div 并将您的 controlsContainer 设置为它。

【讨论】：

您好 Erik，非常感谢您的回复。我在“推荐”周围加上了一个额外的 div。我称它为“”。然后我删除了我添加的手动控件。我把容器留给了控件。 “”。现在会发生什么，原来的导航点重新出现。我还将 ControlsContainer 更改为“.testimonials”。

【参考方案2】：

或者您可以尝试触发导航行为，如解释 here

（或者你可以切换到slick :)）

【参考方案3】：

flexslider 在他们的 JS 插件中生成导航控件并使用他们样式表中的 css。在恕我直言，您需要覆盖样式表并更改插件以使用您定义的导航控件。我已经使用 flexslider 2 在 sharepoint 旋转横幅中完成了此操作。你可以看看https://logicalforhad.wordpress.com/2014/11/18/sharepoint-rotating-banner-with-custom-pagination-control-using-font-awesome/ 一切都在这里解释清楚。