Make this Mega Slider: Stunning Split-screen Slideshow in WordPress Elementor

Today, we’re making a stunning split-screen Mega Slider.

We will use Elementor free version. No Elementor pro. No extra plugins. Just clean HTML with CSS and JavaScript. It is also fully responsive.

So feel free to use it on your landing page.

This Mega Slider grabs attention instantly. The screen splits into two synced sliders. Images slide smoothly in opposite directions. Bold text fades in the center, tying it together.

Visitors feel captivated by the cinematic motion. The mirrored effect leaves a lasting impression. It’s modern, dynamic, and unforgettable. Use it in your hero section for a bold first impression. Add it to portfolio pages to showcase visuals. Perfect for product landing pages to highlight features.

Here are the steps to integrate it into your Elementor website:

Create three HTML blocks.
Paste the separate codes in each.

HTML

<div class="wputopia-split-slideshow">
	<div class="wputopia-slideshow">
	  <div class="wputopia-slider">
        <div class="wputopia-item">
            <img src="https://picsum.photos/1200/800?random=1" alt="Innovative" />
        </div>
        <div class="wputopia-item">
            <img src="https://picsum.photos/1200/800?random=2" alt="Creative" />
        </div>
        <div class="wputopia-item">
            <img src="https://picsum.photos/1200/800?random=3" alt="Dynamic" />
        </div>
        <div class="wputopia-item">
            <img src="https://picsum.photos/1200/800?random=4" alt="Visionary" />
        </div>
	  </div>
	</div>
	<div class="wputopia-slideshow-text">
        <div class="wputopia-item">Innovative</div>
        <div class="wputopia-item">Creative</div>
        <div class="wputopia-item">Dynamic</div>
        <div class="wputopia-item">Visionary</div>
	</div>
  </div>
  
  <a class="wputopia-the-most" target="_blank" href="https://wputopia.com">
	<img src="https://i.ibb.co/Mxts6c23/wputopia-logo-new-png.png" alt="Award Badge">
  </a>

CSS

<style>
	.wputopia-split-slideshow {
	  position: relative;
	  width: 100vw;
	  height: 100vh;
	  overflow: hidden;
	  background: #110101;
	  font-family: 'Roboto', sans-serif;
	}
	
	.wputopia-slideshow {
	  position: absolute;
	  z-index: 1;
	  top: 0;
	  left: 0;
	  width: 100vw;
	  height: 100vh;
	  overflow: hidden;
	}
	
	.wputopia-slideshow .wputopia-slider {
	  width: 100vw;
	  height: 100vw;
	  z-index: 2;
	}
	
	.wputopia-slideshow .wputopia-slider * {
	  outline: none;
	}
	
	.wputopia-slideshow .wputopia-slider .wputopia-item {
	  height: 100vh;
	  width: 100vw;
	  position: relative;
	  overflow: hidden;
	  border: none;
	}
	
	.wputopia-slideshow .wputopia-slider .wputopia-item .wputopia-text {
	  display: none;
	}
	
	.wputopia-slideshow .wputopia-slider .wputopia-item img {
	  min-width: 101%;
	  min-height: 101%;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}
	
	.wputopia-slideshow .slick-dots {
	  position: fixed;
	  z-index: 100;
	  width: 40px;
	  height: auto;
	  bottom: auto;
	  top: 50%;
	  right: 0;
	  transform: translateY(-50%);
	  left: auto;
	  color: #fff;
	  display: block;
	}
	
	.wputopia-slideshow .slick-dots li {
	  display: block;
	  width: 100%;
	  height: auto;
	}
	
	.wputopia-slideshow .slick-dots li button {
	  position: relative;
	  width: 20px;
	  height: 15px;
	  text-align: center;
	}
	
	.wputopia-slideshow .slick-dots li button:before {
	  content: '';
	  background: #fff;
	  color: #fff;
	  height: 2px;
	  width: 20px;
	  border-radius: 0;
	  position: absolute;
	  top: 50%;
	  right: 0;
	  left: auto;
	  transform: translateY(-50%);
	  transition: all .3s ease-in-out;
	  opacity: 0.6;
	}
	
	.wputopia-slideshow .slick-dots li.slick-active button:before {
	  width: 40px;
	  opacity: 1;
	}
	
	.wputopia-slideshow.wputopia-slideshow-right {
	  left: 0;
	  z-index: 1;
	  width: 50vw;
	  pointer-events: none;
	}
	
	.wputopia-slideshow.wputopia-slideshow-right .wputopia-slider {
	  left: 0;
	  position: absolute;
	}
	
	.wputopia-slideshow-text {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  z-index: 100;
	  font-size: 80px;
	  width: 100vw;
	  text-align: center;
	  color: #fff;
	  font-family: 'Roboto Condensed', sans-serif;
	  font-weight: 100;
	  pointer-events: none;
	  text-transform: uppercase;
	  letter-spacing: 20px;
	  line-height: 0.8;
	}
	
	@media (max-width: 767px) {
	  .wputopia-slideshow-text {
		font-size: 40px;
	  }
	}
	
	.wputopia-the-most {
	  position: fixed;
	  z-index: 1;
	  bottom: 0;
	  left: 0;
	  width: 50vw;
	  max-width: 200px;
	  padding: 10px;
	}
	
	.wputopia-the-most img {
	  max-width: 100%;
	}
  </style>

