Репозиционирование ОДНОГО изображения в плагине Nivo Slider

Я новичок в веб-разработке и jQuery, поэтому терпите меня.

Я использую Nivo Slider на веб-сайте, над которым работаю. Это отзывчивый веб-сайт, и я хочу, чтобы слайдер был хорошо виден на экранах любого размера. Я установил точку останова в своем CSS, чтобы, когда сайт достиг минимального размера (примерно как размер мобильного экрана), ползунок был установлен на ширину 200%, а переполнение было скрыто, так что изображения были больше.

Это работает нормально, однако при таком размере вы можете видеть только центр ползунка, а его стороны обрезаны краем экрана. Для большинства изображений, которые я использую, это не проблема, однако одно из них обрезано очень неудобно. Переместить весь слайдер легко, но я хочу попробовать переместить это ОДНО изображение, чтобы его лучше было видно на маленьких экранах.

CSS, который я добавил к nivo-slider.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%;
}

}

Спасибо большое!


image css position nivo-slider
person Flay    schedule 20.10.2012    source источник
comment
Думаю, было бы проще просто изменить размер изображения по высоте и ширине.   -  person bookcasey    schedule 21.10.2012
comment
Из-за содержания изображений это само по себе имеет некоторые сложности. Можно ли заменить одно из изображений, когда размер страницы становится меньше определенного?   -  person Flay    schedule 21.10.2012

Ответы (2)


arrow_upward
1
arrow_downward

Просто используя 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

Or

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

person Dawson    schedule 23.10.2012

arrow_upward
0
arrow_downward

Посмотрел nivo-slider3.1. Чтобы выбрать только конкретное изображение и переместить его влево, вы можете использовать в css следующее:

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

Вы также можете установить собственную анимацию для одного конкретного слайда с помощью следующего атрибута img в HTML:

data-transition="slideInLeft"

Вы можете использовать любые атрибуты, чтобы получить желаемый эффект, но я думаю, что это поможет.

ЗАМЕТКА:

В зависимости от того, какие эффекты вы используете, будет зависеть, испортит ли это анимацию (например, анимация нарезки искажается после выполнения движения влево. Анимация slideInLeft, кажется, работает нормально).

У меня нет быстрого или простого решения для исправления всех эффектов анимации для этого конкретного слайда, но я уверен, что это можно сделать с помощью условного оператора в javascript (я просто недостаточно умен для этого).

person carter    schedule 28.10.2012
comment
@Flay, так любопытно, попробовали ли вы мое предложение? Когда я попробовал, мне показалось, что все работает нормально. - person carter; 08.11.2012