This experiment combines the Elementor ‘Image Carousel’ block (which is powered by Swiper.js JavaScript library), the Greensock Animation Platform (GSAP) and the GSAP add-on called ScrollTrigger.
OVERVIEW: The main section is two columns each 50% wide and 100% screen height. The Image Carousel block occupies the left column and is set to stick to the top of the screen. The right column is scrollable and as each new section reaches the vertical middle of the screen, GSAP (ScrollTrigger) changes the left column slide in focus.
Scroll down to see the result and beneath are below.
Slide 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Slide 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Slide 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Slide 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Build process
- Add a section to the page and then add two columns inside that.
- In the left column, add an Image Carousel block and add a class of ‘full-height-slides’. Additionally, set the Image Carousel block to be Sticky top (Advanced > Motion Effects) and toggle ‘Stay in column’ to On.
- With the Image Carousel still selected, add some CSS via the Advanced > Custom CSS so the images will occupy the full left column width and height.
selector img { width: 100%; height: 100dvh; object-fit: cover; display: block; }Additionally, object-fit allows the images to fill the whole carousel space and soft crop without stretching the images.
- Select the right column and add an id of ‘full-height-sections’.
- Add your sections inside the right column and to each of them, add a class of ‘full-height-section’. Optionally, add a min-height of 100vh. In my example above, I also used the Layout > Justify Content to vertically align the section content to the vertical middle.
- Add your images to the carousel and make sure they are in order. The first images should match the content for the first right side section, the second image to the second section and so on.
- Add your content to the right sections.
- Add the links to the GSAP and the JavaScript to power the scrolling transitions. (See the Code section below)
Code
- Add the following links to the page.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>This can be achieved by using either Elementor (Elementor > Custom Code) or a snippet library plugin like Advanced Scripts (my preferred choice), WPCode, Code Snippets or another you may have lying around.
Additionally, set the scripts to only load on the page you are using theSlideshow Trigger so not to load them on every page. - In the same code block below the two script tags, add the following JavaScript:
<script> window.addEventListener('load', function() { const swiperElement = document.querySelector('.elementor-image-carousel-wrapper.swiper'); if (!swiperElement || !swiperElement.swiper) { console.error('Swiper instance not found.'); return; } const swiperInstance = swiperElement.swiper; const sections = document.querySelectorAll('#full-height-sections .full-height-section'); gsap.utils.toArray(sections).forEach((section, index) => { ScrollTrigger.create({ trigger: section, start: "top center", // Adjust start to when the section reaches the centre of the viewport onEnter: () => { swiperInstance.slideTo(index+1); }, onEnterBack: () => { swiperInstance.slideTo(index+1); } }); }); }); </script> - Save your script, go back to the Slideshow page, refresh and scroll down to see the result.
