So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
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!
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 Scene Container css:
.Reboot-Auto-Gallery-Parent {
position: relative; /* Ensures proper positioning context */
display: flex;
}
The Following code goes into the Gallery Container css:
.Reboot-Auto-Gallery{
transform-style: preserve-3d;
}
selector .elementor-widget-image{
position: absolute;
transform-origin: center;
transform-style: preserve-3d;
-webkit-box-reflect: below 0px linear-gradient(to bottom ,transparent 65%, rgba(0, 0, 0, 0.4));
}
selector .Reboot-Auto-Gallery img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/*MOBILE*/
@media (max-width:767px){
.Reboot-Auto-Gallery-Parent {
/*Scale Control*/
transform: scale(0.65);
}
}
The Following code goes into the HTML widget css:
<script>
var rebootJ = jQuery;
rebootJ(document).ready(function () {
var AutoGal = 'Reboot-Auto-Gallery';
var currentAngle = 0;
var gallery = rebootJ('.' + AutoGal);
var cells = gallery.find('.elementor-widget-image');
var totalCells = cells.length;
var angleStep = 360 / totalCells;
// Position images around the Y-axis
cells.each(function (index) {
rebootJ(this).css('transform', 'rotateY(' + (index * angleStep) + 'deg) translateZ(calc(' + ((totalCells + 1) * 31 + totalCells * 1) + 'px))');
});
// Apply Initial Transform
gallery.css({
'transform': 'perspective(1000px) rotateY(0deg)',
'transition': 'transform 0.8s ease-in-out'
});
// Set initial background
updateBackground();
function rotateGallery(direction) {
if (direction === 'next') {
currentAngle -= angleStep;
} else {
currentAngle += angleStep;
}
gallery.css('transform', 'perspective(1000px) rotateY(' + currentAngle + 'deg)');
// Update background after rotation
setTimeout(updateBackground, 400);
}
function updateBackground() {
// Calculate which image is front-facing based on current angle
var normalizedAngle = ((currentAngle % 360) + 360) % 360;
// Reverse the index calculation to match the actual front-facing image
var frontIndex = Math.round(-normalizedAngle / angleStep) % totalCells;
if (frontIndex < 0) frontIndex += totalCells;
// Get the front-facing image's source
var frontImage = cells.eq(frontIndex).find('img');
var imageUrl = frontImage.attr('src');
// Apply to parent container
rebootJ('.reboot-3d-gallery-scene').css({
'background-image': 'url(' + imageUrl + ')',
'background-size': 'cover',
'background-position': 'center',
'transition': 'background-image 0.4s ease-in-out'
});
}
// Button click events
rebootJ('#nextBtn').click(function () {
rotateGallery('next');
});
rebootJ('#prevBtn').click(function () {
rotateGallery('prev');
});
});
</script>