Creating Amazing Hero Section with Auto-Scrolling Images | Elementor Tutorial!

    

<style>
@media (max-width: 1024px) {
  .bg-gallery .gallery-item {
    max-width: 33.3333% !important;
  }
}
@media (max-width: 767px) {
  .bg-gallery .gallery-item {
    max-width: 50% !important;
  }
}
</style>
<script>
jQuery(document).ready(function($) {

    if (typeof elementor !== "undefined" && elementor.isEditMode()) return;

    const $wrapper = $('.bg-gallery');
    const $gallery = $wrapper.find('.gallery');

    if (!$gallery.length) return;

    // Clone items for infinite loop
    const $items = $gallery.find('.gallery-item').clone();
    $gallery.append($items);

    let scrollPos = 0;
    const speed = 0.5;
    const galleryHeight = $gallery.height() / 2;

    function scrollGallery() {
        scrollPos += speed;
        if (scrollPos >= galleryHeight) scrollPos = 0;
        $gallery.css('transform', `translateY(-${scrollPos}px)`);
        requestAnimationFrame(scrollGallery);
    }
    scrollGallery();
});
</script>