我正在使用 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"
});
任何帮助将不胜感激。
谢谢