My situation:

*_Expected behavior_*I hoped that the carousel would function and display correctly out of the box.

*_Actual behavior_*I have added the JS, CSS, and HTML from the add-ons folder to the mdb files respectively. The carousel does not display correctly, and it does not function.

I'm new to to design/development, mob in particular, and I'm sure that I'm just missing something, but I was expecting that the carousel would function out of the box. I've added a few classes from bootstrap's original carousel with no improvement

*Resources (screenshots, code snippets etc.)*Snippet: https://mdbootstrap.com/snippets/jquery/jlstory/2664337

HTML --> 3D Carousel .jpg) .jpg) .jpg) .jpg) .jpg) .jpg) .jpg) .jpg) .jpg) CSS -->/* CSS Document */

.carousel-3d-body { overflow-x: hidden; }

.carousel-3d { position: relative; width: 60%; height: 400px; margin: 80px auto; -webkit-perspective: 1000px; perspective: 1000px; } .carousel-3d .carousel-3d-inner { position: absolute; width: 100%; height: 100%; -webkit-transform: translateZ(-288px); transform: translateZ(-288px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; -o-transition: transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; } .carousel-3d .carousel-3d-item { position: absolute; width: 190px; height: 120px; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s, -webkit-transform 1s; } .carousel-3d .carousel-3d-item img { width: 100% !important; height: 100% !important; -o-object-fit: cover !important; object-fit: cover !important; } .carousel-3d .carousel-3d-controls { position: absolute; left: 0; top: -80px; width: 100%; height: 100%; text-align: center; } .carousel-3d .carousel-3d-controls a { width: 30px; height: 30px; text-align: center; font-size: 26px; }

@media (max-width: 768px) { .carousel-3d { -webkit-perspective: 200px; perspective: 200px; } .carousel-3d .carousel-3d-item { position: absolute; width: 95px; height: 60px; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s, -webkit-transform 1s; }

JS -->

/* mdbCarousel 3d */(function ($) {

$.fn.mdbCarousel3d = function(options) { let settings = $.extend({ < /* my text editor indicates an error here, I do not understand JS */ vertical: false, interval: 5000, autoplay: true }, options);

let $carousel = $(this);
let $carouselInner = $(this).find('.carousel-3d-inner');
let $items = $carouselInner.find('.carousel-3d-item');
let cellCount = $items.length;
let selectedIndex = 0;
let rotateFn = settings.vertical ? 'rotateX' : 'rotateY';
let radius, theta;

function rotateCarousel() {
  let angle = theta * selectedIndex * -1;
  $carouselInner.css({'transform': 'translateZ(' + -radius + 'px) ' + 
    rotateFn + '(' + angle + 'deg)'});
}

let $prevButton = $(this).find('.prev-btn');
$prevButton.on('click', function() {
  clearInterval(autoRotate);
  selectedIndex--;
  rotateCarousel();
  if (settings.autoplay) autoRotate = setInterval(next,settings.interval);
});

let $nextButton = $(this).find('.next-btn');
$nextButton.on('click', function() {
  clearInterval(autoRotate);
  next();
  if (settings.autoplay) autoRotate = setInterval(next,settings.interval);
});

function next() {
  selectedIndex++;
  rotateCarousel();
}

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

function changeCarousel() {
  theta = 360 / cellCount;
  let cellWidth = $carouselInner.outerWidth();
  let cellHeight = $carouselInner.outerHeight();
  let cellSize = settings.vertical ? cellHeight : cellWidth;
  radius = Math.round( ( cellSize / 2) / Math.tan( Math.PI / cellCount ) );
  for ( let i=0; i < $items.length; i++ ) {
    let cell = $items[i];
    if ( i < cellCount ) {
      // visible cell
      cell.style.opacity = 1;
      let cellAngle = theta * i;
      cell.style.transform = rotateFn + '(' + cellAngle + 'deg) translateZ(' + radius + 'px)';
    } else {
      // hidden cell
      cell.style.opacity = 0;
      cell.style.transform = 'none';
    }
  }
  rotateCarousel();
}

function setCarousel() {
  rotateFn = settings.vertical ? 'rotateX' : 'rotateY';
  let carouselHeight = $carousel.outerHeight();
  let carouselWidth = $carousel.outerWidth();
  $items.css({'height': carouselHeight - 50});
  $items.css({'width': carouselWidth - 50});
  changeCarousel();
}

// set initials
setCarousel();

let autoRotate;
if (settings.autoplay) autoRotate = setInterval(next,settings.interval);

$(window).resize(setCarousel);

};

$('.navbar-collapse a').click(function(){ $(".navbar-collapse").collapse('hide');});

}(jQuery));