Как сделать flexbox, который расширяется при наведении, чтобы иметь возможность прокрутки на мобильном телефоне?Пример того, что я ищу, включен

Question

У меня есть баннер с 5 картинками рядом, каждая из которых расширяется для отображения текста при наведении курсора.Однако на мобильном телефоне это становится очень трудно читать, поэтому мне было интересно, есть ли способ добавить эффект прокрутки, как сайт Foo Fighters (https://foofighters.com/)

Я пытаюсь избежатьполоса прокрутки и вместо них есть стрелка влево и вправо.

Сайт построен на начальной загрузке 4.

#container-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75vh;
  width: 100vw;
}

#container-banner:hover>.section {
  -webkit-filter: brightness(22%);
  filter: brightness(22%);
}

#container-banner:hover>.section:hover {
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
}

#container-banner .section {
  flex-grow: 1;
  position: relative;
  height: 100%;
  transition: all 0.4s;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  flex: 1;
}

#container-banner .section .cont_title {
  position: relative;
  margin: auto;
  width: 100%;
  height: auto;
  text-align: center;
  margin-top: 37vh;
}

#container-banner .section .cont_title h1 {
  text-transform: uppercase;
  color: white;
  font-family: 'Economica', sans-serif;
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
  font-size: 3.5vw;
  margin: 0;
  transition: font-size 0.3s;
  vertical-align: middle;
}

#container-banner .section .cont_title h3 {
  text-transform: uppercase;
  font-family: 'Economica', sans-serif;
  font-size: 1.3vw;
  transition: all 0.3s;
  color: white;
  letter-spacing: 3px;
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
}

#container-banner .section .cont_desc {
  position: relative;
  display: block;
  text-align: center;
  width: 12vw;
  height: auto;
  margin: auto;
  opacity: 0;
  transition: opacity 0.8s, padding-top 0.9s, -webkit-transform 0.7s;
  transition: opacity 0.8s, transform 0.7s, padding-top 0.9s;
  transition: opacity 0.8s, transform 0.7s, padding-top 0.9s, -webkit-transform 0.7s;
  padding-top: 6vh;
  -webkit-transform: scale(1);
  transform: scale(1);
}

#container-banner .section .cont_desc p {
  margin: 0;
  font-family: 'Economica', sans-serif;
  color: white;
  font-size: 16px;
}

#container-banner .section:hover {
  flex-grow: 1.8;
  transition: flex 0.2s;
}

#container-banner .section:hover>.cont_title h1 {
  font-size: 5.3vw;
  transition: font-size 0.4s;
}

#container-banner .section:hover>.cont_title h3 {
  font-size: 1.6vw;
  transition: all 0.4s;
}

#container-banner .section:hover>.cont_desc {
  opacity: 1;
  padding-top: 2vh;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  transition: opacity 0.7s, padding-top 0.5s, -webkit-transform 0.1s;
  transition: opacity 0.7s, padding-top 0.5s, transform 0.1s;
  transition: opacity 0.7s, padding-top 0.5s, transform 0.1s, -webkit-transform 0.1s;
  transition-delay: 0s, 0.1s, 0s;
}

#container-banner .section:nth-child(1) {
  background: url("../img/members/2nd-round.jpg") center;
}

#container-banner .section:nth-child(2) {
  background: url("../img/members/3rd-round.jpg") center;
}

#container-banner .section:nth-child(3) {
  background: url("../img/HRBAlbumCover.svg") center;
  object-fit: cover;
  -webkit-background-size: contain;
  background-size: contain;
  background-color: black;
}

#container-banner .section:nth-child(4) {
  background: url("../img/members/3.jpg") center;
}

#container-banner .section:nth-child(5) {
  background: url("../img/members/4.jpg") center;
  object-fit: cover;
}

<section id="container-banner">
  <div class="section first">
    <div class="cont_title">
      <h1><a href="music.html">Music</a></h1>
    </div>
  </div>
  <div class="section">
    <div class="cont_title">
      <h1><a href="tour.html">Tour</a></h1>
    </div>
  </div>
  <div class="section">
    <div class="cont_title">
      <h1 class="font-weight-bold">Members<br>Only</h1>
      <h3>Free Song<br>upon Sign-Up</h3>
      <button class="btn hoverable">Sign-Up</button>
      <button class="btn hoverable">Sign-In</button>
    </div>
  </div>
  <div class="section">
    <div class="cont_title">
      <h1><a href="https://www.LinkToTheSite.com">Store</a></h1>
    </div>
  </div>
  <div class="section">
    <div class="cont_title">
      <h1><a href="contact.html">Contact</a></h1>
    </div>
  </div>
</section>

Answer 1

Использовали ли вы библиотеку jquery с именем owl.carousel: https://owlcarousel2.github.io/OwlCarousel2? Это потрясающая библиотека, позволяющая легко создавать слайдер карусели, поддерживающий касание и перетаскивание, что очень важно для мобильных устройств.

На небольших устройствах

шире 600 пикселей

шире, чем1000px

И вы можете полностью настроить, сколько элементов вы хотите отобразить в каждой точке останова:

$(function(){
    $("#banner").owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    responsive: {
        0: {
        items: 2
      },
      600: {
        items: 3
      },
      1000: {
        items: 5
      }
    }
  });
});

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

Ссылка на скрипку: http://jsfiddle.net/xpvt214o/324749/