0

Is using bootstrap the best way, or any suggestions and examples?

  <div class="swiper-container">
  <div class="swiper-wrapper">
  <div class="swiper-slide">Slide 1</div>
  <div class="swiper-slide">Slide 2</div>
  <div class="swiper-slide">Slide 3</div>
  <div class="swiper-slide">Slide 4</div>
  <div class="swiper-slide">Slide 5</div>
  <div class="swiper-slide">Slide 6</div>
  <div class="swiper-slide">Slide 7</div>
  <div class="swiper-slide">Slide 8</div>
  <div class="swiper-slide">Slide 9</div>
  <div class="swiper-slide">Slide 10</div>
  </div>
  </div>
TryinHard
  • 4,078
  • 3
  • 28
  • 54
Jamysim
  • 3
  • 2
  • Possible duplicate of [How to modify bootstrap carousel for mobile and tabs](https://stackoverflow.com/questions/43238861/how-to-modify-bootstrap-carousel-for-mobile-and-tabs) – Obsidian Age Dec 11 '17 at 03:43
  • https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html – Lalji Tadhani Dec 11 '17 at 05:29

2 Answers2

0

Assuming when you say "mobile view" you mean small hand held device, add the class "hidden-xs" to the slides you don't want to display.

user2182349
  • 9,569
  • 3
  • 29
  • 41
0

You can use breakpoints object alongside your autoplay, Like this

var swiper = new Swiper(".swiper-container", {
  autoplay: {
    slidesPerView: 2,
    disableOnInteraction: false,
  },
  breakpoints: {
    1024: {
      slidesPerView: 4,
      spaceBetween: 50,
    },
  },
});

Here Is The Documentation Example For Responsive Sliders

https://codesandbox.io/s/3blv5?file=/index.html