Edit these docs

Carousel 3D

Bootstrap Carousel 3D plugin

MD Bootstrap Carousel 3D Plugin is a three dimensional slideshow component perfect for cycling through elements, especially images.

To start working with carousel 3D plugin see "Getting Started" tab on this page.

Basic example

HTML
JS


        <div class="container">
          <div class="carousel-3d carousel-3d-basic">
            <div class="carousel-3d-inner">
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(48).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(49).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(50).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(51).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(52).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(53).webp" alt="Slide"></div>
            </div>
          </div>
        </div>


        $('.carousel-3d-basic').mdbCarousel3d();

With controls

HTML
JS


        <div class="container">
          <div class="carousel-3d carousel-3d-controls">
            <div class="carousel-3d-inner">
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(48).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(49).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(50).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(51).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(52).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(53).webp" alt="Slide"></div>
            </div>
            <div class="carousel-3d-controls">
              <a class="prev-btn waves-effect waves-light"><i class="fas fa-chevron-left"></i></a>
              <a class="next-btn waves-effect waves-light"><i class="fas fa-chevron-right"></i></a>
            </div>
          </div>
        </div>


        $('.carousel-3d-controls').mdbCarousel3d();


        <div class="container" style="padding-top: 150px; height: 850px">
          <div class="carousel-3d carousel-3d-vertical">
            <div class="carousel-3d-inner">
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(48).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(49).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(50).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(51).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(52).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(53).webp" alt="Slide"></div>
            </div>
            <div class="carousel-3d-controls">
              <a class="prev-btn waves-effect waves-light text-light"><i class="fas fa-chevron-left"></i></a>
              <a class="next-btn waves-effect waves-light text-light"><i class="fas fa-chevron-right"></i></a>
            </div>
          </div>
        </div>


        $('.carousel-3d-vertical').mdbCarousel3d({
          vertical: true
        });

Without autoplay

HTML
JS


        <div class="container">
          <div class="carousel-3d carousel-3d-autoplay-off">
            <div class="carousel-3d-inner">
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(48).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(49).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(50).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(51).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(52).webp" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(53).webp" alt="Slide"></div>
            </div>
            <div class="carousel-3d-controls">
              <a class="prev-btn waves-effect waves-light"><i class="fas fa-chevron-left"></i></a>
              <a class="next-btn waves-effect waves-light"><i class="fas fa-chevron-right"></i></a>
            </div>
          </div>
        </div>


        $('.carousel-3d-autoplay-off').mdbCarousel3d({
          autoplay: false
        });

Edit these docs

Carousel 3D - getting started : download & setup

Download

This plugin requires a purchase.
Buy Carousel 3D plugin

Installation tutorial

Note: The video below shows a different plugin, but it does not matter. The installation process is the same for all plugins.

Introduction
Download