Как этот слайдер перезагружает новый контент при изменении размера страницы?
http://www.herschelsupply.com/
Я наткнулся на это, в то время как шоппинг и их слайдер - это хорошее факсимиле того, что я хочу создать для своего сайта. Их слайдер загружает новое содержимое в определенный момент, когда изменяется размер окна. У меня были проблемы с этим, используя BxSlider, потому что я новичок в JS.
Больше информации
У меня были проблемы:
Я могу использовать запрос css media или jQuery, чтобы скрыть определенные слайды, но они остаются в DOM, поэтому слайдер все еще отображает их в пейджере, а иногда просто останавливает вращение/разрывы.
Если я создаю два разных ползунка для загрузки с разной шириной, изменение не происходит по мере изменения размера страницы. Также это кажется расточительным.
Если я удаляю и заменяю элементы из DOM на $ (window).resize(), я не уверен, как вернуть их в DOM, если окно будет изменяться взад и вперед непрерывно.
В целом я просто спрашиваю, какой подход вы предпримете для этого? Мне жаль, если это больше связано с обсуждением, чем с конкретным вопросом, но я не знаю, где еще спросить.
На веб-сайте, который вы показали, просто есть два полностью отдельных слайд-шоу. Один из них скрыт, а другой отображается при изменении размера окна.
<div id="slider-one" class="hide-for-mobile">
/*Slider here*/
</div>
<div id="slider-two" class="show-for-mobile">
/*Slider here*/
</div>
Затем в вашем медиа-запросе для мобильных устройств...
.hide-for-mobile {
display: none;
}
.show-for-mobile {
display: block;
}
Теперь, что касается решения, которое больше соответствует тому, что вы пытались сделать... Что вам нужно сделать, так это уйти от тегов HTML <img>
. Вместо этого ваши скользящие элементы должны быть <div>
с фоновым изображением CSS. Таким образом, в ваших медиа-запросах вы можете изменить фоновое изображение <div>
. Я не уверен, поддерживает ли этот слайдер или нет, некоторые из них зависят от скользящего фактического <img>
HTML <img>
. Некоторые могут скользить, что вы хотите. Вы должны иметь возможность управлять тем, что я описал с помощью Flexslider (быстрый поиск в Google приведет вас туда, где вам нужно).