<div class="container mx-auto hidden">
  <div x-data="heroSliderComponent()"
       x-init="init()"
       class="flex w-full items-stretch">
    <div x-ref="viewport"
         class="flex-none relative w-10/12">
      <img width="1920" height="1080" class="opacity-0" />
      <div data-index="0"
           class="absolute top-0 left-0 overflow-hidden rounded-l-md
                  transition ease-out duration-500"
           x-show="0 == currentIndex"
           x-transition:enter-start="opacity-0"
           x-transition:enter-end="opacity-100"
           x-transition:leave-start="opacity-100"
           x-transition:leave-end="opacity-0">
        <img src="https://i.imgur.com/qKRF1B3.jpg" width="1920" height="1080"
             class="pointer-events-none select-none" />
      </div>
      <div data-index="1"
           class="absolute top-0 left-0 overflow-hidden rounded-l-md
                  transition ease-out duration-500"
           x-show="1 == currentIndex"
           x-transition:enter-start="opacity-0"
           x-transition:enter-end="opacity-100"
           x-transition:leave-start="opacity-100"
           x-transition:leave-end="opacity-0">
        <img src="https://i.imgur.com/6E4e9l7.jpg" width="1920" height="1080"
             class="pointer-events-none select-none" />
      </div>
      <div data-index="2"
           class="absolute top-0 left-0 overflow-hidden rounded-l-md
                  transition ease-out duration-500"
           x-show="2 == currentIndex"
           x-transition:enter-start="opacity-0"
           x-transition:enter-end="opacity-100"
           x-transition:leave-start="opacity-100"
           x-transition:leave-end="opacity-0">
        <img src="https://i.imgur.com/qVcPanV.jpg" width="1920" height="1080"
             class="pointer-events-none select-none" />
      </div>
    </div>
    <div x-ref="previews"
         class="flex-none w-2/12 bg-gray-900 overflow-hidden rounded-r-md">
      <div data-index="0" @click="currentIndex = 0"
           class="relative cursor-pointer">
        <div class="absolute top-0 left-0 w-full h-full 
                    bg-gradient-to-t from-black border-l-2"
             :class="{ 'border-white' : (currentIndex === 0), 'border-gray-900' : (currentIndex !== 0) }">
          <p class="absolute bottom-0 w-full text-white text-sm text-center">Spodermon</p>
        </div>
        <img src="https://i.imgur.com/qKRF1B3.jpg" width="1920" height="1080"
             class="pointer-events-none select-none" />
      </div>
      <div data-index="1" @click="currentIndex = 1"
           class="relative cursor-pointer">
        <div class="absolute top-0 left-0 w-full h-full
                    bg-gradient-to-t from-black border-l-2"
             :class="{ 'border-white' : (currentIndex === 1), 'border-gray-900' : (currentIndex !== 1) }">
          <p class="absolute bottom-0 w-full text-white text-sm text-center">Spodermon</p>
        </div>
        <img src="https://i.imgur.com/6E4e9l7.jpg" width="1920" height="1080"
             class="pointer-events-none select-none" />
      </div>
      <div data-index="2" @click="currentIndex = 2"
           class="relative cursor-pointer">
        <div class="absolute top-0 left-0 w-full h-full
                    bg-gradient-to-t from-black border-l-2"
             :class="{ 'border-white' : (currentIndex === 2), 'border-gray-900' : (currentIndex !== 2) }">
          <p class="absolute bottom-0 w-full text-white text-sm text-center">Spodermon</p>
        </div>
        <img src="https://i.imgur.com/qVcPanV.jpg" width="1920" height="1080"
             class="pointer-events-none select-none" />
      </div>
    </div>
    <button class="fixed top-0 left-0" @click="nextSlide()">+</button>
  </div>
</div>

<div class="container mx-auto">
  <div x-data="heroSliderComponent()"
       x-init="init()"
       @resize.passive.window.debounce.50ms="checkIsMobile()"
       class="flex">
    <div x-ref="viewport" class="relative w-full md:w-10/12 md:bg-gray-900">
      <div class="relative w-full h-full aspect-1:1 md:aspect-16:7">
        <div class="absolute w-full h-full whitespace-nowrap text-0
                    overflow-x-scroll overflow-y-hidden 
                    scroll-snap-mandatory scrollbar-hidden"
             @scroll.debounce.50ms="updateCurrentIndex($event)">
          <!-- Slide -->
          <slide data-index="0" 
                  class="relative inline-block w-full mx-1/20 h-full scroll-snap-align-center
                         text-base whitespace-normal
                         md:transition md:ease-out md:duration-500
                         md:block md:absolute md:opacity-0 md:w-full"
                  :class="{ 'md:opacity-100 z-50' : (currentIndex == 0) }">
            <!-- Picture -->
            <div class="w-full h-full bg-cover bg-right-top 
                        md:h-full md:bg-center" 
                 style="background-image:url(https://magento2.test/media/mageplaza/bannerslider/banner/image/m/i/miles.jpg)"></div>
            <!-- Overlay -->
            <div class="absolute top-0 left-0 w-full h-3/5 from-gray-900 bg-gradient-to-t md:h-full md:bg-gradient-to-r"
                  style="/* --tw-gradient-from: #024; */"></div>
            <!-- Content -->
            <div class="absolute bottom-0 left-0 flex flex-col w-full h-2/5 bg-gray-900
                        md:w-2/5 md:h-full md:bg-transparent md:p-4 md:justify-center">
              <div class="flex justify-center items-center 
                          h-1/2 w-full max-h-48 overflow-hidden -mt-1/10 mb-2 
                          md:h-auto md:mt-0 md:mb-4">
                <img src="https://i.imgur.com/lUozrQC.png" width="393" height="191" class="w-full h-full object-contain"/>
