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

Question

我对web开发和jQuery都很陌生,所以请耐心等待.

我在我正在研究的网站上使用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%;
}

}

非常感谢!

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');