Elementor

[3D Rotating Cube] Mega Slider for Travel Tours

Victor

May 19, 2025

Today, we’re making a vibrant travel tour showcase. This project creates an engaging, interactive display for travel tours. Visitors will feel inspired and excited, drawn in by stunning visuals and smooth animations. It is also fully responsive. So feel free to use it on your landing page.

Just so you know its responsiveness, here’s a demo on my narrow space:

Let’s Travel The World Together!

Our tours are designed to transport you to the heart of the world’s most captivating destinations, creating memories that will last a lifetime. You can uncover the hidden gems, iconic landmarks, and unique cultural treasures that make each destination special.

from $230 per group

Walking Tour in Florence

Discover the fascinating beauty of this historic city by strolling through the rich cultural tapestry that makes Florence a timeless destination.

138 reviews

from $380 per group

Edinburgh Guided Tour

Explore the city’s majestic castles and fascinating history by joining our guided tour for an unforgettable journey through Scotland’s capital.

307 reviews

from $99 per adult

New York Sightseeing Tour

Experience the energy and excitement of New York City from Times Square’s dazzling lights to the serene beauty of Central Park.

1152 reviews

from $117 per adult

Japan Panoramic Tours

Embark on a magical journey through Tokyo by discovering the beauty of the city as cherry blossom trees paint the streets in hues of pink.

619 reviews

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.

The cube-effect slider rotates seamlessly, showcasing destinations with captivating images and details, leaving a lasting impression. Colorful particle animations add a dynamic, modern touch, enhancing the visual appeal. It’s perfect for grabbing attention and sparking wanderlust.

Use it in your hero section to create a bold first impression or on a dedicated tours page to highlight offerings. It’s ideal for travel agencies, bloggers, or anyone promoting destinations.

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="max-width: 100%; margin: 0 auto;">
    <section class="wputopia-section">
      <div class="wputopia-content">
        <p class="wputopia-title">Let's Travel The World Together!</p>
        <p class="wputopia-description">
          Our tours are designed to transport you to the heart of the world's
          most captivating destinations, creating memories that will last a
          lifetime. You can uncover the hidden gems, iconic landmarks, and
          unique cultural treasures that make each destination special.
        </p>
        <button class="wputopia-button">Explore Tours</button>
      </div>

      <div class="wputopia-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="https://media.wputopia.com/storage/2025/05/19054804/Florence.webp" />
            <div class="wputopia-cost">from $230 per group</div>
            <div class="wputopia-overlay">
              <p class="wputopia-slide-title">Walking Tour in Florence</p>
              <p class="wputopia-slide-description">
                Discover the fascinating beauty of this historic city by
                strolling through the rich cultural tapestry that makes Florence
                a timeless destination.
              </p>
              <div class="wputopia-ratings">
                <div class="wputopia-stars">
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star-half-outline"></ion-icon>
                </div>
                <span>138 reviews</span>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="https://media.wputopia.com/storage/2025/05/19054416/Edinburg.webp" />
            <div class="wputopia-cost">from $380 per group</div>
            <div class="wputopia-overlay">
              <p class="wputopia-slide-title">Edinburgh Guided Tour</p>
              <p class="wputopia-slide-description">
                Explore the city's majestic castles and fascinating history by
                joining our guided tour for an unforgettable journey through
                Scotland's capital.
              </p>
              <div class="wputopia-ratings">
                <div class="wputopia-stars">
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                </div>
                <span>307 reviews</span>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="https://media.wputopia.com/storage/2025/05/19054508/new-york.webp" />
            <div class="wputopia-cost wputopia-dark-text">from $99 per adult</div>
            <div class="wputopia-overlay">
              <p class="wputopia-slide-title">New York Sightseeing Tour</p>
              <p class="wputopia-slide-description">
                Experience the energy and excitement of New York City from Times
                Square's dazzling lights to the serene beauty of Central Park.
              </p>
              <div class="wputopia-ratings">
                <div class="wputopia-stars">
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star-half-outline"></ion-icon>
                </div>
                <span>1152 reviews</span>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="https://media.wputopia.com/storage/2025/05/19054658/Japan.webp" />
            <div class="wputopia-cost wputopia-dark-text">from $117 per adult</div>
            <div class="wputopia-overlay">
              <p class="wputopia-slide-title">Japan Panoramic Tours</p>
              <p class="wputopia-slide-description">
                Embark on a magical journey through Tokyo by discovering the
                beauty of the city as cherry blossom trees paint the streets in
                hues of pink.
              </p>
              <div class="wputopia-ratings">
                <div class="wputopia-stars">
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star"></ion-icon>
                  <ion-icon class="wputopia-star" name="star-outline"></ion-icon>
                </div>
                <span>619 reviews</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

CSS

 <!-- External Dependencies -->
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css'>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js'></script>
  <script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js'></script>
  <script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js'></script>
