Flexslider 2：如何隱藏我的初始幻燈片的方向導航「上一頁」箭頭？

我正在玩Flexslider 2的CSS和Javascript，並且我無法弄清楚如何隱藏「prev」箭頭只顯示幻燈片的初始幻燈片。我希望它能重新出現在幻燈片的其餘部分。Flexslider 2：如何隱藏我的初始幻燈片的方向導航「上一頁」箭頭？

任何幫助，真誠讚賞。

案例

來源

2012-11-17 user1832527

你有沒有想出解決辦法？我在同一條船 – ekkis

Flexslider增加了一個類的'flex-disabled'到在到達幻燈片/轉盤的開始或結束對應的導航元素。

看起來像這樣，只有當你設置這個參數：animationLoop: false。

你可以使用這個類來隱藏'prev'箭頭（或'next'箭頭）。

.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-05 17:40:07 mattisahuman

添加一些條件語句，將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-08 15:59:01 James

我喜歡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-30 22:33:59 blackhawk

非常感謝！ –

不客氣的約翰！ – blackhawk

這將這樣的伎倆

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

來源

2014-08-19 09:26:57 TodStoychev

該問題只是爲了在第一張幻燈片上隱藏「prev」箭頭。這個CSS將隱藏每張幻燈片的箭頭。 – jpcamara

你可以在你的JavaScript文件中插入此代碼： $（ '你的.class或#ID'）flexslider（{ controlNav：真 }）;

來源

2015-09-17 19:04:06

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

這是解決方案，加上directionNav：假

來源

2018-02-23 17:07:56

Flexslider 2：如何隱藏我的初始幻燈片的方向導航「上一頁」箭頭？

回答

相關問題