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

Show code Edit in sandbox

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

Show code Edit in sandbox

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();

Vertical

Show code Edit in sandbox

HTML
JS

        
            
        <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

Show code Edit in sandbox

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
        });

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