Lineone - Carousel 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 id="carousel1" 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>

  <!-- Javascript -->

  <script>
    const config1 = {
      navigation: {
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next",
      },
    };

    const carousel1 = document.querySelector("#carousel1");
    carousel1._swiper = new Swiper(carousel1, config1);
  </script>

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 id="carousel2" class="swiper rounded-lg">
    <div class="swiper-wrapper">
      <div class="swiper-slide h-full">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-3.jpg"
          alt="image"
        />
        <div class="swiper-lazy-preloader"></div>
      </div>
      <div class="swiper-slide h-full">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-7.jpg"
          alt="image"
        />
        <div class="swiper-lazy-preloader"></div>
      </div>
      <div class="swiper-slide h-full">
        <img
          class="h-full w-full object-cover"
          src="images/object/object-4.jpg"
          alt="image"
        />
        <div class="swiper-lazy-preloader"></div>
      </div>
      <div class="swiper-slide h-full">
        <img
          class="h-full w-full object-cover"
          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>

  <!-- Javascript -->

  <script>
    const config2 = {
      navigation: {
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next",
      },
      pagination: { el: ".swiper-pagination", type: "progressbar" },
      lazy: true,
    };

    const carousel2 = document.querySelector("#carousel2");
    carousel2._swiper = new Swiper(carousel2, config2);
  </script>

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 id="carousel3" 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>

  <!-- Javascript -->

  <script>
    const config3 = {
      slidesPerView: "auto",
      spaceBetween: 30,
      pagination: { el: ".swiper-pagination", clickable: true },
    };

    const carousel3 = document.querySelector("#carousel3");
    carousel3._swiper = new Swiper(carousel3, config3);
  </script>

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 id="carousel4" 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>

  <!-- Javascript -->

  <script>
    const config4 = {
      navigation: {
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next",
      },
      pagination: { el: ".swiper-pagination", clickable: true },
      zoom: { maxRatio: 4 },
    };

    const carousel4 = document.querySelector("#carousel4");
    carousel4._swiper = new Swiper(carousel4, config4);
  </script>

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 id="carousel5" 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>

  <!-- Javascript -->

  <script>
    const config5 = {
      effect: "flip",
      flipEffect: { slideShadows: false },
      navigation: {
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next",
      },
      pagination: { el: ".swiper-pagination", clickable: true },
    };

    const carousel5 = document.querySelector("#carousel5");
    carousel5._swiper = new Swiper(carousel5, config5);
  </script>

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 id="carousel6" 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>

  <!-- Javascript -->

  <script>
    const config6 = {
      effect: "cube",
      cubeEffect: { shadow: false },
      pagination: { el: ".swiper-pagination", clickable: true },
    };

    const carousel6 = document.querySelector("#carousel6");
    carousel6._swiper = new Swiper(carousel6, config6);
  </script>

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 id="carousel7" 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>

  <!-- Javascript -->

  <script>
    const config7 = { effect: "cards", grabCursor: true };

    const carousel7 = document.querySelector("#carousel7");
    carousel7._swiper = new Swiper(carousel7, config7);
  </script>

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 id="carousel8" 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>

  <!-- Javascript -->

  <script>
    const config8 = {
      pagination: { el: ".swiper-pagination", clickable: true },
    };

    const carousel8 = document.querySelector("#carousel8");
    carousel8._swiper = new Swiper(carousel8, config8);
  </script>

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 id="carousel9" 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>

  <!-- Javascript -->

  <script>
    const config9 = {
      direction: "vertical",
      pagination: { el: ".swiper-pagination", clickable: true },
    };

    const carousel9 = document.querySelector("#carousel9");
    carousel9._swiper = new Swiper(carousel9, config9);
  </script>

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 id="carousel10" 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>

  <!-- Javascript -->

  <script>
    const config10 = {
      scrollbar: { el: ".swiper-scrollbar", draggable: true },
      navigation: {
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next",
      },
      autoplay: { delay: 2000 },
    };

    const carousel10 = document.querySelector("#carousel10");
    carousel10._swiper = new Swiper(carousel10, config10);
  </script>

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 id="carousel11" 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>

  <!-- Javascript -->

  <script>
    const config11 = {
      effect: "fade",
      pagination: { el: ".swiper-pagination", clickable: true },
      navigation: {
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next",
      },
    };

    const carousel11 = document.querySelector("#carousel11");
    carousel11._swiper = new Swiper(carousel11, config11);
  </script>

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 id="carousel12" 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>

  <!-- Javascript -->

  <script>
    const config12 = {
      effect: "coverflow",
      coverflowEffect: { rotate: 35, slideShadows: false },
      navigation: {
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next",
      },
    };

    const carousel12 = document.querySelector("#carousel12");
    carousel12._swiper = new Swiper(carousel12, config12);
  </script>

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 id="carousel13" 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>

  <!-- Javascript -->

  <script>
    const config13 = {
      parallax: true,
      navigation: {
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next",
      },
    };

    const carousel13 = document.querySelector("#carousel13");
    carousel13._swiper = new Swiper(carousel13, config13);
  </script>

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 id="carousel14" 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>

  <!-- Javascript -->

  <script>
    const config14 = {
      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],
        },
      },
    };

    const carousel14 = document.querySelector("#carousel14");
    carousel14._swiper = new Swiper(carousel14, config14);
  </script>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

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