Блог

Главная - Вопросы по программированию - Как создать карусель с перекрывающим представлением? [jsFiddle и ASCII-формат включены}

Как создать карусель с перекрывающим представлением? [jsFiddle и ASCII-формат включены}

#javascript #jquery #css #html

#javascript #jquery #css #HTML

Вопрос:

http://jsfiddle.net/yxhzU/1042/

Я пытаюсь изменить этот пример так, чтобы в верхней карусели вы могли видеть 10% слайдов с обеих сторон.

Любая помощь, направляющая меня в правильном направлении, была бы отличной, спасибо!

 Viewable area would look something like this:
______    _________________________    _______
______|  |_________________________|  |_______
prev^            ^current^             ^next

Ответ №1:

http://jsfiddle.net/yxhzU/1069/

Я изменил код плагина, который вы использовали. Я не тестировал его полностью, но это даст вам хорошее представление о том, что вам нужно делать.

Я внес следующие изменения:

Добавлены 2 дополнительные настройки

  • itemwidth — это число от 1-100, которое символизирует процент от ширины карусели, занимаемой одним элементом.

  • startingoffset — Аналогично, количество начального пространства слева остается открытым, также в процентах (0-100)

Наконец, я изменил все вычисления, в которых элементы обернуты и анимированы, чтобы использовать новые «вычисленные» ширины, которые включают вышеупомянутое масштабирование.

Проблема, с которой вы столкнулись, заключается в том, что многие плагины jquery и пользовательский интерфейс jquery оборачивают ваши элементы дополнительными «divs» и другими объектами DOM. Итак, пока вы использовали стили для изменения ширины ваших страниц в карусели, они фактически находились внутри других объектов. Я не думаю, что вы могли бы заставить это работать только с css в любом случае, потому что анимационные части кода были основаны на ширине, которая была измерена внутри.

Редактировать: К вашему сведению, я просматривал его только в Chrome.

Комментарии:

1. Хотел бы я дать несколько голосов «за» и правильных ответов. Большое спасибо за всю работу, которую вы проделали, чтобы помочь мне объяснить это.

2. Нет проблем, мне нравится jquery, и мне не часто приходится работать с ним на работе. С этим было интересно повозиться.

3. Еще одна вещь, которую я хотел бы выяснить, — это включение некоторых пересчетов при изменении размера окна. Что-то вроде повторного запуска вычислений на $(window).resize(function(){}); Я рад приступить к этому, просто подумал, что хотел бы попросить у вас совета, как лучше всего это сделать. Спасибо.

4. Не должно быть слишком сложно. Вам нужно будет сделать несколько вещей. 1. подключитесь и обработчик события к событию изменения размера в окне. 2. Заставьте обработчик повторно инициализировать размеры всех контейнеров в карусели и, наконец, 3. при изменении размера учитывайте текущую позицию, чтобы учесть изменение размера. Вам нужно быть осторожным с продолжительностью анимации, если вы используете это. Я подозреваю, что у вас может возникнуть какое-то странное поведение. Вероятно, лучше всего пропустить анимацию в событии изменения размера.