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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了创建自定义Flexslider导航箭头的问题相关的知识,希望对你有一定的参考价值。

我正在使用Flexslider v2.0,我正在尝试创建自己的自定义导航箭头,它将直接位于幻灯片下方。

根据我一直在阅读的内容,我必须创建自己的滑块导航并使用Flexslider“控件容器”和“手动控件”控件。

到目前为止,我只实现了新的自定义箭头向前导航或向后退一步。我不能让它像内置的导航箭头一样导航。

这是代码:

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"
});

任何帮助将不胜感激。

谢谢

答案

如果要自定义控件,则无需在源中手动添加控件。如果将“controlsContainer”更改为“.testimonials”,它将立即在幻灯片列表后面的容器内创建“ul”。然后你可以随心所欲地设计那些。我们在ND.edu上有自定义样式的箭头,以及位于滑块下方的其他站点,例如provost.nd.edu和dailydomer.nd.edu。要完成你所追求的目标,你可能需要在“.testimonials”周围包含一个额外的div,并将controlsContainer设置为。

另一答案

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

(或者你可以切换到slick :))

另一答案

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

以上是关于创建自定义Flexslider导航箭头的问题的主要内容,如果未能解决你的问题,请参考以下文章

Flexslider 箭头未正确显示

jQuery Flexslider 在 iphone 和 ipad 中不起作用

Flexslider 手动控制不起作用

React-Native 图像滑块框中的自定义导航箭头

Swift 自定义导航项

响应式导航栏隐藏其下方的元素