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

Posted

技术标签:

【中文标题】在 Nivo Slider 插件中重新定位一个图像【英文标题】:Repositioning ONE image in the Nivo Slider plugin 【发布时间】:2012-10-11 05:01:36 【问题描述】:

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



非常感谢!

【问题讨论】:

我认为只调整图像的高度和宽度会更容易。 由于图像的内容,这本身就有一些复杂性。一旦页面低于一定大小,是否可以替换其中一张图片? 【参考方案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');

【讨论】:

【参考方案2】:

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

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

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

data-transition="slideInLeft"

您可以对任何属性进行子化以获得所需的效果,但我认为这样就可以了。

注意:

根据您使用的效果将确定是否会破坏动画(例如,切片动画在执行左移后会变得混乱。slideInLeft 动画似乎可以正常工作。)。

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

【讨论】:

@Flay,很好奇你是否尝试过我的建议?我试了一下感觉效果不错。

以上是关于在 Nivo Slider 插件中重新定位一个图像的主要内容,如果未能解决你的问题,请参考以下文章

Nivo Slider Jquery 插件 - 图像自动调整大小

Nivo Slider 上的第一张图像出现失真

nivo slider插件使用方法

Nivo Slider 自定义高度/宽度问题

仅在悬停事件后如何在 Nivo Slider 中显示标题?

Javascript Nivo Slider 不同的滑动时间