Lineone - Swiper Component

Swiper

Components
Swiper

Default Carousel

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                    
  <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=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-top"
          src="images/object/object-3.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-2.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-9.jpg"
          alt=""
        />
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

Lazy Loading Images

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                    
  <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=""
        />
        <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=""
        />
        <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=""
        />
        <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=""
        />
        <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>

Space Between

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                      
  <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=""
        />
      </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=""
        />
      </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=""
        />
      </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=""
        />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

Zoom

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                    
  <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=""
          />
        </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=""
          />
        </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=""
          />
        </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=""
          />
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

Flip Effect

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                  
  <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=""
          />
        </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=""
          />
        </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=""
          />
        </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=""
          />
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

Cube Effect

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                    
  <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=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-6.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-2.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-1.jpg"
          alt=""
        />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

Card Effect

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                  
  <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=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-6.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-2.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-1.jpg"
          alt=""
        />
      </div>
    </div>
  </div>

Pagination

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                  
  <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=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-top"
          src="images/object/object-1.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-2.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-9.jpg"
          alt=""
        />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

Vertical Slider

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                    
  <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=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-8.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-2.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-1.jpg"
          alt=""
        />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

With Scrollbar

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                    
  <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=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-top"
          src="images/object/object-1.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-2.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-9.jpg"
          alt=""
        />
      </div>
    </div>
    <div class="swiper-scrollbar"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

Fade Effect

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                    
  <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=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-top"
          src="images/object/object-1.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-2.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-9.jpg"
          alt=""
        />
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

Coverflow Effect

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                    
  <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=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-top"
          src="images/object/object-1.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-2.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full object-cover object-center"
          src="images/object/object-9.jpg"
          alt=""
        />
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

Parallax

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

Slide 1

Subtitle

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?

Slide 2

Subtitle

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?

Slide 3

Subtitle

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?

                    
  <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>

Creative Effect

Code

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. Check out code for detail of usage.

                    
  <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=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-6.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-2.jpg"
          alt=""
        />
      </div>
      <div class="swiper-slide">
        <img
          class="h-full w-full rounded-lg object-cover"
          src="images/object/object-1.jpg"
          alt=""
        />
      </div>
    </div>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Swiper

Default Carousel

Lazy Loading Images

Space Between

Zoom

Flip Effect

Cube Effect

Card Effect

Pagination

Vertical Slider

With Scrollbar

Fade Effect

Coverflow Effect

Parallax

Creative Effect