Elementor

Auto Transition Thumbnails Slider for Travel Blogs

Victor

May 22, 2025

Today, we’re making a thumbnails slider. Place it in your hero section for a bold first impression. Ideal for portfolios or travel blogs to display stunning visuals.

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 glides smoothly, evoking a quiet, calming feeling like lying under a starry night. Images transition automatically every 3 seconds, creating a serene flow. Thumbnails invite manual navigation, offering an engaging and tranquil experience.

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

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

HTML

<div class="wputopia-wrapper" style="container-type: inline-size;">
    <div class="wputopia-thumbnail-slider">
        <!-- Primary Slider Start-->
        <div id="wputopia-primary-slider">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/1539225/pexels-photo-1539225.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/858115/pexels-photo-858115.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/13295150/pexels-photo-13295150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/4275890/pexels-photo-4275890.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/3511104/pexels-photo-3511104.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/276484/pexels-photo-276484.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/2026452/pexels-photo-2026452.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                </ul>
            </div>
        </div>
        <!-- Primary Slider End-->
        <!-- Progress Bar -->
        <div class="progress-bar-container">
            <div class="progress-bar"></div>
        </div>
        <!-- Thumbnail Slider Start-->
        <div id="wputopia-thumbnail-slider">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/1539225/pexels-photo-1539225.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/858115/pexels-photo-858115.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/13295150/pexels-photo-13295150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/4275890/pexels-photo-4275890.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/3511104/pexels-photo-3511104.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/276484/pexels-photo-276484.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                    <li class="splide__slide">
                        <img src="https://images.pexels.com/photos/2026452/pexels-photo-2026452.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                    </li>
                </ul>
            </div>
        </div>
        <!-- Thumbnail Slider End-->
    </div>
</div>

CSS

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@splidejs/splide@1.2.0/dist/css/splide.min.css'>
<style>
  .wputopia-wrapper{
    background:#192A56;
  }
.progress-bar-container {
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 10px 0;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    width: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    transition: width 0ms linear;
}

.wputopia-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.wputopia-thumbnail-slider {
    max-width: 700px;
    margin: 30px auto;
}

.wputopia-title {
    font-weight: 500;
    font-size: 40px;
    margin-bottom: 15px;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    color: #fff;
    text-align: center;
}

.splide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 580px;
    overflow: hidden;
    transition: .2s;
    border-width: 2px !important;
    margin: 10px 4px;
}

.splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
    box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.5);
    border: 2px solid #fff;
    transform: scale(1.05);
}

.splide__slide img {
    width: auto;
    height: auto;
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

@container (max-width: 750px) {
    .wputopia-title {
        font-size: 30px;
    }

    .splide__slide {
        height: 300px;
        width: 100%;
    }

    #wputopia-thumbnail-slider .splide__slide {
        height: 40px;
        width: 66px;
    }
}
</style>

<script src='https://cdn.jsdelivr.net/npm/@splidejs/splide@1.2.0/dist/js/splide.min.js'></script>
<script src="https://unpkg.com/wordpress-dev-necessary/dist/necessary.min.js"></script>
<script>
//<![CDATA[
// Primary slider
var primarySlider = new Splide('#wputopia-primary-slider', {
    type: 'fade',
    heightRatio: 0.5,
    pagination: false,
    arrows: false,
    rewind: true,
    cover: true,
    autoplay: true,
    interval: 3000,
    pauseOnHover: true
});

// Thumbnails slider
var thumbnailSlider = new Splide('#wputopia-thumbnail-slider', {
    rewind: true,
    fixedWidth: 100,
    fixedHeight: 64,
    isNavigation: true,
    gap: 10,
    focus: 'center',
    pagination: false,
    cover: true
});

// Conditional check restructured to avoid && operator
if (window.matchMedia('(max-width: 600px)').matches) {
    if (thumbnailSlider) {
        thumbnailSlider.options = {
            fixedWidth: 66,
            fixedHeight: 40
        };
    }
}

// Mount thumbnails slider
thumbnailSlider.mount();

// Sync and mount primary slider
primarySlider.sync(thumbnailSlider).mount();

// Progress bar animation
const progressBar = document.querySelector('.progress-bar');
let isAnimating = false;

function startProgressBar() {
    if (!isAnimating) {
        isAnimating = true;
        progressBar.style.width = '0%';
        progressBar.style.transition = 'width 3000ms linear';
        setTimeout(() => {
            progressBar.style.width = '100%';
        }, 50);
    }
}

function resetProgressBar() {
    isAnimating = false;
    progressBar.style.transition = 'none';
    progressBar.style.width = '0%';
}

primarySlider.on('moved', () => {
    resetProgressBar();
    setTimeout(startProgressBar, 50);
});

startProgressBar();
//]]>
</script>

That’s it. Easy-peasy.

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