ギャラリー
Bootstrapギャラリー - 無料の例、テンプレート、チュートリアル
Bootstrap 5で作成されたレスポンシブギャラリー。画像ギャラリー、ビデオギャラリー、写真ギャラリー、フルページ、eコマース、ライトボックス、スライダー、サムネイルなど。
静止画像
静的画像の使用例です。
詳細については、 画像のドキュメントをご覧ください。
.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 -->
カルーセル / スライダー
カルーセル（「スライダー」とも呼ばれる）は、写真、ビデオ、テキストなどの異なる要素をスライドショーで循環させます。
詳細については、 カルーセルのドキュメントをご覧ください。
.webp)
最初のスライドラベル
Nulla vitae elit libero, a pharetra augue mollis interdum.
.webp)
2番目のスライドラベル
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.webp)
3番目のスライドラベル
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>最初のスライドラベル</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 Nigh"
/>
<div class="carousel-caption d-none d-md-block">
<h5>2番目のスライドラベル</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>3番目のスライドラベル</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">前へ</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">次へ</span>
</button>
</div>
<!-- Carousel wrapper -->
複数アイテムカルーセル
利用可能なクラスの組み合わせを使用することで、各スライドに複数のアイテムを表示するカルーセルを作成できます。
より高度なオプションや複数アイテムカルーセルの例については、 複数アイテムカルーセルのドキュメントをご覧ください。
<!-- 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">前へ</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">次へ</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">Card title</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">Button</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">Card title</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">Button</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">Card title</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">Button</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">Card title</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">Button</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">Card title</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">Button</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">Card title</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">Button</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">Card title</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">Button</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">Card title</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">Button</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">Card title</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">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inner -->
</div>
<!-- Carousel wrapper -->
ビデオカルーセル
画像の代わりにビデオを使用することもできます。
<!-- 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>最初のスライドラベル</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>2番目のスライドラベル</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>3番目のスライドラベル</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">前へ</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">次へ</span>
</button>
</div>
<!-- Carousel wrapper -->
モーダルとYouTubeビデオを使用したギャラリー
BootstrapのモーダルとYouTubeビデオの埋め込みを組み合わせた例です。
詳細については、 モーダルのドキュメント と 埋め込みのドキュメントをご覧ください。
<!-- 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 -->
ライトボックス
高度なオプションが必要な場合は、MDBootstrapの ライトボックスコンポーネントを使用できます。
注意: このコンポーネントは MDBootstrap Pro パッケージが必要です。
<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>
高度な複数アイテムカルーセル
高度な複数アイテムギャラリーが必要な場合は、MDBootstrapの 複数の要素を含むコンポーネントを使用できます。
注意: このコンポーネントは MDBootstrap Pro パッケージが必要です。
<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>
縦型複数アイテムカルーセル
複数アイテムカルーセルの垂直実装。
注意: このコンポーネントは MDBootstrap Pro パッケージが必要です。
<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>
eコマースギャラリー
eコマースプロジェクトに調整されたズーム効果を持つギャラリーの例です。
詳細については、 eコマースギャラリーのドキュメントをご覧ください。
注意: このコンポーネントは MDBootstrap Pro パッケージが必要です。
<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>
フルページギャラリー
ギャラリーのフルページ使用例です。
画像をクリックしてライブデモを確認してください。
