Слайд фона с AnythingSlider

Question

Мне нужно сдвинуть фон при нажатии на стрелку «далее» и стрелку «предыдущий» - прямо сейчас фон находится в элементе #container - однако, это не работает - я попытался поместить фон на ul # slider element - Но это тоже не работает ...

Что мне нужно, так это то, что фон будет ползунком столько, сколько li внутри ползунка ...

Есть предложения, как это сделать?

Вы можете посмотреть проект здесь: http://www.i -creative.dk / Slider /

thx

Answer 1

Попробуйте это css ...

#slider {
    width: 472px; /* divided the width of the background image by 4 (# of panels) */
    height: 570px;
    list-style: none;
    /* start background after the initial cloned panel: 472px to match panel width */
    background: transparent url(../images/background.png) 472px 0 repeat-x;
}

/* This makes sure the last cloned panel background matches the first panel */
ul#slider li.clone {
    background: transparent url(../images/background.png) 0 0 repeat-x !important;
}

/* Make the background visible */
div.anythingSlider .anythingWindow {
    overflow: visible !important;
}

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

Answer 2

Я создал что-то вроде того, что вы просите, и это полная боль.

Проблема в том, что вы говорите о том, что у КАЖДОГО слайда другое фоновое изображение, размер страницы.

2 варианта: 1: Имейте одно БОЛЬШОЕ фоновое изображение, со всем фоном, выровненным горизонтально, и анимируйте фоновую позицию css, когда вы изменяете div, чтобы сохранить соответствие. Преимущество в том, что нужно загрузить только одно изображение, но оно будет большим. Проблемы: вы видите все остальные изображения, если прыгаете сразу на несколько шагов;

требуется, чтобы вы использовали фиксированную ширину;

это боль, если вы хотите изменить фон только для одного слайда;

1. Предварительно загрузить фон для следующего слайда в элемент div, который является родственным элементом container, но имеет более высокий z-индекс. Используйте jquery, чтобы скользить по существующему фону с соответствующей стороны. Преимущество этого метода в том, что вы можете использовать css, чтобы фоновое изображение всегда занимало всю ширину экрана, или использовать больший тепловизор и центрировать его. Смотрите здесь: http://cksk.com для примера.

Короче говоря, вы не получите эту работу с готовым решением, вам нужно будет испачкать руки.

Кроме того, вам придется потратить немало времени на оптимизацию.