Elementor

[Thumbnail Slider]SmoothZoom Image Carousel in Elementor

Victor

May 21, 2025

Today, we’re making a SmoothZoom Thumbnail Slider.

As usual, we will use Elementor free version. No Elementor pro. No extra plugins. Just clean HTML with CSS and JavaScript. No worries about bloating your site due to heavy loads.

It is also fully responsive. So feel free to use it on your landing page.

The slider transitions smoothly between vibrant images, grabbing attention instantly. Each click reveals a new visual, creating excitement and curiosity. The sleek design and subtle animations leave a lasting impression, making your brand unforgettable.

Add it to your hero section for a bold first impression. Perfect for showcasing products, promotions, or portfolio highlights. Use it in blog headers or service pages to enhance visual appeal and engage visitors effectively.

Here are the steps to use it on your Elementor website:

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

HTML

<div class="wputopia-slider-container">
  <div class="wputopia-wrapper" style="max-width: 750px; margin: 0 auto;">
    <div class="wputopia-slider">
      <input type="radio" name="wputopia_slide_switch" id="wputopia-id1"/>
      <label for="wputopia-id1">
        <img src="https://media.wputopia.com/storage/2025/05/21052105/kongfu-panda.webp" width="100"/>
      </label>
      <img src="https://media.wputopia.com/storage/2025/05/21052105/kongfu-panda.webp"/>
      
      <input type="radio" name="wputopia_slide_switch" id="wputopia-id2" checked="checked"/>
      <label for="wputopia-id2">
        <img src="https://media.wputopia.com/storage/2025/05/21052156/toys.webp" width="100"/>
      </label>
      <img src="https://media.wputopia.com/storage/2025/05/21052156/toys.webp"/>
      
      <input type="radio" name="wputopia_slide_switch" id="wputopia-id3"/>
      <label for="wputopia-id3">
        <img src="https://media.wputopia.com/storage/2025/05/21052243/wali.webp" width="100"/>
      </label>
      <img src="https://media.wputopia.com/storage/2025/05/21052243/wali.webp"/>
      
      <input type="radio" name="wputopia_slide_switch" id="wputopia-id4"/>
      <label for="wputopia-id4">
        <img src="https://media.wputopia.com/storage/2025/05/21052335/baloon.webp" width="100"/>
      </label>
      <img src="https://media.wputopia.com/storage/2025/05/21052335/baloon.webp"/>
      
      <input type="radio" name="wputopia_slide_switch" id="wputopia-id5"/>
      <label for="wputopia-id5">
        <img src="https://media.wputopia.com/storage/2025/05/21052419/cars.webp" width="100"/>
      </label>
      <img src="https://media.wputopia.com/storage/2025/05/21052419/cars.webp"/>
    </div>
  </div>
</div>

CSS

<style>
/* Outer container for complete isolation */
.wputopia-slider-container {
display: block;
  margin: 2em 0;
  padding: 1em 0 4em;
  position: relative;
  clear: both;
  background: #ccc;
}

/* Reset existing styles */
.wputopia-wrapper * {margin: 0; padding: 0;}

.wputopia-slider {
  width: 100%;
  max-width: 640px;
  position: relative;
  padding-top: 50%;
  margin: 2em auto;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}

@container (max-width: 750px) {
  .wputopia-slider {
    padding-top: 60%;
  }
}

.wputopia-slider > img {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}

.wputopia-slider input[name='wputopia_slide_switch'] {
  display: none;
}

.wputopia-slider label {
  margin: 18px 0 0 18px;
  border: 3px solid #999;
  float: left;
  cursor: pointer;
  transition: all 0.5s;
  opacity: 0.6;
}

.wputopia-slider label img {
  display: block;
}

.wputopia-slider input[name='wputopia_slide_switch']:checked + label {
  border-color: #666;
  opacity: 1;
}

.wputopia-slider input[name='wputopia_slide_switch'] ~ img {
  opacity: 0;
  transform: scale(1.1);
}

.wputopia-slider input[name='wputopia_slide_switch']:checked + label + img {
  opacity: 1;
  transform: scale(1);
}
</style>

<script src="https://unpkg.com/wordpress-dev-necessary/dist/necessary.min.js"></script>
<script type="text/javascript">
//<![CDATA[
(function() {
  // Function to adjust thumbnail sizes based on wrapper width
  function adjustThumbnailSizes() {
    var wrapper = document.querySelector('.wputopia-wrapper');
    if (!wrapper) return;
    
    var wrapperWidth = wrapper.offsetWidth;
    var totalThumbnails = document.querySelectorAll('.wputopia-slider label img').length;
    var marginSize = wrapperWidth < 480 ? 8 : 18;
    
    // Simple calculation for thumbnail width
    var percentageWidth = wrapperWidth < 480 ? 0.12 : 0.15;
    var minWidth = wrapperWidth < 480 ? 40 : 60;
    var thumbnailWidth = Math.min(Math.max(wrapperWidth * percentageWidth, minWidth), 100);
    
    var thumbnailImages = document.querySelectorAll('.wputopia-slider label img');
    thumbnailImages.forEach(function(img) {
      img.setAttribute('width', Math.floor(thumbnailWidth));
    });

    // Adjust margins
    var labels = document.querySelectorAll('.wputopia-slider label');
    labels.forEach(function(label) {
      if (wrapperWidth < 480) {
        label.style.margin = '18px 0 0 8px';
      } else {
        label.style.margin = '18px 0 0 18px';
      }
    });
  }

  // Function to check if an element is checked
  function isChecked(element) {
    if (element.checked) {
      return true;
    }
    return false;
  }

  // Function to handle radio button changes
  function handleRadioChange(event) {
    var radio = event.target;
    if (isChecked(radio)) {
      var allImages = document.querySelectorAll('.wputopia-slider > img');
      allImages.forEach(function(img) {
        img.style.opacity = '0';
        img.style.transform = 'scale(1.1)';
      });
      
      var selectedImage = radio.nextElementSibling.nextElementSibling;
      if (selectedImage) {
        selectedImage.style.opacity = '1';
        selectedImage.style.transform = 'scale(1)';
      }
    }
  }

  // Add event listeners to all radio buttons
  var radioButtons = document.querySelectorAll('.wputopia-slider input[type="radio"]');
  radioButtons.forEach(function(radio) {
    radio.addEventListener('change', handleRadioChange);
  });

  // Initial adjustment and listen for window resize
  adjustThumbnailSizes();
  window.addEventListener('resize', adjustThumbnailSizes);
})();
//]]>
</script>

That’s it. Easy-peasy.

If you like it, don’t forget to like and comment