Как сделать 9 слайдов из 3 слайдов на мобильных устройствах с fullpage.js? - PullRequest
Новая
       10

Как сделать 9 слайдов из 3 слайдов на мобильных устройствах с fullpage.js?

0 голосов
/ 23 мая 2019

Я разработал весь сайт с FullPage.js, после того, как я закончил свою работу, мне нужно сделать его отзывчивым.Итак, проблема в разделе со слайдами, есть 3 слайда с 3 элементами на каждом слайде.Теперь мне нужно сделать один слайд из каждого элемента без копирования кода.Это выглядит так:

Рабочий стол -> https://imgur.com/fpz1bhf

Что мне нужно на мобильном телефоне -> https://imgur.com/a/YYWv3Ml

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

<div class="slide fp-auto-height" data-anchor="slide1">
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

.box {
  background: white;
  width: 250px;
  height: 400px;
  display: inline-block;
  position: relative;
  margin: 40px;
  cursor: pointer;
}

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

...