Question

我对网络开发和jQuery很陌生，所以请耐心等待。

我在我正在处理的网站上使用Nivo Slider。这是一个响应迅速的网站，我希望在所有屏幕尺寸上都能轻松看到滑块。我在我的CSS中设置了一个断点，这样当网站达到最小尺寸（大约移动屏幕的大小）时，滑块设置为200％宽度，隐藏溢出，以便图像更大。 / p>

这样可以正常工作，但是在此尺寸下，您只能看到滑块的中心，而侧面会被屏幕边缘裁剪掉。对于我使用的大多数图像来说这不是问题，但是其中一个图像非常笨拙。重新定位整个滑块很容易，但我想尝试移动这一张图像，以便在小屏幕上更好地看到它。

我添加到默认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%;
}

}

非常感谢！

Answer 1

只需使用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');

Answer 2

我看了nivo-slider3.1。为了仅选择特定图像并向左移动，您可以在css中使用以下内容：

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

您还可以在HTML中使用以下img属性为一个特定幻灯片设置自定义动画：

data-transition="slideInLeft"

你可以使用任何属性来获得所需的效果，但我认为这样做会有所帮助。

注：

取决于您正在使用的效果将决定是否会混淆动画（例如，切片动画在执行左移动后变得搞砸了.slideInLeft动画似乎工作正常。）。

我没有快速或简单的解决方案来修复该特定幻灯片的所有动画效果，但我确信javascript中的条件语句可以实现它（我只是不够聪明）

在Nivo Slider插件中重新定位一个图像

2 个答案: