Rate this 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


        <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).jpg" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(48).jpg" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(49).jpg" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(50).jpg" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(51).jpg" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(52).jpg" alt="Slide"></div>
              <div class="carousel-3d-item"><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(53).jpg" alt="Slide"></div>
            </div>
          </div>
        </div>
      

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

With controls


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

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

Vertical


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

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

Without autoplay


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

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

Carousel 3D - getting started : download & setup


Download

This plugin requires a purchase.

Buy Carousel 3D plugin - $9