3D Carousel Stack Gallery – Advanced Media Gallery

Here is an example of a complete settings configuration for the 3D Carousel Stack Gallery - Advanced Media Gallery:

Main Settings

gallerySettings: {
  selector: '#gallery', // The container element for the gallery
  slides: [
    {
      // Slide 1
      media: [
        {
          src: 'https://via.placeholder.com/300x200',
          type: 'image'
        },
        {
          src: 'https://via.placeholder.com/600x400',
          type: 'image'
        }
      ],
      link: 'https://www.example.com',
      description: 'Slide 1 description'
    },
    {
      // Slide 2
      media: [
        {
          src: 'https://via.placeholder.com/300x200',
          type: 'image'
        },
        {
          src: 'https://via.placeholder.com/600x400',
          type: 'image'
        }
      ],
      link: 'https://www.example.com',
      description: 'Slide 2 description'
    }
  ],
  carousel: {
    direction: 'horizontal', // or 'vertical'
    loop: true,
    autoplay: true,
    autoplaySpeed: 3000
  }
},

Carousel Options

carouselSettings: {
  animationSpeed: 500,
  easing: 'ease-out',
  infinite: true,
  pauseOnHover: false,
  showArrows: true,
  showDots: true,
  showBullets: true,
  responsive: [
    {
      breakpoint: 992,
      settings: {
        arrows: false,
        dots: true,
        bullets: false
      }
    }
  ]
},

Media Options

mediaSettings: {
  image: {
    thumbnailWidth: 100,
    thumbnailHeight: 100,
    imageLoading: true,
    imageError: true
  },
  video: {
    autoplay: true,
    muted: false
  },
  iframe: {
    width: '100%',
    height: '100%',
    scrolling: 'no'
  }
},

Layout Options

layoutSettings: {
  stackSize: 4,
  stackSpacing: 20,
  padding: 20,
  gutter: 20
},

Other Options

otherSettings: {
  customClass: 'custom-class',
  customStyle: {
    'background-color': 'red'
  }
}

Here are the features of the 3D Carousel Stack Gallery - Advanced Media Gallery extracted from the content:

1. Update:
   • Add new option "defaultCategory" (7/12/2023)
   • Optimize sample assets, add link media panel in Designer (3/12/2020)
   • Add "Carousel Stack Designer", advanced admin backend allows uploading, editing and configuring the gallery using widgets and user interfaces (15/11/2020)
   • New feature Markup item and embedded link (17/6/2020)
2. Introduction:
   • 3D photo carousel application with classic carousel design improved with emphasis on centered item's position
   • Various options to modify carousel look and feel like carousel radius, shifting distance, and item reflection
3. High Performance:
   • Powered by CSS3 "transform" property for hardware-accelerated rendering and animations
4. Modular Design:
   • Application components designed and split into separate modules with different responsibilities
   • Effortlessly swap out one component with another to modify app functionalities
5. Flexibility:
   • Various controls, parameters, and configuration options to make the application easy to customize and extend
6. Multiple Screen Supported:
   • Adapts to each screen size while maintaining elegant design and user experience
7. Full Features:
   • Over 50 configuration options
   • Customize look and feel variables like carousel radius and shifting distance
   • Easily create slideshow using autoplay option
   • Default dark theme and light theme
   • Multi-media support: photo, audio, video, ajax, inline, embedded iframe
   • Advanced full-fledged 2D gallery mode
   • Multiple Controls: keyboard and mouse
   • Multiple Screen support: mobile, tablet, desktop
   • Multi-categories support
   • Fullscreen support
   • Full width support
   • High-quality Code Commenting
   • High-quality Documentation
   • Custom item shadow supported using CSS box-shadow property
   • Custom item shape using ovalShape and roundCorner options
   • animejs as core animation engine
   • Advanced build system with Grunt
   • CSS preprocessor using SASS and Compass framework
   • Multiple SASS variables offering extreme flexibility to customize application look and feel
   • HTML preprocessor using Pug templates
   • Advanced MediaViewer component
   • Custom components: ItemTitle, ItemDescription, ButtonList, ButtonNavigator, GalleryScrollbar
   • videojs as main video playback engine
   • audio5js as main audio playback engine
   • Multiple examples files provided
   • Lightweight: only 26KB in gzip format