Elementor

Material Carousel with A Punched-hole Effect

Victor

May 27, 2025

Today, we’re making a material carousel. Use it in your hero section or testimonial area to give your content a material aesthetic

FASHION TRENDS (2025)

Discover the latest styles that define the season with bold designs and vibrant colors.

CAPTURE MOMENTS (Photography)

Showcase stunning visuals with crisp, high-quality images that tell a story.

MUSIC VIBES (Concerts)

Feel the rhythm with immersive visuals that bring performances to life.

CINEMATIC STORIES (Films)

Highlight epic movie moments with a slider that captivates your audience.

LITERARY JOURNEYS (Books)

Promote your stories with a slider that invites readers into new worlds.

TECH INNOVATION (Coding)

Showcase cutting-edge projects with a sleek, modern visual experience.

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 carousel captures a stunning material design, with slides that feel like real cards you can touch. Each slide features a punched-hole effect at the bottom center, adding a playful, physical card-like detail. Soft shadows and rounded edges enhance the 3D material look, while a circular play/pause button and clean navigation icons float over a gradient backdrop. Slides transition every 5 seconds, delivering a seamless, tactile experience.

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

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

HTML

<div class="wputopia-wrapper" style="container-type: inline-size;">
  <div id="wputopia-container">
    <div class="wputopia-content wputopia-active" data-slide="1" data-bg="https://picsum.photos/1920/1080?random=1">
      <div class="wputopia-info-logo"><i class="material-icons">style</i></div>
      <div class="wputopia-info-wrapper">
        <div class="wputopia-slidetitle">FASHION TRENDS <span>(2025)</span></div>
        <p>Discover the latest styles that define the season with bold designs and vibrant colors.</p>
      </div>
      <div class="wputopia-bottom-divider"></div>
    </div>
    <div class="wputopia-content" data-slide="2" data-bg="https://picsum.photos/1920/1080?random=2">
      <div class="wputopia-info-logo"><i class="material-icons">photo_camera</i></div>
      <div class="wputopia-info-wrapper">
        <div class="wputopia-slidetitle">CAPTURE MOMENTS <span>(Photography)</span></div>
        <p>Showcase stunning visuals with crisp, high-quality images that tell a story.</p>
      </div>
      <div class="wputopia-bottom-divider"></div>
    </div>
    <div class="wputopia-content" data-slide="3" data-bg="https://picsum.photos/1920/1080?random=3">
      <div class="wputopia-info-logo"><i class="material-icons">music_note</i></div>
      <div class="wputopia-info-wrapper">
        <div class="wputopia-slidetitle">MUSIC VIBES <span>(Concerts)</span></div>
        <p>Feel the rhythm with immersive visuals that bring performances to life.</p>
      </div>
      <div class="wputopia-bottom-divider"></div>
    </div>
    <div class="wputopia-content" data-slide="4" data-bg="https://picsum.photos/1920/1080?random=4">
      <div class="wputopia-info-logo"><i class="material-icons">movie</i></div>
      <div class="wputopia-info-wrapper">
        <div class="wputopia-slidetitle">CINEMATIC STORIES <span>(Films)</span></div>
        <p>Highlight epic movie moments with a slider that captivates your audience.</p>
      </div>
      <div class="wputopia-bottom-divider"></div>
    </div>
    <div class="wputopia-content" data-slide="5" data-bg="https://picsum.photos/1920/1080?random=5">
      <div class="wputopia-info-logo"><i class="material-icons">book</i></div>
      <div class="wputopia-info-wrapper">
        <div class="wputopia-slidetitle">LITERARY JOURNEYS <span>(Books)</span></div>
        <p>Promote your stories with a slider that invites readers into new worlds.</p>
      </div>
      <div class="wputopia-bottom-divider"></div>
    </div>
    <div class="wputopia-content" data-slide="6" data-bg="https://picsum.photos/1920/1080?random=6">
      <div class="wputopia-info-logo"><i class="material-icons">code</i></div>
      <div class="wputopia-info-wrapper">
        <div class="wputopia-slidetitle">TECH INNOVATION <span>(Coding)</span></div>
        <p>Showcase cutting-edge projects with a sleek, modern visual experience.</p>
      </div>
      <div class="wputopia-bottom-divider"></div>
    </div>
    <div class="wputopia-playbutton">
      <i class="material-icons wputopia-play">play_arrow</i><i class="material-icons wputopia-pause">pause</i>
    </div>
    <div class="wputopia-slide-left"><i class="material-icons">chevron_left</i></div>
    <div class="wputopia-slide-right"><i class="material-icons">chevron_right</i></div>
  </div>
</div>

CSS

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Material+Icons">

<style>
.wputopia-wrapper {
  container-type: inline-size;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

#wputopia-container {
  display: flex;
  height: 500px;
  overflow: hidden;
  background-color: #282828;
  position: relative;
}

#wputopia-container.wputopia-compact .wputopia-content:not(.wputopia-active) {
  width: 0%;
}

.wputopia-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 5px 10px 20px black;
  transform: translate3d(0, 0, 0);
  filter: saturate(50%);
  transition: all 0.5s ease-in-out 0.5s;
  background-size: cover;
  background-position: center;
}

.wputopia-content::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, 0%) scale(0.5);
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0px 5px 1px rgba(0, 0, 0, 0.3) inset;
  border-radius: 50%;
  transition: background-color 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.wputopia-content.wputopia-active {
  width: 1000%;
  filter: saturate(75%);
}

.wputopia-content.wputopia-active::before {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, 0%) scale(1);
}

.wputopia-content:not(.wputopia-active) {
  cursor: pointer;
  width: 100%;
}

.wputopia-info-logo {
  text-align: center;
  font-size: 2em;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 100px;
  transition: all 0.5s ease-in-out;
}

.wputopia-content.wputopia-active .wputopia-info-logo {
  color: white;
  margin-top: 20px;
}

.wputopia-info-wrapper {
  color: white;
  margin: 40px;
  transition: opacity 1s ease-in-out 1s;
}

.wputopia-content:not(.wputopia-active) .wputopia-info-wrapper {
  opacity: 0;
}

.wputopia-slidetitle {
  font-size: 3em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

.wputopia-slidetitle span {
  font-size: 0.25em;
  color: rgba(255, 255, 255, 0.3);
  display: none;
}

@container (max-width: 750px) {
  .wputopia-slidetitle {
    font-size: 2em;
  }
  
  .wputopia-info-wrapper p {
    font-size: 0.9em;
  }
}

.wputopia-playbutton {
  padding: 10px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.wputopia-playbutton i {
  background-color: rgba(255, 255, 255, 0.1);
  font-size: 3em;
  position: absolute;
  top: -15px;
  right: -15px;
  color: white;
  padding: 20px;
  border-radius: 50%;
  text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, text-shadow 0.25s ease-in-out, background-color 0.25s ease-in-out;
}

.wputopia-playbutton:hover i {
  background-color: rgba(255, 255, 255, 0.2);
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.wputopia-playbutton .wputopia-play {
  opacity: 0;
  transform: rotateZ(180deg);
}

.wputopia-playbutton .wputopia-pause {
  opacity: 1;
  transform: rotateZ(0deg);
}

.wputopia-playbutton.wputopia-paused .wputopia-play {
  opacity: 1;
  transform: rotateZ(0deg);
}

.wputopia-playbutton.wputopia-paused .wputopia-pause {
  opacity: 0;
  transform: rotateZ(-180deg);
}

.wputopia-slide-left, .wputopia-slide-right {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  transition: color 0.25s ease-in-out, padding 0.25s ease-in-out, left 0.25s ease-in-out, right 0.25s ease-in-out;
}

.wputopia-slide-left:hover, .wputopia-slide-right:hover {
  color: rgba(255, 255, 255, 0.9);
}

.wputopia-slide-left:hover {
  left: 0px;
}

.wputopia-slide-right:hover {
  right: 0px;
}

.wputopia-slide-left:active, .wputopia-slide-right:active {
  background-color: rgba(255, 255, 255, 0.2);
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}

.wputopia-slide-left i, .wputopia-slide-right i {
  font-size: 5em;
  margin-top: 5px;
}

.wputopia-slide-left {
  left: -10px;
  border-radius: 0px 60px 60px 0px;
}

.wputopia-slide-right {
  right: -10px;
  border-radius: 60px 0px 0px 60px;
}

.wputopia-bottom-divider {
  position: absolute;
  bottom: 50px;
  width: 80%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
}
</style>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://unpkg.com/wordpress-dev-necessary/dist/necessary.min.js"></script>
<script>
//<![CDATA[
$(document).ready(function() {
  var slideInterval = 5000;
  var contentAmt = $("#wputopia-container .wputopia-content").length;
  var loop = true;
  
  $(".wputopia-content").each(function() {
    var bg_img = $(this).attr("data-bg");
    $(this).css({
      "background" : "linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2)), url(" + bg_img + ")"
    });
  });
  
  if (loop) { 
    var repeat = setInterval(changeSlide, slideInterval); 
  }
  
  $(".wputopia-playbutton").on("click", function() {
    if ($(this).hasClass("wputopia-paused")) {
      $(this).removeClass("wputopia-paused");
      repeat = setInterval(changeSlide, slideInterval);
    } else {
      $(this).addClass("wputopia-paused");
      clearInterval(repeat);
    }
  });
  
  $(".wputopia-content").on("click", function() {
    clearInterval(repeat);
    $(".wputopia-playbutton").addClass("wputopia-paused");
    changeSlide($(this).attr("data-slide"), "clicked");
  });
  
  $(".wputopia-slide-left, .wputopia-slide-right").on("click", function() {
    var slide = parseInt($("#wputopia-container .wputopia-content.wputopia-active").attr("data-slide"));
    if ($(this).hasClass("wputopia-slide-left")) {
      slide = slide - 1;
      if (slide === 0) {
        slide = contentAmt;
      }
    } else {
      slide = slide + 1;
      if (slide > contentAmt) {
        slide = 1;
      }
    }
    $(".wputopia-playbutton").addClass("wputopia-paused");
    clearInterval(repeat);
    changeSlide(slide, "clicked");
  });
  
  function changeSlide(clicked, method) {
    if (method !== "clicked") {
      var currentSlide = $("#wputopia-container .wputopia-content.wputopia-active").attr("data-slide");
      var nextSlide = parseInt(currentSlide) + 1;
      if (nextSlide > contentAmt) {
        nextSlide = 1;
      }
    } else {
      nextSlide = clicked;
    }
    $("#wputopia-container .wputopia-content").removeClass("wputopia-active");
    $("#wputopia-container .wputopia-content[data-slide='" + nextSlide + "']").addClass("wputopia-active");
  }
});
//]]>
</script>

That’s it. Easy-peasy.

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