重新定位Nivo Slider插件中的一張圖片

我對web開發和jQuery相當陌生，所以請耐心等待。重新定位Nivo Slider插件中的一張圖片

我在我正在使用的網站上使用Nivo Slider。這是一個快速響應的網站，我希望滑塊能夠在所有屏幕尺寸上輕鬆顯示。我在CSS中設置了一個斷點，以便當網站達到其最小尺寸（圍繞移動屏幕的大小）時，滑塊設置爲200％寬度，並且隱藏溢出，以便圖像更大。

這可以正常工作，但是在這個尺寸下，只能看到滑塊的中心，而邊緣被屏幕邊緣裁剪掉。對於我使用的大多數圖像來說這不是問題，但其中一個圖像的裁剪非常笨拙。很容易重新定位整個滑塊，但我想嘗試移動此ONE圖像，以便在小屏幕上更好地看到它。

我已經添加到默認NIVO-slider.css的CSS是：

@media screen and (max-width: 31.25em) { /* 500px ÷ 16px */ 

.slider-wrapper{ 
    overflow: hidden; 
} 

.nivoSlider { 
    left: -50%; 
    width:200%; 
} 

.nivo-caption { 
    margin-left: 25%; 
    width: 50%; 
} 

}

非常感謝！

來源

2012-10-20 Flay

我認爲調整圖像的高度和寬度會更容易。 – bookcasey

由於圖像的內容，本身有一些複雜性。一旦頁面達到一定的尺寸，是否可以替換其中一個圖像？ – Flay

只是使用CSS，你可以添加一個一次性的類型類特定的圖像，並拋出到您的@media查詢：

.my-one-off { left:??px; margin-right:??px }

您可以搜索與jQuery的形象，以及（如果我沒有弄錯，Nivo使用jQ庫）。

$('img[src*="one-off.jpg"]').css('margin-left',35); // just an example

或者

$('img[src*="one-off.jpg"]').addClass('my-one-off');

來源

2012-10-23 19:35:23 Dawson

我看着NIVO-slider3.1。爲了只選擇特定的形象，將其向左，你可以使用CSS如下：

img[src="YourSpecialPic.jpg"]{ 
    left:50px !important; 
}

您還可以設置自定義動畫一個特定的幻燈片與HTML中的以下IMG屬性：

data-transition="slideInLeft"

您可以將任何屬性分配以獲得所需的效果，但我認爲這可以解決問題。

注：

取決於你所使用將決定是否不是弄亂了動畫效果（如縱切動畫變成執行左移後搞砸了slideInLeft動畫似乎很好地工作。）。

我沒有一個快速或簡單的解決方案來修復該特定幻燈片的所有動畫效果，但我確信JavaScript中的條件語句可以實現它（我只是不夠聰明）。

來源

2012-10-28 00:04:08 carter

@Flay，如果你嘗試了我的建議，好奇嗎？當我嘗試它時似乎工作正常。 – carter

重新定位Nivo Slider插件中的一張圖片

回答

相關問題