5

我对 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%;
}

}

非常感谢！

4

2 回答 2

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

于 2012-10-23T19:35:23.293 回答
0

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

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

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

data-transition="slideInLeft"

您可以子任何属性以获得所需的效果，但我认为这会成功。

笔记：

根据您使用的效果将确定是否会弄乱动画（例如，切片动画在执行左移后变得搞砸了。slideInLeft 动画似乎工作正常。）。

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

于 2012-10-28T00:04:08.673 回答