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-Auto-Gallery-Parent
Reboot-Auto-Gallery
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 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;
}
/*ANIMATION*/
.Reboot-Auto-Gallery{
/*Duration Control*/
animation: AutoGalleryReboot 20s linear infinite;
}
@keyframes AutoGalleryReboot{
0%
{
transform: perspective(1000px) rotateY(0deg);
}
100%
{
transform: perspective(1000px) rotateY(360deg);
}
}
/*MOBILE*/
@media (max-width:767px){
.Reboot-Auto-Gallery-Parent {
/*Scale Control*/
transform: scale(0.65)!important;
}
}
The Following code goes into the HTML widget css:
<script>
var rebootJ = jQuery
rebootJ(document).ready(function(){
var AutoGal = 'Reboot-Auto-Gallery'
rebootJ('.' + AutoGal).each(function(){
var rebootautogalcells = rebootJ(this).find('.elementor-widget-image'),
rebootautocellsCount = rebootautogalcells.length
rebootautogalcells.each(function(rebootCurrentCellAuto){
rebootJ(this).css('transform', 'rotateY(' + rebootCurrentCellAuto*360/rebootautocellsCount + 'deg) translateZ(calc(' + ((rebootautocellsCount +1) * 31 + rebootautocellsCount*1) + 'px))')
})
})
})
</script>