<div
    x-init="$nextTick(()=>$el._x_swiper = new Swiper($el,{navigation: {prevEl: '.swiper-button-prev',nextEl: '.swiper-button-next'}}))"
    class="swiper rounded-lg"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-6.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-top"
          src="images/object/object-3.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-2.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-9.jpg"
          alt="image"
        />
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
                  
                

                    
  <div
    x-init="$nextTick(()=>$el._x_swiper = new Swiper($el,{ navigation: {prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next'}, pagination: { el: '.swiper-pagination',type: 'progressbar'},lazy: true,}))"
    class="swiper rounded-lg"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide h-full">
        <img
          class="swiper-lazy h-full w-full object-cover"
          data-src="images/object/object-3.jpg"
          alt="image"
        />
        <div class="swiper-lazy-preloader"></div>
      </div>
      <div class="swiper-slide h-full">
        <img
          class="swiper-lazy h-full w-full object-cover"
          data-src="images/object/object-7.jpg"
          alt="image"
        />
        <div class="swiper-lazy-preloader"></div>
      </div>
      <div class="swiper-slide h-full">
        <img
          class="swiper-lazy h-full w-full object-cover"
          data-src="images/object/object-4.jpg"
          alt="image"
        />
        <div class="swiper-lazy-preloader"></div>
      </div>
      <div class="swiper-slide h-full">
        <img
          class="swiper-lazy h-full w-full object-cover"
          data-src="images/object/object-2.jpg"
          alt="image"
        />
        <div class="swiper-lazy-preloader"></div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
                  
                

                    
  <div
    x-init="$nextTick(() => $el._x_swiper = new Swiper($el,{slidesPerView: 'auto',spaceBetween: 30,pagination: {el: '.swiper-pagination',clickable: true,}}))"
    class="swiper"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide !w-10/12">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-8.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide !w-10/12">
        <img
          class="h-full w-full rounded-lg object-cover object-top"
          src="images/object/object-3.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide !w-10/12">
        <img
          class="h-full w-full rounded-lg object-cover object-center"
          src="images/object/object-9.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide !w-10/12">
        <img
          class="h-full w-full rounded-lg object-cover object-center"
          src="images/object/object-7.jpg"
          alt="image"
        />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
                  
                

                    
  <div
    x-init="$nextTick(() => $el._x_swiper = new Swiper($el,{navigation: {prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next'}, pagination: {el: '.swiper-pagination',clickable: true,}, zoom: {maxRatio: 4}}))"
    class="swiper"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
          <img
            class="h-full w-full object-cover"
            src="images/object/object-9.jpg"
            alt="image"
          />
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
          <img
            class="h-full w-full object-cover"
            src="images/object/object-2.jpg"
            alt="image"
          />
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
          <img
            class="h-full w-full object-cover"
            src="images/object/object-7.jpg"
            alt="image"
          />
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
          <img
            class="h-full w-full object-cover"
            src="images/object/object-9.jpg"
            alt="image"
          />
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
                  
                

                  
  <div
    x-init="$nextTick(() => $el._x_swiper = new Swiper($el,{effect: 'flip',flipEffect: {slideShadows: false,}, navigation: { prevEl: '.swiper-button-prev',nextEl: '.swiper-button-next'}, pagination: { el: '.swiper-pagination', clickable: true}}))"
    class="swiper"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
          <img
            class="h-full w-full object-cover"
            src="images/object/object-9.jpg"
            alt="image"
          />
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
          <img
            class="h-full w-full object-cover"
            src="images/object/object-2.jpg"
            alt="image"
          />
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
          <img
            class="h-full w-full object-cover"
            src="images/object/object-7.jpg"
            alt="image"
          />
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
          <img
            class="h-full w-full object-cover"
            src="images/object/object-9.jpg"
            alt="image"
          />
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
                  
                

                  
  <div
    x-init="$nextTick(() => $el._x_swiper = new Swiper($el,{effect: 'cube', cubeEffect: { shadow: false}, pagination: { el: '.swiper-pagination', clickable: true}}))"
    class="swiper"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-4.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-6.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-2.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-1.jpg"
          alt="image"
        />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
                  
                

                  
  <div
    x-init="$nextTick(() => $el._x_swiper = new Swiper($el,{effect: 'cards', grabCursor: true}))"
    class="swiper"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-4.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-6.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-2.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-1.jpg"
          alt="image"
        />
      </div>
    </div>
  </div>
                  
                

                  
  <div
    x-init="$nextTick(()=>$el._x_swiper = new Swiper($el,{ pagination: { el: '.swiper-pagination', clickable: true,}}))"
    class="swiper rounded-lg"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-5.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-top"
          src="images/object/object-1.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-2.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-9.jpg"
          alt="image"
        />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
                  
                

                  
  <div
    x-init="$nextTick(()=>$el._x_swiper = new Swiper($el, {direction: 'vertical',pagination: { el: '.swiper-pagination',clickable: true}}))"
    class="swiper h-64 rounded-lg"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-4.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-8.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-2.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-1.jpg"
          alt="image"
        />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
                  
                

                  
  <div
    x-init="$nextTick(()=>$el._x_swiper = new Swiper($el, {scrollbar: {el: '.swiper-scrollbar',draggable: true}, navigation: {prevEl: '.swiper-button-prev',nextEl: '.swiper-button-next'},autoplay: {delay: 2000}}))"
    class="swiper rounded-lg"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-5.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-top"
          src="images/object/object-1.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-2.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-9.jpg"
          alt="image"
        />
      </div>
    </div>
    <div class="swiper-scrollbar"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
                  
                

                  
  <div
    x-init="$nextTick(()=>$el._x_swiper = new Swiper($el, {effect: 'fade', pagination: { el: '.swiper-pagination',clickable: true},navigation: {prevEl: '.swiper-button-prev',nextEl: '.swiper-button-next'}}))"
    class="swiper rounded-lg"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-5.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-top"
          src="images/object/object-1.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-2.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-9.jpg"
          alt="image"
        />
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
                  
                

                  
  <div
    x-init="$nextTick(()=>$el._x_swiper = new Swiper($el, { effect: 'coverflow', coverflowEffect: {rotate: 35, slideShadows: false,}, navigation: {prevEl: '.swiper-button-prev',nextEl: '.swiper-button-next'}}))"
    class="swiper rounded-lg"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-9.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-top"
          src="images/object/object-1.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-2.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-9.jpg"
          alt="image"
        />
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
                  
                

                  
  <div
    x-init="$nextTick(()=>$el._x_swiper = new Swiper($el, {parallax: true,navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next'}}))"
    class="swiper swiper-parallax h-64 rounded-lg"
  >
    <div
      class="parallax-bg"
      style="background-image: url('images/object/object-2.jpg')"
      data-swiper-parallax="-23%"
    ></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide p-6">
        <div
          class="title text-3xl font-light text-white"
          data-swiper-parallax="-300"
        >
          Slide 1
        </div>
        <div
          class="subtitle mt-2 text-2xl text-white"
          data-swiper-parallax="-200"
        >
          Subtitle
        </div>
        <div class="text mt-4 text-white" data-swiper-parallax="-100">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at,
            consectetur cupiditate debitis expedita fugit, modi nemo nobis odit
            perferendis quaerat quia reiciendis repudiandae rerum sed?
          </p>
        </div>
      </div>
      <div class="swiper-slide p-6">
        <div
          class="title text-3xl font-light text-white"
          data-swiper-parallax="-300"
        >
          Slide 2
        </div>
        <div
          class="subtitle mt-2 text-2xl text-white"
          data-swiper-parallax="-200"
        >
          Subtitle
        </div>
        <div class="text mt-4 text-white" data-swiper-parallax="-100">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at,
            consectetur cupiditate debitis expedita fugit, modi nemo nobis odit
            perferendis quaerat quia reiciendis repudiandae rerum sed?
          </p>
        </div>
      </div>
      <div class="swiper-slide p-6">
        <div
          class="title text-3xl font-light text-white"
          data-swiper-parallax="-300"
        >
          Slide 3
        </div>
        <div
          class="subtitle mt-2 text-2xl text-white"
          data-swiper-parallax="-200"
        >
          Subtitle
        </div>
        <div class="text mt-4 text-white" data-swiper-parallax="-100">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at,
            consectetur cupiditate debitis expedita fugit, modi nemo nobis odit
            perferendis quaerat quia reiciendis repudiandae rerum sed?
          </p>
        </div>
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
                  
                

                  
  <div
    x-init="$nextTick(()=>$el._x_swiper = new Swiper($el, { grabCursor: true, effect: 'creative', creativeEffect: { prev: { shadow: true, translate: ['-125%', 0, -800], rotate: [0, 0, -90]}, next: { shadow: true,translate: ['125%', 0, -800], rotate: [0, 0, 90]} }}))"
    class="swiper rounded-lg"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-4.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-6.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-2.jpg"
          alt="image"
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-1.jpg"
          alt="image"
        />
      </div>
    </div>
  </div>