Default Carousel
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="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-top"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-center"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-center"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
Lazy Loading Images
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="assets/picture/800x600.png"
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="assets/picture/800x600.png"
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="assets/picture/800x600.png"
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="assets/picture/800x600.png"
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
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="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide !w-10/12">
<img
class="h-full w-full rounded-lg object-cover object-top"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide !w-10/12">
<img
class="h-full w-full rounded-lg object-cover object-center"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide !w-10/12">
<img
class="h-full w-full rounded-lg object-cover object-center"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
Zoom
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="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img
class="h-full w-full object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img
class="h-full w-full object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img
class="h-full w-full object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
Flip Effect
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="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img
class="h-full w-full object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img
class="h-full w-full object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img
class="h-full w-full object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
Cube Effect
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="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full rounded-lg object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full rounded-lg object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full rounded-lg object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
Card Effect
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="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full rounded-lg object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full rounded-lg object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full rounded-lg object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
</div>
Pagination
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="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-top"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-center"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-center"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
Vertical Slider
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="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
With Scrollbar
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="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-top"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-center"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-center"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-scrollbar"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
Fade Effect
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="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-top"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-center"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-center"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
Coverflow Effect
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="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-top"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-center"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full object-cover object-center"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
Parallax
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('assets/picture/800x600.png')"
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
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="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full rounded-lg object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full rounded-lg object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="h-full w-full rounded-lg object-cover"
src="assets/picture/800x600.png"
alt=""
/>
</div>
</div>
</div>