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

Question

我对网站开发和jQuery非常新手，请多多包涵。

我正在使用Nivo Slider制作一个网站。这是一个响应式网站，我希望幻灯片在所有屏幕尺寸下都能轻松地显示出来。我在CSS中设置了一个断点，当网站达到最小尺寸（大约是移动屏幕的大小）时，将幻灯片设置为200％的宽度，并隐藏溢出，以使图像更大。

这很好用，但是在这个尺寸下，您只能看到幻灯片的中心，而两侧被屏幕边缘裁剪掉了。对于我使用的大多数图像，这不是问题，但其中一个图像被裁剪得非常尴尬。重新定位整个滑块很容易，但我想尝试将这个图像移到更好地在小屏幕上查看。

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

}

非常感谢！

- Flay

---

我认为只调整图片的高度和宽度会更容易。 - bookcasey

由于图像的内容，这本身就有一些复杂性。如果页面大小低于某个特定值，是否可以替换其中一个图像？ - Flay

Answer 1

只需使用CSS，您就可以为特定的图像添加一次性类型类，并将其放入@ media查询中：

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

您也可以使用jQuery搜索该图像（如果我没有弄错，Nivo使用jQ库）。

$('img[src*="one-off.jpg"]').css('margin-left',35); // 仅供参考

或者

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

- Dawson

Answer 2

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

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

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

data-transition="slideInLeft"

您可以使用任何属性来获得所需的效果，但我认为这样做就可以了。

注意：

根据您使用的效果，会决定是否会影响动画（例如，在执行左移操作后，切片动画会变得混乱。slideInLeft动画似乎运行良好）。

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

- carter

---

@Flay，不知道你有没有尝试我的建议？当我尝试时，它似乎很好用。 - carter