- Components
- Carousel
Basic
Code
<!-- basic -->
<div class="swiper max-w-3xl mx-auto mb-5" id="slider1">
<div class="swiper-wrapper">
<template x-for="item in items">
<div class="swiper-slide">
<img :src="`/assets/images/${item}`" class="w-full max-h-80 object-cover" alt="image" />
</div>
</template>
</div>
<a href="javascript:;" class="swiper-button-prev-ex1 grid place-content-center ltr:left-2 rtl:right-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2">
<svg> ... </svg>
</a>
<a href="javascript:;" class="swiper-button-next-ex1 grid place-content-center ltr:right-2 rtl:left-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2">
<svg> ... </svg>
</a>
<div class="swiper-pagination"></div>
</div>
<!-- script -->
<script>
const swiper1 = new Swiper("#slider1", {
navigation: {
nextEl: '.swiper-button-next-ex1',
prevEl: '.swiper-button-prev-ex1',
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
Autopaly
Code
<!-- autopaly -->
<div class="swiper max-w-3xl mx-auto mb-5" id="slider2">
<div class="swiper-wrapper">
<template x-for="item in items">
<div class="swiper-slide">
<img :src="`/assets/images/${item}`" class="w-full max-h-80 object-cover" alt="image" />
<div class="absolute z-[999] text-white top-1/4 ltr:left-12 rtl:right-12">
<div class="sm:text-3xl text-base font-bold">This is blog Image</div>
<div class="sm:mt-5 mt-1 w-4/5 text-base sm:block hidden font-medium">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
</div>
<button type="button" class="mt-4 btn btn-primary">Learn more</button>
</div>
</div>
</template>
</div>
<a href="javascript:;" class="swiper-button-prev-ex2 grid place-content-center ltr:left-2 rtl:right-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2">
<svg> ... </svg>
</a>
<a href="javascript:;" class="swiper-button-next-ex2 grid place-content-center ltr:right-2 rtl:left-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2">
<svg> ... </svg>
</a>
</div>
<!-- script -->
<script>
const swiper2 = new Swiper("#slider2", {
navigation: {
nextEl: '.swiper-button-next-ex2',
prevEl: '.swiper-button-prev-ex2',
},
autoplay: {
delay: 2000,
},
});
</script>
Vertical
Code
Lorem Ipsum is simply dummy text of the printing.
<!-- vertical -->
<div class="swiper max-w-3xl mx-auto mb-5" id="slider3">
<div class="swiper-wrapper">
<template x-for="item in items">
<div class="swiper-slide">
<img :src="`/assets/images/${item}`" class="w-full" alt="image" />
<div class="absolute z-[999] text-white top-1/2 left-1/2 w-full -translate-x-1/2 text-center">
<div class="sm:text-xl text-base font-medium mx-4">
Lorem Ipsum is simply dummy text of the printing.
</div>
</div>
</div>
</template>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- script -->
<script>
const swiper3 = new Swiper("#slider3", {
direction: "vertical",
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
Loop
Code
Slide 1
Lorem Ipsum is simply dummy text of the printing.
Slide 2
Lorem Ipsum is simply dummy text of the printing.
Slide 3
Lorem Ipsum is simply dummy text of the printing.
<!-- loop -->
<div class="swiper max-w-3xl mx-auto mb-5" id="slider4">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/assets/images/carousel1.jpeg" class="w-full" alt="image" />
<div class="absolute z-[999] text-white bottom-8 left-1/2 w-full -translate-x-1/2 text-center sm:px-0 px-11">
<div class="text-3xl font-bold">Slide 1</div>
<div class="mb-4 sm:text-base font-medium">
Lorem Ipsum is simply dummy text of the printing.
</div>
</div>
</div>
<div class="swiper-slide">
<img src="/assets/images/carousel2.jpeg" class="w-full" alt="image" />
<div class="absolute z-[999] text-white bottom-8 left-1/2 w-full -translate-x-1/2 text-center sm:px-0 px-11">
<div class="text-3xl font-bold">Slide 2</div>
<div class="mb-4 sm:text-base font-medium">
Lorem Ipsum is simply dummy text of the printing.
</div>
</div>
</div>
<div class="swiper-slide">
<img src="/assets/images/carousel3.jpeg" class="w-full" alt="image" />
<div class="absolute z-[999] text-white bottom-8 left-1/2 w-full -translate-x-1/2 text-center sm:px-0 px-11">
<div class="text-3xl font-bold">Slide 3</div>
<div class="mb-4 sm:text-base font-medium">
Lorem Ipsum is simply dummy text of the printing.
</div>
</div>
</div>
</div>
<a href="javascript:;" class="swiper-button-prev-ex4 grid place-content-center ltr:left-2 rtl:right-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2">
<svg> ... </svg>
</a>
<a href="javascript:;" class="swiper-button-next-ex4 grid place-content-center ltr:right-2 rtl:left-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2">
<svg> ... </svg>
</a>
<div class="swiper-pagination"></div>
</div>
<!-- script -->
<script>
const swiper4 = new Swiper("#slider4", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "fraction",
},
navigation: {
nextEl: '.swiper-button-next-ex4',
prevEl: '.swiper-button-prev-ex4',
},
});
</script>
Multiple Slides
Code
<!-- multiple -->
<div class="swiper" id="slider5">
<div class="swiper-wrapper">
<template x-for="item in items">
<div class="swiper-slide">
<img :src="`/assets/images/${item}`" class="w-full" alt="image" />
</div>
</template>
<template x-for="item in items">
<div class="swiper-slide">
<img :src="`/assets/images/${item}`" class="w-full" alt="image" />
</div>
</template>
</div>
<a href="javascript:;" class="swiper-button-prev-ex5 grid place-content-center ltr:left-2 rtl:right-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-[44%] -translate-y-1/2">
<svg> ... </svg>
</a>
<a href="javascript:;" class="swiper-button-next-ex5 grid place-content-center ltr:right-2 rtl:left-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-[44%] -translate-y-1/2">
<svg> ... </svg>
</a>
<div class="swiper-pagination">
</div>
</div>
<!-- script -->
<script>
const swiper5 = new Swiper("#slider5", {
navigation: {
nextEl: '.swiper-button-next-ex5',
prevEl: '.swiper-button-prev-ex5',
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
breakpoints: {
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
768: {
slidesPerView: 2,
spaceBetween: 40,
},
320: {
slidesPerView: 1,
spaceBetween: 20,
},
},
});
</script>
© . Vristo All rights reserved.