<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
      integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    

                                                
    
    <div class="image-slider-container">
      <div class="image-slider-container-backdrop">
        <div class="container-fluid h-100">
          <div class="image-slider-container-wrapper">
            <div class="image-slider-container-wrapper-left"></div>
            <div class="prev-place-btn-container">
              <div class="prev-place-btn">
                <span
                  class="iconify"
                  data-icon="ic:round-navigate-next"
                  data-flip="horizontal"
                ></span>
              </div>
            </div>
            <div class="image-slider-container-wrapper-right"></div>
            <div class="auto-play">
              <div class="auto-play-item main">Play</div>
            </div>
            <div class="next-place-btn-container">
              <div class="next-place-btn">
                <span class="iconify" data-icon="ic:round-navigate-next"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    

                                                
    
    .image-slider-container {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 100vh;
        transition: background-image .2s;
        position: relative;
        scroll-snap-type: y mandatory;
    }
    
    .image-slider-container:after {
        position: absolute;
        content: attr(data-content);
        right: 15px;
        bottom: 0;
        top: 0;
        left: 0;
        color: #FFFFFF;
        z-index: 0;
        font-family: 'Londrina Outline', cursive;
        font-size: 100px;
        line-height: 120px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
    
    .image-slider-container-backdrop {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.582);
        color: #FFFFFF;
        position: relative;
        z-index: 1;
    }
    
    .image-slider-container-wrapper {
        display: flex;
        height: 100%;
        padding: 6px 0;
    }
    
    .image-slider-container-wrapper-left {
        width: 50%;
        height: 100%;
    }
    
    .image-slider-container-wrapper-right {
        width: 50%;
        height: 100%;
    }
    
    .image-slider-container-wrapper-right {
        display: flex;
        align-items: center;
        overflow: hidden;
        transition: all .3s ease-in;
        padding: 0 0 0 20px;
    }
    
    .image-slider-container-wrapper-right-item {
        min-width: 250px;
        margin: 0 8px;
        transition: all .3s ease-in-out, .3s opacity, .3s width;
    }
    
    .image-slider-container-wrapper-right-item.active {
        min-width: 0;
        margin: 0;
    }
    
    .image-slider-container-wrapper-right-item.next {
        min-width: 300px;
        cursor: pointer;
    }
    
    .image-slider-container-wrapper-right-item.next .image-slider-container-wrapper-right-item-img {
        height: 450px;
    }
    
    .image-slider-container-wrapper-right-item-img {
        width: 100%;
        height: 350px;
        border-radius: 3px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transition: all .3s ease-in-out;
    }
    
    .image-slider-container-wrapper-right-item-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }
    
    .prev-place-btn-container {
        display: none;
    }
    
    .next-place-btn-container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 20px;
        bottom: 0;
        top: 0;
    }
    
    .next-place-btn {
        border-radius: 6px;
        cursor: pointer;
        user-select: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #FFFFFF;
        color: #000000;
    }
    
    .next-place-btn .iconify {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    
    .next-place-btn:hover {
        background-color: var(--theme_color);
        transition: .3s background-color;
        color: #FFFFFF;
    }
    
    .prev-place-btn-container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 50%;
        bottom: 0;
        top: 0;
    }
    
    .prev-place-btn {
        border-radius: 6px;
        cursor: pointer;
        user-select: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #FFFFFF;
        color: #000000;
    }
    
    .prev-place-btn .iconify {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    
    .prev-place-btn:hover {
        background-color: var(--theme_color);
        transition: .3s background-color;
        color: #FFFFFF;
    }
    
    .image-slider-container-position {
        position: absolute;
        right: 15px;
        top: 0;
        font-family: 'Londrina Outline', cursive;
        font-size: 24px;
        user-select: none;
    }
    
    .image-slider-container-position .current {
        font-size: 42px;
    }
    
    .auto-play {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        position: fixed;
        z-index: 1;
        top: 10px;
        right: 10px;
        user-select: none;
    }
    
    .auto-play-item {
        cursor: pointer;
    }
    
    .auto-play-item.main {
        border: 1px solid #FFFFFF;
        border-radius: 15px;
        padding: 2px 10px;
    }
    
    @media (max-width: 991px) {
        .image-slider-container-wrapper {
            flex-direction: column;
            justify-content: space-between;
        }
    
        .image-slider-container-wrapper-left {
            width: 100%;
            height: auto;
            padding-top: 50px;
        }
    
        .image-slider-container-wrapper-right {
            width: 100%;
            height: auto;
        }
    
        .image-slider-container-details-title {
            font-size: 60px;
            line-height: 70px;
        }
    
        .image-slider-container-wrapper-right {
            padding: 0 0 10px 0;
        }
    
        .image-slider-container-wrapper-right-item {
            min-width: 200px;
        }
    
        .image-slider-container-wrapper-right-item-img {
            width: 100%;
            height: 300px;
        }
    
        .image-slider-container-wrapper-right-item.next {
            min-width: 200px;
            cursor: pointer;
            margin-left: 0;
        }
    
        .image-slider-container-wrapper-right-item.next .image-slider-container-wrapper-right-item-img {
            height: 300px;
        }
    
        .next-place-btn-container {
            top: 67%;
            right: 30px;
        }
    
        .prev-place-btn-container {
            top: 67%;
            left: 30px;
            right: initial;
        }
    
        .image-slider-container:after {
            right: 0;
            top: 0;
            left: 15px;
            line-height: 110px;
            justify-content: flex-start;
            align-items: flex-start;
        }
    }
    
    @media (max-width: 679px) {
        .image-slider-container-wrapper-right {
            padding-bottom: 8vh;
        }
    
        .image-slider-container-wrapper-right-item {
            min-width: 150px;
        }
    
        .image-slider-container-wrapper-right-item-img {
            width: 100%;
            height: 200px;
        }
    
        .image-slider-container-wrapper-right-item.next {
            min-width: 150px;
        }
    
        .image-slider-container-wrapper-right-item.next .image-slider-container-wrapper-right-item-img {
            height: 200px;
        }
    
        .next-place-btn-container {
            top: 63%;
        }
    
        .prev-place-btn-container {
            top: 63%;
        }
    }
    

                                                
    
    const images = [
        "https://images.unsplash.com/photo-1697469994783-b12bbd9c4cff?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "https://images.unsplash.com/photo-1697451964285-efa976c9178b?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "https://images.unsplash.com/photo-1697230188928-fb36c4964bf7?auto=format&fit=crop&q=80&w=3387&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "https://images.unsplash.com/photo-1685350767266-a0fc514fb41e?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "https://images.unsplash.com/photo-1697581886387-a8b3af94ef0b?auto=format&fit=crop&q=80&w=3451&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "https://images.unsplash.com/photo-1697487957555-5f8df6a965f6?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "https://images.unsplash.com/photo-1697638332749-da3ba4046082?auto=format&fit=crop&q=80&w=3542&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "https://images.unsplash.com/photo-1694250990115-ca7d9d991b24?auto=format&fit=crop&q=80&w=3395&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "https://images.unsplash.com/photo-1697386576502-812fce23b209?auto=format&fit=crop&q=80&w=3328&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "https://images.unsplash.com/photo-1697716080597-be01c4946985?auto=format&fit=crop&q=80&w=3475&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "https://images.unsplash.com/photo-1697554521121-3a3cda83105a?auto=format&fit=crop&q=80&w=3264&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "https://images.unsplash.com/photo-1697485538022-766751333c4f?auto=format&fit=crop&q=80&w=3432&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "https://images.unsplash.com/photo-1619807811096-7d0584eedecf?auto=format&fit=crop&q=80&w=3008&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    ]
    const imageList = $('.image-slider-container-wrapper-right')
    let interval = ''
    
    $(function () {
        $(imageList).html(
            images.map((img) => {
                return `<div class="image-slider-container-wrapper-right-item" data-image="${img}">
                            <div class="image-slider-container-wrapper-right-item-img">
                                <img src="${img}">
                            </div>
                        </div>`
            }).join('')
        )
    
        $('body').on('click', '.image-slider-container-wrapper-right-item.next', function () {
            changePlaces($(this), 'next');
        });
    
        let explores = $('.image-slider-container');
        changePlaces($(explores).find('.image-slider-container-wrapper-right-item')[0], 'next');
    
        $('body').on('click', '.next-place-btn', function () {
            let exploreContainer = $(this).parent().parent();
            changePlaces($(exploreContainer).find('.image-slider-container-wrapper-right-item.next'), 'next');
        });
    
        $('body').on('click', '.prev-place-btn', function () {
            let exploreContainer = $(this).parent().parent();
            changePlaces($(exploreContainer).find('.image-slider-container-wrapper-right-item:nth-last-child(2)'), 'prev');
        });
    
        $('body').on('click', '.auto-play-item.main', function () {
            autoPlay($(this).text())
        })
    })
    
    function changePlaces(place, dir) {
        let image = $(place).data('image');
        let placeWrapper = $(place).parent();
        let exploreContainer = $(placeWrapper).parent().parent().parent().parent();
    
        if (dir == 'next') {
            $(placeWrapper).find('.image-slider-container-wrapper-right-item').removeClass('next');
            $(place).next().addClass('next');
            $(place).addClass('active');
    
            setTimeout(() => {
                $(placeWrapper).append($(place));
                $(place).removeClass('active');
            }, 300);
        }
    
        if (dir == 'prev') {
            $(placeWrapper).prepend($(place).next());
            $(placeWrapper).find('.image-slider-container-wrapper-right-item').first().addClass('active');
    
            setTimeout(() => {
                $(placeWrapper).find('.image-slider-container-wrapper-right-item').removeClass('next');
                $(placeWrapper).find('.image-slider-container-wrapper-right-item').first().removeClass('active').addClass('next');
            });
        }
    
        $(exploreContainer).css('background-image', `url(${image})`);
    }
    
    function autoPlay(type, speed = 2000) {
        const container = $('.auto-play-item.main')
        if (type === 'Play') {
            $(container).text('Pause')
            interval = setInterval(() => {
                $('.image-slider-container-wrapper-right-item.next').click()
            }, speed);
        }
        if (type === 'Pause') {
            $(container).text('Play')
            clearInterval(interval)
        }
    }