Загрузка нового контента в адаптивный слайдер

0

Как этот слайдер перезагружает новый контент при изменении размера страницы?

http://www.herschelsupply.com/

Я наткнулся на это, в то время как шоппинг и их слайдер - это хорошее факсимиле того, что я хочу создать для своего сайта. Их слайдер загружает новое содержимое в определенный момент, когда изменяется размер окна. У меня были проблемы с этим, используя BxSlider, потому что я новичок в JS.

Больше информации

У меня были проблемы:

  1. Я могу использовать запрос css media или jQuery, чтобы скрыть определенные слайды, но они остаются в DOM, поэтому слайдер все еще отображает их в пейджере, а иногда просто останавливает вращение/разрывы.

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

  3. Если я удаляю и заменяю элементы из DOM на $ (window).resize(), я не уверен, как вернуть их в DOM, если окно будет изменяться взад и вперед непрерывно.

В целом я просто спрашиваю, какой подход вы предпримете для этого? Мне жаль, если это больше связано с обсуждением, чем с конкретным вопросом, но я не знаю, где еще спросить.

Теги:

1 ответ

0
Лучший ответ

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

<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 приведет вас туда, где вам нужно).

Поделиться
  • 0
    Спасибо, также, посмотрев немного ближе, я вижу, что ты прав. Извините, мне, наверное, лучше сначала разобраться. Во всяком случае, вы думаете, что этот подход неэффективен?
  • 0
    @Sirrah Существуют различные плюсы и минусы. Я только что отредактировал свой ответ выше с помощью решения, более соответствующего тому, что вы пытались сделать. Проблема с моим подходом состоит в том, что вы теряете любую выгоду SEO, которую вы могли бы получить с тегами images alt = "". С другой стороны, если вы используете div для показа слайдов, вы можете легко включить тег <p> для описания слайда, как если бы вы использовали тег alt = "", а затем просто скрыть этот абзац из вида, используя что-то вроде text-indent. : -999em; Это также зависит от того, какой сайт вы создаете ...
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню