Responsive Tailwind CSS Testimonial Slider with Alpine.js Functionality
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Tailwind CSS Testimonial Slider with Alpine.js Functionality</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<section class="py-16">
<div class="container mx-auto px-4">
<div class="w-full mx-auto max-w-3xl flex flex-col justify-center relative p-8">
<div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl text-center">
<div>
<h1>Testimonials</h1>
<p class="text-balance">What our customers say.</p>
</div>
</div>
<div class="mt-8 border-t pt-12">
<div class="flex flex-col w-full" x-data="{
skip: 1,
atBeginning: false,
atEnd: false,
next() {
this.to((current, offset) => current + (offset * this.skip))
},
prev() {
this.to((current, offset) => current - (offset * this.skip))
},
to(strategy) {
let slider = this.$refs.slider
let current = slider.scrollLeft
let offset = slider.firstElementChild.getBoundingClientRect().width
slider.scrollTo({ left: strategy(current, offset), behavior: 'smooth' })
},
focusableWhenVisible: {
'x-intersect:enter'() {
this.$el.removeAttribute('tabindex')
},
'x-intersect:leave'() {
this.$el.setAttribute('tabindex', '-1')
},
},
disableNextAndPreviousButtons: {
'x-intersect:enter.threshold.05'() {
let slideEls = this.$el.parentElement.children
// If this is the first slide.
if (slideEls[0] === this.$el) {
this.atBeginning = true
// If this is the last slide.
} else if (slideEls[slideEls.length-1] === this.$el) {
this.atEnd = true
}
},
'x-intersect:leave.threshold.05'() {
let slideEls = this.$el.parentElement.children
// If this is the first slide.
if (slideEls[0] === this.$el) {
this.atBeginning = false
// If this is the last slide.
} else if (slideEls[slideEls.length-1] === this.$el) {
this.atEnd = false
}
},
},
}">
<div class="flex flex-col w-full items-center" aria-labelledby="carousel-label" role="region" tabindex="0" x-on:keydown.left="prev" x-on:keydown.right="next">
<h2 class="sr-only" hidden="" id="carousel-label">
Testimonials
</h2>
<span class="sr-only" hidden="" id="carousel-content-label">Testimonial Content</span>
<div class="flex items-center space-x-2 mt-4">
<button class="bg-blue-500 hover:bg-blue-600 size-8 flex focus:bg-blue-400 rounded-full items-center text-white opacity-50" :class="{ 'opacity-50 ': atBeginning }" :aria-disabled="atBeginning" :tabindex="atEnd ? -1 : 0" x-on:click="prev" tabindex="0" aria-disabled="true">
<span aria-hidden="true" class="mx-auto">←</span>
<span class="sr-only">Previous slide</span>
</button>
<button class="bg-blue-500 hover:bg-blue-600 size-8 flex focus:bg-blue-400 rounded-full items-center text-white" :class="{ 'opacity-50 ': atEnd }" :aria-disabled="atEnd" :tabindex="atEnd ? -1 : 0" x-on:click="next" tabindex="0">
<span aria-hidden="true" class="mx-auto">→</span>
<span class="sr-only">Next slide</span>
</button>
</div>
<ul class="flex gap-4 overflow-x-scroll mt-8 scrollbar-hide snap-mandatory snap-x w-full rounded-2xl" role="listbox" aria-labelledby="carousel-content-label" tabindex="0" x-ref="slider">
<li class="items-center justify-center w-full flex flex-col shrink-0 snap-start h-full p-8 rounded-2xl bg-white shadow-md" role="option" x-bind="disableNextAndPreviousButtons">
<figure>
<div class="max-w-2xl">
<div class="flex flex-col gap-6">
<p class="text-base text-gray-900 font-display text-balance">
"I've been using this services for years, and they consistently exceed my expectations. The support team is fantastic!"
</p>
<div class="flex items-center">
<div>
<img class="inline-block h-10 w-10 rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700">Pepe Madrid</p>
<p class="text-xs font-medium text-gray-500">CEO of Something INC</p>
</div>
</div>
</div>
</div>
</figure>
</li>
<li class="items-center justify-center w-full flex flex-col shrink-0 snap-start h-full p-8 rounded-2xl bg-white shadow-md" role="option" x-bind="disableNextAndPreviousButtons">
<figure>
<div class="max-w-2xl">
<div class="flex flex-col gap-6">
<p class="text-base text-gray-900 font-display text-balance">
"The financial solutions they offer are top-notch. I've seen significant growth in my investments since I started using their platform."
</p>
<div class="flex items-center">
<div>
<img class="inline-block h-10 w-10 rounded-full object-cover object-center" src="https://alfred.lexingtonthemes.com/avatar1.png" alt="">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700">Michael Andreuzza</p>
<p class="text-xs font-medium text-gray-500">CEO of Something INC</p>
</div>
</div>
</div>
</div>
</figure>
</li>
<li class="items-center justify-center w-full flex flex-col shrink-0 snap-start h-full p-8 rounded-2xl bg-white shadow-md" role="option" x-bind="disableNextAndPreviousButtons">
<figure>
<div class="max-w-2xl">
<div class="flex flex-col gap-6">
<p class="text-base text-gray-900 font-display text-balance">
"Their customer service is unparalleled. They really go the extra mile to ensure customer satisfaction."
</p>
<div class="flex items-center">
<div>
<img class="inline-block h-10 w-10 rounded-full object-cover object-center" src="https://plus.unsplash.com/premium_photo-1689568126014-06fea9d5d341?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700">Fernando Pio</p>
<p class="text-xs font-medium text-gray-500">CEO of Something INC</p>
</div>
</div>
</div>
</div>
</figure>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Tailwind CSS snippet demonstrates a dynamic and interactive testimonial slider enhanced with Alpine.js functionality. The slider provides a smooth and engaging way to display customer feedback, adapting seamlessly to various screen sizes.
Key Features:
- Responsive Design: The slider adjusts fluidly to different screen sizes, ensuring optimal viewing on desktops, tablets, and mobile devices.
- Alpine.js Integration: Utilizes Alpine.js for interactive features, enabling smooth transitions and dynamic content updates within the slider.
- Smooth Transitions: Implements smooth carousel transitions, enhancing user experience and visual appeal.
- Customizable Styling: Easily tailor the slider's appearance using Tailwind CSS utility classes to match your website's branding.
- Dynamic Content Handling: Alpine.js enables dynamic loading and manipulation of testimonial content, facilitating easy updates and additions.
- Intuitive Navigation: Provides clear and intuitive navigation controls, allowing users to easily browse through testimonials.
Implementation:
- Include Tailwind CSS and Alpine.js: Ensure that both Tailwind CSS and Alpine.js are included and properly configured in your project.
- Create the HTML Structure: Define the HTML structure for the testimonial slider, including container elements, testimonial items, and navigation controls.
- Integrate Alpine.js Logic: Implement Alpine.js directives and functions to manage the slider's state, transitions, and dynamic content.
- Apply Tailwind CSS Classes: Utilize Tailwind CSS utility classes to style the slider, testimonial items, and navigation elements.
- Customize and Extend: Modify and extend the HTML, CSS, and Alpine.js code to customize the slider's appearance and functionality according to your specific needs.
By following these steps, you can seamlessly integrate a responsive and interactive testimonial slider, powered by Tailwind CSS and Alpine.js, into your web project.
Join Our Community Call-to-Action Banner Section With Tailwind CSS
Bootstrap 5 Responsive Service Pricing Table Block
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