<!--                 <span class="max-h-1/2 overflow-hidden text-white text-2xl text-center text-shadow font-bold sm:text-3xl">Spider-Man Miles Morales</span> -->
              </div>
              <div class="text-white text-center text-shadow text-xs font-bold mb-2 sm:text-base md:text-lg md:mb-4">
                <p>Experience the rise of Miles Morales.</p>
                <p>The new Spider-Man!</p>
              </div>
              <div class="flex justify-center">
                <button class="text-white text-sm font-bold px-4 py-2 bg-blue-700 rounded sm:text-base md:text-lg">Pre-Order</button>
              </div>
            </div>
          </slide>
          <!-- Slide -->
          <slide data-index="1"
                 class="relative inline-block w-full mx-1/20 h-full scroll-snap-align-center
                        md:transition md:ease-out md:duration-500
                        md:block md:absolute md:opacity-0 md:w-full"
                 :class="{ 'md:opacity-100' : (currentIndex == 1) }">
            <div>
              <!-- Picture -->
              <div>
                <img src="https://magento2.test/media/mageplaza/bannerslider/banner/image/m/i/miles.jpg" width="1920" height="1080"
                     class="pointer-events-none select-none"/>
              </div>
              <!-- Overlay -->
              <div class="absolute w-full from-black bg-gradient-to-t
                          md:top-0 md:left-0 md:h-full md:bg-gradient-to-r"
                   style="--tw-gradient-from: #024;"></div>
              <!-- Content -->
              <div class="flex flex-col justify-end 
                          absolute bottom-0 left-0 w-2/5 h-full p-8
                          bg-red-500 bg-opacity-0">
                <div class="max-h-32 mb-4">
                  <img src="https://i.imgur.com/lUozrQC.png" width="393" height="191"
                       class="w-full h-full object-contain"/>
                </div>
                <div class="text-white text-shadow text-sm font-bold mb-4 whitespace-normal
                            md:text-base">
                  <p>Experience the rise of Miles Morales.</p>
                  <p>The new Spider-Man!</p>
                </div>
                <div>
                  <button class="bg-blue-700 px-4 py-2 rounded-md
                                 text-sm text-white font-bold uppercase">View Pre-Order 2</button>
                </div>
              </div>
            </div>
          </slide>
        </div>
      </div>
    </div>
    <div x-ref="previews" class="hidden md:flex flex-col w-2/12 bg-black">
      <div class="h-full"></div>
    </div>
    <div class="fixed top-0 left-0 text-black bg-white">
      <span x-text="currentIndex"></span>
      <button @click="nextSlide()">++</button>
    </div>
  </div>
</div>

<style>
  body {
    font-family: 'Montserrat';
  }
  .text-shadow {
    text-shadow: 0 1px 3px black;
  }
  .text-0 {
    font-size: 0;
  }
  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }
  
  .scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scroll-snap-mandatory {
    scroll-snap-type: x mandatory;
  }
  .scroll-snap-align-center {
    scroll-snap-align: center;
  }
  
  .mx-1\/20 {
    margin-left: 5%;
    margin-right: 5%;
  }
  
  .aspect-1\:1 {
    padding-bottom: calc(100%);
  }
  
  .-mt-1\/10 {
    margin-top: -10%;
  }
  
  @media (min-width: 768px) {
    .md\:aspect-16\:7 {
      padding-bottom: calc(100% * 7 / 16);
    }
    
    .md\:mt-0 {
      margin-top: 0;
    }
  }
</style>
  
<script>
  function heroSliderComponent() {
    return {
      ready: false,
      isMobile: true,
      currentIndex: 0,
      slideCount: 0,
      slideElements: [],
      init() {
        this.ready = true;
        this.slideElements = [];
        let slideElements = this.$refs.viewport.getElementsByTagName('slide')
        for(let slideElement of slideElements) {
          this.slideElements.push(slideElement)
        }
        this.slideCount = this.slideElements.length;
        this.checkIsMobile();
      },
      nextSlide() {
        this.currentIndex++;
        if(this.currentIndex >= this.slideCount) this.currentIndex = 0;
      },
      updateCurrentIndex() {
        if(!this.checkIsMobile()) return;
        /* Calculates the current slide based on position
         * this is preferred because the slider can be moved
         * using touch + CSS scroll-snap and adapts to resize
         */
        let vp = this.$refs.viewport.getBoundingClientRect();
        let vp_center = vp.right - vp.width/2;
        let best = Infinity, index = 0;
        this.slideElements.forEach((slide,i) => {
          let bb = slide.getBoundingClientRect();
          let bb_center = bb.right - bb.width/2;
          if (Math.abs(vp_center - bb_center) < best) {
            best = vp_center - bb_center;
            index = i;
          }
        })
        
        this.currentIndex = index;
        console.log(index);
        return index;
      },
      checkIsMobile() {
        let isMobile = !window.matchMedia('(min-width: 768px)').matches;
        if(isMobile && !this.isMobile) {
          // Fix issue where mobile would always get reset to 0
          this.slideElements[this.currentIndex].scrollIntoView();
        }
        return this.isMobile = isMobile;
      }
    }
  }
</script>