Galerie
Bootstrap Galerie - kostenlose Beispiele, Vorlagen & Tutorial
Responsive Galerien erstellt mit Bootstrap 5. Bildergalerie, Videogalerie, Fotogalerie, Vollbild, E-Commerce, Lightbox, Slider, Thumbnails und mehr.
Statische Bilder
Ein Beispiel für die Verwendung von statischen Bildern.
Um mehr zu erfahren, lesen Sie Bilder Dokumentation.
.webp)
.webp)
<!-- Gallery -->
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Boat on Calm Water"
/>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain1.webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Wintry Mountain Landscape"
/>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Mountains in the Clouds"
/>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Boat on Calm Water"
/>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(18).webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Waves at Sea"
/>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Yosemite National Park"
/>
</div>
</div>
<!-- Gallery -->
Karussell / Slider
Ein Karussell (auch "Slider" genannt) ist eine Diashow, die verschiedene Elemente wie Fotos, Videos oder Texte durchläuft.
Um mehr zu erfahren, lesen Sie Karussell Dokumentation.
.webp)
Erste Folienbeschriftung
Nulla vitae elit libero, a pharetra augue mollis interdum.
.webp)
Zweite Folienbeschriftung
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.webp)
Dritte Folienbeschriftung
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<!-- Carousel wrapper -->
<div
id="carouselBasicExample"
data-mdb-carousel-init class="carousel slide carousel-fade"
data-mdb-ride="carousel"
>
<!-- Indicators -->
<div class="carousel-indicators">
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="1"
aria-label="Slide 2"
></button>
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<!-- Inner -->
<div class="carousel-inner">
<!-- Single item -->
<div class="carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp"
class="d-block w-100"
alt="Sunset Over the City"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Erste Folienbeschriftung</h5>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp"
class="d-block w-100"
alt="Canyon at Night"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Zweite Folienbeschriftung</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp"
class="d-block w-100"
alt="Cliff Above a Stormy Sea"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Dritte Folienbeschriftung</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button data-mdb-button-init
class="carousel-control-prev"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Vorherige</span>
</button>
<button data-mdb-button-init
class="carousel-control-next"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Nächste</span>
</button>
</div>
<!-- Carousel wrapper -->
Mehrteiliger Karussell
Durch die Verwendung einer Kombination aus verfügbaren Klassen können Sie ein Karussell mit mehreren Elementen auf jeder Folie erstellen.
Wenn Sie erweiterte Optionen und Beispiele für ein mehrteiliges Karussell benötigen, werfen Sie einen Blick auf die Multi-item Carousel Dokumentation.
Kartentitel
Ein kurzer Beispieltext, um den Kartentitel zu ergänzen und den Hauptinhalt der Karte zu bilden.
Knopf
Kartentitel
Ein kurzer Beispieltext, um den Kartentitel zu ergänzen und den Hauptinhalt der Karte zu bilden.
Knopf
Kartentitel
Ein kurzer Beispieltext, um den Kartentitel zu ergänzen und den Hauptinhalt der Karte zu bilden.
Knopf
Kartentitel
Ein kurzer Beispieltext, um den Kartentitel zu ergänzen und den Hauptinhalt der Karte zu bilden.
Knopf
Kartentitel
Ein kurzer Beispieltext, um den Kartentitel zu ergänzen und den Hauptinhalt der Karte zu bilden.
Knopf
Kartentitel
Ein kurzer Beispieltext, um den Kartentitel zu ergänzen und den Hauptinhalt der Karte zu bilden.
Knopf
Kartentitel
Ein kurzer Beispieltext, um den Kartentitel zu ergänzen und den Hauptinhalt der Karte zu bilden.
Knopf
Kartentitel
Ein kurzer Beispieltext, um den Kartentitel zu ergänzen und den Hauptinhalt der Karte zu bilden.
Knopf
Kartentitel
Ein kurzer Beispieltext, um den Kartentitel zu ergänzen und den Hauptinhalt der Karte zu bilden.
Knopf
<!-- Carousel wrapper -->
<div
id="carouselMultiItemExample"
data-mdb-carousel-init class="carousel slide carousel-dark text-center"
data-mdb-ride="carousel"
>
<!-- Controls -->
<div class="d-flex justify-content-center mb-4">
<button data-mdb-button-init
class="carousel-control-prev position-relative"
type="button"
data-mdb-target="#carouselMultiItemExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Vorherige</span>
</button>
<button data-mdb-button-init
class="carousel-control-next position-relative"
type="button"
data-mdb-target="#carouselMultiItemExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Nächste</span>
</button>
</div>
<!-- Inner -->
<div class="carousel-inner py-4">
<!-- Single item -->
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/181.webp"
class="card-img-top"
alt="Waterfall"
/>
<div class="card-body">
<h5 class="card-title">Kartentitel</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Knopf</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/182.webp"
class="card-img-top"
alt="Sunset Over the Sea"
/>
<div class="card-body">
<h5 class="card-title">Kartentitel</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Knopf</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/183.webp"
class="card-img-top"
alt="Sunset over the Sea"
/>
<div class="card-body">
<h5 class="card-title">Kartentitel</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Knopf</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.webp"
class="card-img-top"
alt="Fissure in Sandstone"
/>
<div class="card-body">
<h5 class="card-title">Kartentitel</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Knopf</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/185.webp"
class="card-img-top"
alt="Storm Clouds"
/>
<div class="card-body">
<h5 class="card-title">Kartentitel</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Knopf</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/186.webp"
class="card-img-top"
alt="Hot Air Balloons"
/>
<div class="card-body">
<h5 class="card-title">Kartentitel</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Knopf</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/187.webp"
class="card-img-top"
alt="Peaks Against the Starry Sky"
/>
<div class="card-body">
<h5 class="card-title">Kartentitel</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Knopf</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/188.webp"
class="card-img-top"
alt="Bridge Over Water"
/>
<div class="card-body">
<h5 class="card-title">Kartentitel</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Knopf</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/189.webp"
class="card-img-top"
alt="Purbeck Heritage Coast"
/>
<div class="card-body">
<h5 class="card-title">Kartentitel</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Knopf</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inner -->
</div>
<!-- Carousel wrapper -->
Video-Karussell
Statt Bildern können Sie auch Videos verwenden.
<!-- Carousel wrapper -->
<div
id="carouselVideoExample"
data-mdb-carousel-init class="carousel slide carousel-fade"
data-mdb-ride="carousel"
>
<!-- Indicators -->
<div class="carousel-indicators">
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide-to="1"
aria-label="Slide 2"
></button>
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<!-- Inner -->
<div class="carousel-inner">
<!-- Single item -->
<div class="carousel-item active">
<video class="img-fluid" autoplay loop muted>
<source src="https://mdbcdn.b-cdn.net/img/video/Tropical.mp4" type="video/mp4" />
</video>
<div class="carousel-caption d-none d-md-block">
<h5>Erste Folienbeschriftung</h5>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<video class="img-fluid" autoplay loop muted>
<source src="https://mdbcdn.b-cdn.net/img/video/forest.mp4" type="video/mp4" />
</video>
<div class="carousel-caption d-none d-md-block">
<h5>Zweite Folienbeschriftung</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<video class="img-fluid" autoplay loop muted>
<source
src="https://mdbcdn.b-cdn.net/img/video/Agua-natural.mp4"
type="video/mp4"
/>
</video>
<div class="carousel-caption d-none d-md-block">
<h5>Dritte Folienbeschriftung</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button data-mdb-button-init
class="carousel-control-prev"
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Vorherige</span>
</button>
<button data-mdb-button-init
class="carousel-control-next"
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Nächste</span>
</button>
</div>
<!-- Carousel wrapper -->
Galerie mit Modalen und YouTube-Videos
Ein Beispiel für die Kombination von Bootstrap-Modalen und YouTube-Videoeinbettungen.
Um mehr zu erfahren, lesen Sie Modale Dokumentation und Einbettungen Dokumentation.
<!-- Modal gallery -->
<section class="">
<!-- Section: Images -->
<section class="">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div
class="bg-image hover-overlay ripple shadow-1-strong rounded"
data-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-1.webp"
class="w-100"
/>
<a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal1">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div
class="bg-image hover-overlay ripple shadow-1-strong rounded"
data-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-2.webp"
class="w-100"
/>
<a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal2">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div
class="bg-image hover-overlay ripple shadow-1-strong rounded"
data-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-3.webp"
class="w-100"
/>
<a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal3">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
</div>
</section>
<!-- Section: Images -->
<!-- Section: Modals -->
<section class="">
<!-- Modal 1 -->
<div
class="modal fade"
id="exampleModal1"
tabindex="-1"
aria-labelledby="exampleModal1Label"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/embed/A3PDXmYoF5U"
title="YouTube video"
allowfullscreen
></iframe>
</div>
<div class="text-center py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div
class="modal fade"
id="exampleModal2"
tabindex="-1"
aria-labelledby="exampleModal2Label"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/embed/wTcNtgA6gHs"
title="YouTube video"
allowfullscreen
></iframe>
</div>
<div class="text-center py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Modal 3 -->
<div
class="modal fade"
id="exampleModal3"
tabindex="-1"
aria-labelledby="exampleModal3Label"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/embed/vlDzYIIOYmM"
title="YouTube video"
allowfullscreen
></iframe>
</div>
<div class="text-center py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Modals -->
</section>
<!-- Modal gallery -->
Lightbox
Wenn Sie erweiterte Optionen benötigen, können Sie die MDBootstrap LightBox Komponente verwenden.
Hinweis: Diese Komponente erfordert das MDBootstrap Pro paket.
<div class="lightbox" data-mdb-lightbox-init>
<div class="row">
<div class="col-lg-6">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table Full of Spices"
class="w-100 mb-2 mb-md-4 shadow-1-strong rounded"
/>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp"
alt="Coconut with Strawberries"
class="w-100 shadow-1-strong rounded"
/>
</div>
<div class="col-lg-6">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp"
alt="Dark Roast Iced Coffee"
class="w-100 shadow-1-strong rounded"
/>
</div>
</div>
</div>
Erweiterter Multi-Item-Karussell
Wenn Sie eine erweiterte Multi-Item-Galerie benötigen, können Sie die MDBootstrap Multi Item Komponente verwenden.
Hinweis: Diese Komponente erfordert das MDBootstrap Pro Paket.
<div class="lightbox" data-mdb-lightbox-init>
<div class="multi-carousel" data-mdb-multi-carousel-init>
<div class="multi-carousel-inner">
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table Full of Spices"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button data-mdb-button-init
class="carousel-control-prev"
type="button"
tabindex="0"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button data-mdb-button-init
class="carousel-control-next"
type="button"
tabindex="0"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</div>
Vertikales Multi-Item-Karussell
Vertikale Implementierung des Multi-Item-Karussells.
Hinweis: Diese Komponente erfordert das MDBootstrap Pro Paket.
<div class="ecommerce-gallery vertical" data-mdb-ecommerce-gallery-init>
<div class="row">
<div class="col-4 col-sm-3">
<div class="multi-carousel vertical" data-mdb-multi-carousel-init data-mdb-items="3">
<div class="multi-carousel-inner">
<div class="multi-carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button
class="carousel-control-prev"
tabindex="0"
type="button"
data-mdb-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
</button>
<button
class="carousel-control-next"
tabindex="0"
type="button"
data-mdb-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
</button>
</div>
</div>
<div class="col-8 col-sm-9">
<div class="lightbox" data-mdb-lightbox-init>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
</div>
</div>
eCommerce-Galerie
Ein Beispiel für eine Galerie mit Zoom-Effekt, angepasst an eCommerce-Projekte.
Um mehr zu erfahren, lesen Sie die eCommerce Galerie Dokumentation.
Hinweis: Diese Komponente erfordert das MDBootstrap Pro Paket.
<div class="ecommerce-gallery" data-mdb-ecommerce-gallery-init data-mdb-zoom-effect="true" data-mdb-auto-height="true">
<div class="row py-3 shadow-5">
<div class="col-12 mb-1">
<div class="lightbox" data-mdb-lightbox-init>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
alt="Gallery image 1"
class="active w-100"
/>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
alt="Gallery image 2"
class="w-100"
/>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
alt="Gallery image 3"
class="w-100"
/>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
alt="Gallery image 4"
class="w-100"
/>
</div>
</div>
</div>
Vollbild Galerie
Ein Beispiel für die Verwendung der Galerie im Vollbildmodus.
Klicken Sie auf das Bild, um eine Live-Demo zu sehen.
