Come modificare il carosello di bootstrap per dispositivi mobili e tabs

Sto usando un cursore bootstrap.

  • Sul desktop, ha tre diapositive con 4 tessere ciascuna

inserisci la descrizione dell'immagine qui

  • Sulle tabs, devono essere 4 diapositive con 3 tessere ciascuna

  • Sul cellulare, ci devono essere 12 diapositive diverse

Sto pensando al modo più efficace e ottimizzato per implementarlo.

Opzione 1 : crea 3 diversi set di cursori. Rendi visibile solo una alla volta

Opzione 2 – Rileva la larghezza dello schermo con jquery e aggiungi automaticamente altre tessere come diapositive, nascondendo quelle extra. Immagino che questo sarà molto complicato.

Si prega di aiutare se c’è un modo migliore per implementare questo.

Ecco qui:

.carousel-inner .item.active { display: flex; } .carousel-inner .item { background-color: #212121; color: white; padding: 0 15px; } #desktopCarousel .carousel-inner .item > .row { min-height: 480px; } #tabletCarousel .carousel-inner .item > .row { min-height: 360px; } .carousel-inner .item > .row { flex-grow: 1; min-height: 320px; display: flex; flex-wrap: wrap; align-items: stretch; } .carousel-inner .item > .row [class^="col-"] { flex-grow: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; text-align: center; } .carousel-inner .item > .row .row { flex-grow: 1; display: flex; flex-wrap: wrap; align-items: stretch; } .carousel-inner .item > .row .row [class^="col-"] { display: flex; flex-direction: column; align-items: stretch; justify-content: center; }