How To Make A 3D Carousel For Products

Thumbnail with a man in a dark jacket on the left over a purple glow with the partly hidden heading Management: Where Talent Meets Opportunity behind him, and a large slanted orange side menu panel listing Home, About Us, Services, Our Work, Careers and Contact Us with Facebook, YouTube, Instagram and LinkedIn links, a yellow CLOSE button at the top right, a magenta circle with a white list icon at the lower left, and model portrait cards visible behind the panel

The Creative Overlay Menu in Elementor — A Full-Screen Menu That Shows Off

Reboot Addons' Creative Overlay Menu: a full-screen Elementor menu with kicker, headline, CTA and eleven animated surface options. No custom ...

A web-design studio desk with a laptop and monitors showing website layouts and design tools — the kind of monthly managed-build behind the R749 to R1999 plans.

R749 vs R999 vs R1999 — What Each Website Package Actually Gets You

R749, R999, R1499 or R1999 a month — what each Reboot Websites package actually builds, and why the gap between ...

Tall parallax website demo screenshot for Apple Watch Ultra showing a hero with the heading Apple Watch Ultra: Your Companion for Every Adventure over a close up of the watch face on a wrist, a dark section with the heading A REVOLUTIONARY BLEND OF CUTTING-EDGE TECHNOLOGY AND RUGGED DURABILITY FOR THE MODERN EXPLORER beside a floating watch band image, a section of layered watch photos with translucent highlight text, and a flat lay of the watch with an orange band beside a succulent and a Bullet planner notebook, all inside the WordPress admin bar

Advanced Text FX in Elementor — 58 Text Effects in One Widget

Advanced Text FX gives you 58 text-in effects in one Elementor widget — scramble, typewriter, glitch, neon, and a whole ...

Thumbnail with a man in a dark shirt on the right, a fan of eight portrait cards of women behind him, large distressed red and orange CARD EFFECT lettering across the bottom, a magenta circle with a white list icon at the lower right, and a blurred purple radial background

Elementor Card Widgets without Custom JS — The Free Tier

Seven content widgets plus all six form stylers that build card effects, carousels, and styled forms without writing JS. Widget ...

Showing Slide 1 of 5

So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!

Alternatively

You can download the complete template here

The Following are the css class names I used in the tutorial:

				
					reboot-3d-gallery-scene

Reboot-Auto-Gallery-Parent 

Reboot-Auto-Gallery


****Button IDs****

prevBtn

nextBtn

The Following code goes into the Scene Container css:

				
					.reboot-3d-gallery-scene {

    overflow: hidden; /* Ensure the pseudo-element stays within bounds */
}

.reboot-3d-gallery-scene::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(10px)!important;
    -webkit-filter: blur(8px);
    
    z-index:0 ; /* Place it behind the content */
}

The Following code goes into the Gallery Container css:

				
					.Reboot-Auto-Gallery-Parent  {
    position: relative; /* Ensures proper positioning context */
    display: flex;
}

The Following code goes into the Products widget css:

				
					/*MOBILE*/
@media (max-width:767px){
.Reboot-Auto-Gallery-Parent {
    /*Scale Control*/
    transform: scale(0.65);
}
}

.woocommerce-loop-product__buttons {


    z-index: 10;
    pointer-events: auto;
}
.product {
    width: 300px !important;   /* Match the JS dimensions */
    height: auto !important;  /* Match the JS dimensions */

}

The Following code goes into the HTML widget css:

				
					<script>
jQuery(document).ready(function($) {
    var gallery = $('.products'); // Target the products container
    var productItems = gallery.find('li.product');
    var totalProducts = productItems.length;
    var angleStep = 360 / totalProducts;
    var currentAngle = 0;
    



    // Set up parent container for 3D
    gallery.css({
        'position': 'relative',
        'height': '500px',
        'transform-style': 'preserve-3d',
        'transform': 'perspective(1000px)',
        'transition': 'transform 0.8s ease-in-out'
    });
    
    // Position each product in 3D space
    productItems.each(function(index) {
        $(this).css({
            'position': 'absolute',
            'left': '50%',
            'top': '50%',
            'margin-left': '-150px',
            'margin-top': '-150px',
            'width': '300px',
            'height': '300px',
            'transform-style': 'preserve-3d',
            'transform': 'rotateY(' + (index * angleStep) + 'deg) translateZ(400px)'
        });
    });
    
   // Set initial background on page load

var firstImageUrl = 
               productItems.first().find('img').attr('src').replace('-300x300', ''); 
$('.reboot-3d-gallery-scene').css({
    'background-image': 'url(' + firstImageUrl + ')',
    'background-size': 'cover',
    'background-position': 'center'
});
    // Add button event listeners
    $(document).on('click', '#nextBtn', function() {
        currentAngle -= angleStep;
        gallery.css('transform', 'perspective(1000px) rotateY(' + currentAngle + 'deg)');
    });
    
    $(document).on('click', '#prevBtn', function() {
        currentAngle += angleStep;
        gallery.css('transform', 'perspective(1000px) rotateY(' + currentAngle + 'deg)');
    });
    
function updateBackground() {
    // Calculate which product is front-facing based on current angle
    var normalizedAngle = ((currentAngle % 360) + 360) % 360;
    var frontIndex = Math.round(-normalizedAngle / angleStep) % totalProducts;
    if (frontIndex < 0) frontIndex += totalProducts;
     
     productItems.css('z-index', '1');

    // Bring the front product to the top
    var frontProduct = productItems.eq(frontIndex);
    frontProduct.css('z-index', '10'); // Higher value to ensure it's clickable
    // Get the front-facing product's image
    var frontProduct = productItems.eq(frontIndex);
    var imageUrl = frontProduct.find('img').attr('data-src') || 
               frontProduct.find('img').attr('data-large_image') || 
               frontProduct.find('img').attr('src').replace('-300x300', ''); 
    // Apply to parent container
    $('.reboot-3d-gallery-scene').css({
        'background-image': 'url(' + imageUrl + ')',
        'background-size': 'cover',
        'background-position': 'center',
        'transition': 'background-image 0.4s ease-in-out'
    });
}

// Call after rotation
$('#nextBtn, #prevBtn').on('click', function() {
    setTimeout(updateBackground, 400);
});
});
</script>