JS

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
   <script src="https://unpkg.com/wordpress-dev-necessary/dist/necessary.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:100,300" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300" rel="stylesheet">
  <script>
	(function() {
	  // Initialize variables
	  var $slider = $('.wputopia-slideshow .wputopia-slider'),
		  maxItems = $('.wputopia-item', $slider).length,
		  dragging = false,
		  tracking,
		  rightTracking;
	  
	  // Clone slideshow for right side and modify it
	  $sliderRight = $('.wputopia-slideshow').clone().addClass('wputopia-slideshow-right').appendTo($('.wputopia-split-slideshow'));
	  
	  // Reverse items in the right slider
	  rightItems = $('.wputopia-item', $sliderRight).toArray();
	  reverseItems = rightItems.reverse();
	  $('.wputopia-slider', $sliderRight).html('');
	  for (i = 0; i < maxItems; i++) {
		$(reverseItems[i]).appendTo($('.wputopia-slider', $sliderRight));
	  }
	  
	  // Initialize left slideshow
	  $slider.addClass('wputopia-slideshow-left');
	  $('.wputopia-slideshow-left').slick({
		vertical: true,
		verticalSwiping: true,
		arrows: false,
		infinite: true,
		dots: true,
		speed: 1000,
		cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
	  }).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
		// Synchronize right slider and text with left slider
		if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) {
		  $('.wputopia-slideshow-right .wputopia-slider').slick('slickGoTo', -1);
		  $('.wputopia-slideshow-text').slick('slickGoTo', maxItems);
		} else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) {
		  $('.wputopia-slideshow-right .wputopia-slider').slick('slickGoTo', maxItems);
		  $('.wputopia-slideshow-text').slick('slickGoTo', -1);
		} else {
		  $('.wputopia-slideshow-right .wputopia-slider').slick('slickGoTo', maxItems - 1 - nextSlide);
		  $('.wputopia-slideshow-text').slick('slickGoTo', nextSlide);
		}
	  }).on("mousewheel", function(event) {
		// Handle mouse wheel navigation
		event.preventDefault();
		if (event.deltaX > 0 || event.deltaY < 0) {
		  $(this).slick('slickNext');
		} else if (event.deltaX < 0 || event.deltaY > 0) {
		  $(this).slick('slickPrev');
		}
	  }).on('mousedown touchstart', function(){
		// Track mouse/touch down
		dragging = true;
		tracking = $('.slick-track', $slider).css('transform');
		tracking = parseInt(tracking.split(',')[5]);
		rightTracking = $('.wputopia-slideshow-right .slick-track').css('transform');
		rightTracking = parseInt(rightTracking.split(',')[5]);
	  }).on('mousemove touchmove', function(){
		// Handle dragging synchronization between sliders
		if (dragging) {
		  newTracking = $('.wputopia-slideshow-left .slick-track').css('transform');
		  newTracking = parseInt(newTracking.split(',')[5]);
		  diffTracking = newTracking - tracking;
		  $('.wputopia-slideshow-right .slick-track').css({'transform': 'matrix(1, 0, 0, 1, 0, ' + (rightTracking - diffTracking) + ')'});
		}
	  }).on('mouseleave touchend mouseup', function(){
		// End dragging
		dragging = false;
	  });
	  
	  // Initialize right slideshow
	  $('.wputopia-slideshow-right .wputopia-slider').slick({
		swipe: false,
		vertical: true,
		arrows: false,
		infinite: true,
		speed: 950,
		cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
		initialSlide: maxItems - 1
	  });
	  
	  // Initialize text slideshow
	  $('.wputopia-slideshow-text').slick({
		swipe: false,
		vertical: true,
		arrows: false,
		infinite: true,
		speed: 900,
		cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
	  });
	})();
  </script>

That’s it. Easy-peasy.

If you like it, don’t forget to like and comment, so I can send you the file.