<script src="https://unpkg.com/wordpress-dev-necessary/dist/necessary.min.js"></script>
  <!-- Embedded Styles -->
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Nunito:wght@300;600&display=swap");

    .wputopia-wrapper {
      container-type: inline-size;
      container-name: wputopia;
    }

    .wputopia-wrapper *,
    .wputopia-wrapper *::before,
    .wputopia-wrapper *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Nunito", sans-serif;
    }

    .wputopia-section {
      display: grid;
      grid-template-columns: 50% 45%;
      grid-template-areas: "content slider";
      place-items: center;
      gap: 60px;
      min-height: 100vh;
      padding: clamp(20px, 4cqi, 60px);
      background: #162561;
      background-image: radial-gradient(
          circle at 20% 100%,
          rgba(184, 184, 184, 0.1) 0%,
          rgba(184, 184, 184, 0.1) 33%,
          rgba(96, 96, 96, 0.1) 33%,
          rgba(96, 96, 96, 0.1) 66%,
          rgba(7, 7, 7, 0.1) 66%,
          rgba(7, 7, 7, 0.1) 99%
        ),
        linear-gradient(40deg, #040a22, #162561, #202e64, #6f7aa6);
    }

    .wputopia-content {
      grid-area: content;
      max-width: 100%;
      padding: clamp(10px, 2cqi, 20px);
    }

    .wputopia-title {
      font-family: "Comfortaa", sans-serif;
      font-size: clamp(2rem, 4cqi, 3.5rem);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 1px;
      margin-bottom: 36px;
      color: #fff;
    }

    .wputopia-description {
      font-size: clamp(0.9rem, 3cqi, 1.25rem);
      font-weight: 300;
      line-height: 1.5;
      margin-bottom: 30px;
      color: #fff;
    }

    .wputopia-button {
      background: #eaeaea;
      color: #202134;
      font-size: clamp(0.9rem, 4cqi, 1rem);
      font-weight: 600;
      border: 0;
      outline: 0;
      padding: 8px 14px;
      border-radius: 7px;
      transform: scale(1);
      transition: all 0.4s ease-in;
      cursor: pointer;
    }

    .wputopia-button:is(:hover, :focus) {
      transform: scale(0.98);
      background-color: #6f7aa6;
      color: #eaeaea;
    }

    .wputopia-swiper {
      grid-area: slider;
      position: relative;
      width: clamp(280px, 45cqi, 400px);
      height: clamp(350px, 55cqi, 490px);
      margin: 0 auto;
    }

    .wputopia-swiper .swiper-slide {
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.3);
      user-select: none;
      border-radius: 20px;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .wputopia-swiper .swiper-slide img {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .wputopia-cost {
      position: absolute;
      top: 8px;
      right: 6px;
      z-index: 2;
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
      border-radius: 30px;
      padding: 6px 10px;
      color: #fff;
      font-size: clamp(0.8rem, 4cqi, 0.9rem);
      font-weight: 600;
    }

    .wputopia-dark-text {
      color: #202134;
    }

    .wputopia-overlay {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 170px;
      padding: 15px 20px;
      background: rgba(93, 95, 145, 0.2);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid rgba(255, 255, 255, 0.3);
      color: #fff;
      border-radius: 0 0 20px 20px;
    }

    .wputopia-slide-title {
      font-size: clamp(1.2rem, 4cqi, 1.5rem);
      font-weight: 600;
      margin-bottom: 10px;
    }

    .wputopia-slide-description {
      font-size: clamp(0.8rem, 4cqi, 0.9rem);
      font-weight: 300;
      line-height: 1.3;
      margin-bottom: 12px;
    }

    .wputopia-ratings {
      display: flex;
      align-items: center;
      column-gap: 10px;
      margin-top: auto;
    }

    .wputopia-ratings span {
      font-size: clamp(0.8rem, 4cqi, 0.9rem);
      font-weight: 300;
    }

    .wputopia-star {
      color: #afe312;
    }

    @container wputopia (max-width: 750px) {
      .wputopia-section {
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        grid-template-areas:
          "slider"
          "content";
        place-items: center;
        gap: clamp(30px, 8cqi, 64px);
        padding: clamp(20px, 4cqi, 40px);
      }

      .wputopia-swiper {
        grid-area: slider;
        width: clamp(250px, 80cqi, 350px);
        height: clamp(300px, 90cqi, 450px);
      }

      .wputopia-content {
        grid-area: content;
        text-align: center;
      }

      .wputopia-title {
        margin-bottom: 20px;
      }
    }

    @container wputopia (max-width: 470px) {
      .wputopia-section {
        padding: clamp(20px, 4cqi, 30px);
      }

      .wputopia-swiper {
        width: clamp(220px, 75cqi, 300px);
        height: clamp(270px, 85cqi, 400px);
      }
    }
  </style>

<script src="https://unpkg.com/wordpress-dev-necessary/dist/necessary.min.js"></script>
<script>
  //<![CDATA[
    var wputopiaSwiper = new Swiper(".wputopia-swiper", {
      effect: "cube",
      grabCursor: true,
      loop: true,
      speed: 1000,
      slidesPerView: 1,
      cubeEffect: {
        shadow: false,
        slideShadows: true,
        shadowOffset: 10,
        shadowScale: 0.94,
        rotate: true
      },
      autoplay: {
        delay: 2600,
        pauseOnMouseEnter: true,
      },
    });
  //]]>
  </script>

That’s it. Easy-peasy.

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