Question

我正在玩Flexslider 2的CSS和Javascript，我无法弄清楚如何仅为幻灯片放映的初始幻灯片隐藏“上一页”箭头。我想在幻灯片的剩余部分重新出现。

真心感谢任何帮助。

案例

Answer 1

我喜欢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>

祝你好运！

Answer 2

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

这看起来只有在您设置此参数时才有效：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;
}

Answer 3

这样就可以了解

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

Answer 4

 $('.flexslider').flexslider({
                animation: 'fade',
                controlsContainer: '.flexslider',
                controlNav: false,
                directionNav:false
            });

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

Answer 5

添加一些条件语句，将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;}

Answer 6

您可以在javascript文件中插入此代码： $（'你的.class或#id'）。flexslider（{ controlNav：是的 }）;

Flexslider 2：如何为我的初始幻灯片隐藏direction-nav“prev”箭头？

6 个答案: