How To Make A Creative Banner Using Elementor Free

Quick Summary

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

Take your website design to the next level with this Elementor FREE Banner Slider Tutorial (WordPress Slider 2026)! This WordPress Free Slider animation is completely FREE & super easy using Elementor!

10 Million+ website owners started using the Elementor page builder. I'll show you the easiest way how you can create your personal resume website using Elementor Page Builder yourself.

Learn How to Make an Elementor Scroll Animation: Slide-Up Cards on Scroll (FREE) | WordPress Elementor Tutorial (Tips & Tricks)

And, lastly, If you want me to build your AWESOME website at an affordable price,

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.

Get Hosting

Elementor The free page builder this tutorial is built with.

Get Elementor

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

Kitpapa Ready made Elementor template kits.

Get Templates

Kitninja eCommerce Elementor template kits.

Get Templates

Project Files Download the resources used in this tutorial.

Download Files

Prompt Used in This Tutorial

Creative Slider Style CSS

<style>

/*Banner Slider Item */
.b-slide .banner-slide-item {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 20px;
  box-shadow: 0 30px 50px #505050;
  transition: 0.5s;
}

.b-slide .banner-slide-item:nth-child(1),
.b-slide .banner-slide-item:nth-child(2) {
  top: 0;
  right: 0;
  transform: translate(0, 0);
  border-radius: 0 !important;
  width: 100%;
  height: 100%;
}

.b-slide .banner-slide-item:nth-child(3) {
  right: calc(0% + 420px);
}
.b-slide .banner-slide-item:nth-child(4) {
      right: calc(0% + 180px);
}
.b-slide .banner-slide-item:nth-child(5) {
  right: calc(0% - 60px);
}

/* here n = 0, 1, 2, 3,... */
.b-slide .banner-slide-item:nth-child(n + 6) {
  right: calc(0% - 300px);
  opacity: 0;
}

 .banner-slide-item:nth-child(2) .content {
  display: flex;
  opacity: 0;
  animation: animate-fade-in 1s ease-in-out 0.3s 1 forwards;
}



.content {
    backdrop-filter: blur(10px);
}
.banner-slide-item .content {
  display: none;
  
}

@keyframes animate-fade-in {
  from {
    opacity: 0;
    transform: translate(0, 50px);
    filter: blur(33px);
  }

  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}





/* responsive */
@media (max-width:767.98px){
    .b-slide .banner-slide-item {
    width: 90px;
    height: 120px;
    top: calc(100% - 105px);
    transform: translate(0, -100%);
}

.b-slide .banner-slide-item:nth-child(4) {
    right: calc(0% + 40px);
}

.b-slide .banner-slide-item:nth-child(3) {
    right: calc(0% + 140px);
}


}

@media (min-width:768px) and (max-width:1024.98px){
    .b-slide .banner-slide-item {
    width: 130px;
    height: 160px;
}

.b-slide .banner-slide-item:nth-child(4) {
    right: calc(0% + 90px);
}

.b-slide .banner-slide-item:nth-child(3) {
    right: calc(0% + 240px);
}


}

@media (min-width: 1025px) and (max-width: 1349.98px){
    .b-slide .banner-slide-item {
    width: 165px;
    height: 225px;
}

.b-slide .banner-slide-item:nth-child(4) {
    right: calc(0% + 145px);
}
.b-slide .banner-slide-item:nth-child(3) {
    right: calc(0% + 350px);
}
}
</style>

Creative Slider Style CSS Classes

b-slide
banner-slide-item
content

Slider Button Style CSS

/* For slider button */

.bslide-button .prev, .bslide-button .next{
    cursor: pointer;
}

.bslide-button .prev .elementor-button, .bslide-button .next .elementor-button{
    backdrop-filter: blur(8px);
}

Slider Button Style CSS Classes

bslide-button
prev
next

Slider JS Code

<script>
let next = document.querySelector(".next");
let prev = document.querySelector(".prev");

next.addEventListener("click", function () {
  let items = document.querySelectorAll(".banner-slide-item");
  document.querySelector(".b-slide").appendChild(items[0]);
});

prev.addEventListener("click", function () {
  let items = document.querySelectorAll(".banner-slide-item");
  document.querySelector(".b-slide").prepend(items[items.length - 1]); // here the length of items = 6
});

</script>

How To Make A Creative Banner Using Elementor Free

Quick Summary

Tools and Links Used

Prompt Used in This Tutorial

Get Your FREE Freelancing Roadmap

Related Tutorials

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel