3

我正在玩弄 Flexslider 2 的 CSS 和 Javascript，但我不知道如何仅为幻灯片的初始幻灯片隐藏“上一个”箭头。我希望它在幻灯片的其余部分重新出现。

真诚感谢任何帮助。

案子

4

6 回答 6

6

我喜欢 flexslider，因为您可以在它的回调函数中编写自定义 jquery 逻辑。这是一个默认隐藏箭头的基本示例，然后单击（一个 jquery 方法），再次显示它们，所有这些都在 flexslider start() 回调函数中......

$('#carousel-home').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 170,
    itemMargin: 5,
    asNavFor: '#slider',
    start:function(slider){
        //HIDE THE ARROWS BY DEFAULT...
        $('#slider .flex-direction-nav').css({visibility:'hidden'});

        //THEN INSERT YOUR CUSTOM JQUERY CLICK ACTIONS TO REVEAL THEM AGAIN
        slider.find('a').on('click',function(){
        $('#slider .flex-direction-nav').css({visibility:'visible'});
        });
    }//end start function
});//end carousel

$('#slider').flexslider({
    slidshow: false,
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: true,
    sync: "#carousel-home"
});//end slider

这将与以下 HTML 一起使用...

<div id="carousel-home" class="flexslider">
  <ul class="slides ffastandards">
  <li><a href="#">Mission</a></li>
    <li><a href="#">Vision</a></li>
    <li><a href="#">Voice</a></li>
  </ul>
</div>
<hr>
<div id="slider" class="flexslider content-slider">
    <ul class="slides">
    <li>mission</li>
    <li>vision</li>
    <li>voice</li>
    </ul>
</div>

祝你好运！

于 2014-04-30T22:33:59.277 回答
5

'flex-disabled'Flexslider在到达幻灯片/轮播的开头或结尾时向相应的导航元素添加一个类。

看起来这仅在您设置此参数时才有效：animationLoop: false.

您可以使用此类隐藏“上一个”箭头（或“下一个”箭头）。

.flex-direction-nav a.flex-disabled {
   display:none;
}

或者，您可以设置不透明度以及 CSS 过渡以使其淡入/淡出。

.flex-direction-nav a {
   opacity: 1;
   transition: opacity .3s;
   -moz-transition: opacity .3s;
   -webkit-transition: opacity .3s;
}

.flex-direction-nav a.flex-disabled {
   opacity: 0;
}
于 2012-12-05T17:40:07.717 回答
2

这会成功的 

.flex-direction-nav a.flex-next, 
.flex-direction-nav a.flex-prev{
    display:none;
}
于 2014-08-19T09:26:57.380 回答
2 
 $('.flexslider').flexslider({
                animation: 'fade',
                controlsContainer: '.flexslider',
                controlNav: false,
                directionNav:false
            });

这是解决方案，添加directionNav:false

于 2018-02-23T17:07:56.973 回答
0

添加一些条件语句，将 ie8 添加到您的页面 html 标记中。然后将其添加到样式表

html.ie8 .flex-direction-nav .flex-prev, html.ie8 .flex-direction-nav .flex-next {display:none;}

html.ie8 #flexslider_hg_homepage_wrapper:hover .flex-direction-nav .flex-prev,
html.ie8 #flexslider_hg_homepage_wrapper:hover .flex-direction-nav .flex-next {display:block;}
于 2013-08-08T15:59:01.883 回答
0

您可以将此代码插入到您的 javascript 文件中： $('your .class or #id').flexslider({ controlNav: true });

于 2015-09-17T19:04:06.007 回答