flexslider與中心當前圖像

是試圖建立一個Flexslider轉盤 - 這有多個圖片，但當前圖像居中，下/上一個圖像兩側會關閉屏幕 - 喜歡這個網站 http://www.ncad.ie/flexslider與中心當前圖像

到目前爲止，我已經有一個單一的形象得到了它： http://jsfiddle.net/Y3kx5/

Lookign各地的其他問題，此人聲稱解決這個問題，但我不能得到它的工作： FlexSlider: Center current image

已經嘗試過其他flexslider JS如：

$('.flexslider').flexslider({ 
animation: "slide", 
controlNav: false, 
itemWidth: 800, 
minItems: 3, 
maxItems: 3 
});

但3個屏幕圖像 - 而我只想要當前要與下一個/上只顯示儘可能多的窗口可以完全在屏幕上。

在此先感謝。本。

來源

2013-08-20 topiman

您可以添加一些CSS規則來更改滑塊的方面並將導航器移動到滑塊圖像邊界之外。

代碼：

.content { 
    background: #f2f2f2; 
    max-width: 800px; 
    display: block; 
    margin: 0 auto 
} 
.flex-direction-nav .flex-next { 
    right: 0 !important; 
    margin-right: -30px; 
    opacity: 1 !important; 
} 
.flex-direction-nav .flex-prev { 
    left: 0 !important; 
    opacity: 1 !important; 
    margin-left: -30px; 
} 
.flexslider { 
    width: 90%; 
    margin: 0 auto; 
}

演示：http://jsfiddle.net/IrvinDominin/899SD/

來源

2013-08-20 18:28:45

嗨 - 感謝您的回答 - 但我之後是在當前圖像旁邊有下一個/ prev圖像（不是箭頭），但只顯示屏幕上有空間 - 如：http： //www.ncad.ie/ – topiman

我不知道是否可以使用這個插件，我會看看。最終你可以轉移到另一個插件？ –

可能會移動到另一個，但Flexslider是刷卡/響應大小等方面最好的，並有一個Drupal模塊。在一個解決方案方面，Flexslider的作者在這裏提到了一個我嘗試過的方法，它的工作原理除了它會創建水平滾動：https://github.com/woothemes/FlexSlider/issues/212 – topiman

其實剛剛解決了它:-)

這裏的最後一塊： http://jsfiddle.net/Y3kx5/2/

與CSS完成：

.container {overflow: hidden; width: 100%} 
.flexslider {max-width: 800px; width: 800px; margin: 0 auto} 
.content {background: #f2f2f2; max-width: 800px; display: block; margin: 0 auto} 
.flex-viewport {overflow: visible !important}

來源

2013-08-21 09:52:28 topiman

感謝分享topiman – FatalMojo

flexslider與中心當前圖像

回答

相關問題