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 X-axis
cells.each(function (index) {
rebootJ(this).css('transform', 'rotateX(' + (index * angleStep) + 'deg) translateZ(calc(' + ((totalCells + 1) * 31 + totalCells * 1) + 'px))');
});
// Apply Initial Transform
gallery.css({
'transform': 'perspective(1000px) rotateX(0deg)',
'transition': 'transform 0.8s ease-in-out'
});
// Set initial background
updateBackground();
function rotateGallery(direction) {
if (direction === 'down') { // Changed from 'next' to 'down'
currentAngle -= angleStep;
} else {
currentAngle += angleStep;
}
gallery.css('transform', 'perspective(1000px) rotateX(' + currentAngle + 'deg)');
setTimeout(updateBackground, 400);
}
function updateBackground() {
var normalizedAngle = ((currentAngle % 360) + 360) % 360;
var frontIndex = Math.round(-normalizedAngle / angleStep) % totalCells;
if (frontIndex < 0) frontIndex += totalCells;
var frontImage = cells.eq(frontIndex).find('img');
var imageUrl = frontImage.attr('src');
rebootJ('.reboot-3d-gallery-scene').css({
'background-image': 'url(' + imageUrl + ')',
'background-size': 'cover',
'background-position': 'center',
'transition': 'background-image 0.4s ease-in-out'
});
}
// Updated button event handlers to match your existing button IDs
rebootJ('#nextBtn').click(function () {
rotateGallery('down'); // This will trigger downward rotation
});
rebootJ('#prevBtn').click(function () {
rotateGallery('up'); // This will trigger upward rotation
});
});
</script>