Responsive Layout
Create card sliders that adapt to desktop, tablet, and mobile screens without breaking the layout.
Responsive tipsJavaScript sliders are one of the most useful interactive components for modern websites. They help display images, product cards, testimonials, blog posts, app screens, hero content, feature sections, portfolio items, pricing cards, and visual stories in a compact and engaging layout. A good slider can make a website feel more dynamic without making the page difficult to use.
In this guide, you will find 30 JavaScript slider examples for modern websites, including responsive image sliders, content carousels, product sliders, testimonial sliders, hero sliders, card sliders, thumbnail sliders, auto-playing slideshows, fullscreen sliders, vertical sliders, mobile swipe sliders, progress bar sliders, gallery sliders, and complete HTML, CSS, and JavaScript slider patterns you can customize for your own projects.
This post focuses on slider functionality, JavaScript interaction, navigation logic, responsive behavior, and reusable UI patterns. If you need related layout inspiration, you can also explore our modern website hero sections, modern CSS cards, modern CSS testimonials, and JavaScript modal examples.
What Is a JavaScript Slider?
A JavaScript slider is an interactive website component that lets users move between different slides, panels, cards, images, products, testimonials, or pieces of content. A slider can use arrows, dots, thumbnails, swipe gestures, progress bars, automatic playback, fade transitions, horizontal movement, vertical movement, or custom navigation logic.
Sliders are commonly used on homepage hero sections, ecommerce product sections, portfolio galleries, client testimonial areas, SaaS feature sections, app landing pages, pricing sections, blog layouts, logo strips, and image galleries. They allow websites to show more content in less space while keeping the page visually engaging.
The best JavaScript slider examples are not only decorative. They should be easy to control, responsive on mobile devices, readable, fast to load, and simple enough to customize. A well-built slider can improve content discovery, highlight key messages, showcase products, and guide visitors toward important calls to action.
Why JavaScript Sliders Matter
JavaScript sliders matter because they help websites present several pieces of content without forcing visitors to scroll through long sections. A slider can turn a static area into an interactive experience where users can browse products, compare features, read reviews, view images, explore case studies, or move through a step-by-step story.
- They save space by placing multiple images, cards, products, or content panels inside one section.
- They improve visual storytelling by letting hero sections, galleries, portfolios, and landing pages reveal content step by step.
- They support ecommerce browsing by showing featured products, bestsellers, related products, categories, or special offers.
- They help social proof sections by rotating testimonials, reviews, customer quotes, ratings, and client logos.
- They improve mobile layouts when large desktop grids need to become swipe-friendly sliders on smaller screens.
Sliders work especially well when they are used for content that naturally belongs in a sequence or collection. For example, a product carousel can support an ecommerce landing page, a testimonial slider can strengthen trust, a hero slider can highlight several campaigns, and a blog carousel can show recent articles without making the homepage too long.
JavaScript Slider vs Carousel vs Slideshow
The terms slider, carousel, and slideshow are often used together, but they can describe slightly different patterns. A slider usually moves between one main slide or panel at a time. A carousel often shows multiple items at once, such as product cards, blog cards, or logo cards. A slideshow usually rotates through images or content automatically, often with fade or slide transitions.
In real website projects, these terms overlap. Many users search for JavaScript slider examples when they also mean image carousel, content carousel, product slider, card slider, hero slideshow, or responsive slider. That is why this guide includes several types of JavaScript sliders instead of focusing on only one narrow pattern.
- Use an image slider when you want to show photos, banners, gallery images, portfolio visuals, or hero backgrounds.
- Use a content slider when each slide contains text, buttons, icons, feature descriptions, or mixed content blocks.
- Use a card carousel when you want to show products, blog posts, pricing cards, team members, services, or testimonials.
- Use a slideshow when the content should rotate automatically, such as banners, campaign images, or presentation-style sections.
- Use a thumbnail slider when users need to preview several images and choose a specific slide quickly.
What Should a Good JavaScript Slider Include?
A good JavaScript slider should make content easier to browse, not harder. The slider should have clear navigation, readable text, responsive spacing, touch-friendly controls, optimized images, accessible buttons, predictable behavior, and JavaScript that works even when multiple slider instances are used on the same page.
Before building a slider, decide what the component should actually do. A hero slider may need large visual slides, strong headlines, CTA buttons, and autoplay with manual controls. A product carousel may need multiple cards, prices, badges, and add-to-cart buttons. A testimonial slider may need quotes, ratings, names, and dots. A gallery slider may need thumbnails and larger image previews.
- Add previous and next buttons so users can control the slider manually.
- Use dots or indicators so visitors can see how many slides exist and which slide is active.
- Make controls large enough for mobile tapping and touch interaction.
- Use responsive CSS so images, cards, and text stay readable on small screens.
- Optimize images because large slider images can slow down a page quickly.
- Avoid hiding important content only inside slides that users may never view.
- Do not autoplay too fast because visitors need time to read slide content.
- Pause autoplay when needed especially when users hover, focus, or interact with the slider.
- Use unique class names to prevent conflicts when multiple examples or sliders exist on the same page.
- Keep JavaScript reusable so the same pattern can support different slider layouts.
You can combine JavaScript sliders with many other website sections. A hero slider can work with ideas from our modern website hero sections, a product carousel can support pricing tables or ecommerce cards, a testimonial slider can build trust alongside modern CSS testimonials, and a slider CTA can be paired with polished buttons from our modern CSS buttons guide.
30 JavaScript Slider Examples
Now let’s look at 30 JavaScript slider examples for real website projects. Each example uses a different slider layout, navigation style, transition effect, content type, or responsive UI pattern, so you can build image sliders, card carousels, product sliders, testimonial sliders, hero slideshows, thumbnail galleries, vertical sliders, mobile swipe sliders, progress sliders, and complete responsive JavaScript slider sections with visible HTML, CSS, and JavaScript code.
1. Basic JavaScript Image Slider
A basic JavaScript image slider is the simplest way to understand how slider logic works. This example uses a visible flex track, previous and next buttons, dot navigation, and lightweight vanilla JavaScript. It works without external images, so the preview does not depend on Unsplash, CDN images, or uploaded media files.
This slider is useful for image galleries, portfolio previews, landing page visuals, service sections, product image previews, and beginner-friendly JavaScript slider examples. The design uses CSS gradient image panels, but you can later replace those panels with real images from your own WordPress media library.
- Simple vanilla JavaScript slider
- Visible first slide even before JavaScript interaction
- Previous and next buttons
- Dot navigation with active state
- No external image files required
JavaScript
(function () {
const slider = document.querySelector("[data-vb-slider-one]");
if (!slider) return;
const track = slider.querySelector("[data-vb-slider-one-track]");
const dots = slider.querySelectorAll("[data-vb-slider-one-dot]");
const prev = slider.querySelector("[data-vb-slider-one-prev]");
const next = slider.querySelector("[data-vb-slider-one-next]");
const total = dots.length;
let index = 0;
function updateSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updateSlider(index - 1);
});
next.addEventListener("click", function () {
updateSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateSlider(Number(dot.getAttribute("data-vb-slider-one-dot")));
});
});
})();
HTML
<div class="vb-slider-one" data-vb-slider-one>
<div class="vb-slider-one-window">
<div class="vb-slider-one-track" data-vb-slider-one-track>
<div class="vb-slider-one-slide">
<div class="vb-slider-one-content">
<span>Image Slider</span>
<h3>Build a simple JavaScript slider</h3>
<p>This slider uses a visible track, basic controls, and dot navigation. It is a clean starting point for custom website sliders.</p>
<a href="#javascript-slider-examples">Explore examples</a>
</div>
<div class="vb-slider-one-image vb-slider-one-image-a">
<div>Slide 01</div>
<strong>Creative Workspace</strong>
</div>
</div>
<div class="vb-slider-one-slide">
<div class="vb-slider-one-content">
<span>Responsive UI</span>
<h3>Show several visuals in one section</h3>
<p>Use a slider when you want to present multiple visuals without creating a long page section or heavy image gallery.</p>
<a href="#javascript-slider-examples">View patterns</a>
</div>
<div class="vb-slider-one-image vb-slider-one-image-b">
<div>Slide 02</div>
<strong>Modern Interface</strong>
</div>
</div>
<div class="vb-slider-one-slide">
<div class="vb-slider-one-content">
<span>Slider Logic</span>
<h3>Move between slides with JavaScript</h3>
<p>The buttons and dots update the translate position of the slider track and show the selected slide.</p>
<a href="#javascript-slider-examples">Start building</a>
</div>
<div class="vb-slider-one-image vb-slider-one-image-c">
<div>Slide 03</div>
<strong>Visual Story</strong>
</div>
</div>
</div>
</div>
<div class="vb-slider-one-controls">
<button type="button" data-vb-slider-one-prev aria-label="Previous slide">‹</button>
<div class="vb-slider-one-dots">
<button type="button" class="is-active" data-vb-slider-one-dot="0" aria-label="Go to slide 1"></button>
<button type="button" data-vb-slider-one-dot="1" aria-label="Go to slide 2"></button>
<button type="button" data-vb-slider-one-dot="2" aria-label="Go to slide 3"></button>
</div>
<button type="button" data-vb-slider-one-next aria-label="Next slide">›</button>
</div>
</div>
CSS
.vb-slider-one,
.vb-slider-one * {
box-sizing: border-box;
}
.vb-slider-one {
margin: 28px 0;
padding: 28px;
border-radius: 28px;
background: #0f172a !important;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
overflow: hidden;
}
.vb-slider-one-window {
overflow: hidden;
border-radius: 24px;
}
.vb-slider-one-track {
display: flex;
width: 100%;
transform: translateX(0);
transition: transform 0.45s ease;
}
.vb-slider-one-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
gap: 28px;
align-items: center;
min-height: 520px;
padding: 42px;
background:
radial-gradient(circle at 12% 15%, rgba(56, 189, 248, 0.22), transparent 32%),
radial-gradient(circle at 86% 14%, rgba(124, 58, 237, 0.20), transparent 34%),
linear-gradient(135deg, #111827 0%, #0f172a 100%) !important;
}
.vb-slider-one-content span {
display: inline-flex;
margin-bottom: 16px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(14, 165, 233, 0.18);
border: 1px solid rgba(125, 211, 252, 0.30);
color: #bae6fd !important;
-webkit-text-fill-color: #bae6fd !important;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.vb-slider-one-content h3 {
margin: 0 0 16px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(34px, 5vw, 62px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.06em;
}
.vb-slider-one-content p {
max-width: 540px;
margin: 0 0 24px !important;
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-slider-one-content a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 14px 20px;
border-radius: 999px;
background: linear-gradient(135deg, #06b6d4, #2563eb);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 900;
text-decoration: none !important;
}
.vb-slider-one-image {
position: relative;
min-height: 340px;
border-radius: 30px;
overflow: hidden;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
}
.vb-slider-one-image::before {
content: "";
position: absolute;
inset: 24px;
border-radius: 24px;
background:
radial-gradient(circle at 22% 22%, rgba(255,255,255,0.36), transparent 24%),
radial-gradient(circle at 78% 34%, rgba(255,255,255,0.22), transparent 26%),
linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
border: 1px solid rgba(255,255,255,0.24);
}
.vb-slider-one-image::after {
content: "";
position: absolute;
right: 34px;
bottom: 34px;
width: 128px;
height: 128px;
border-radius: 34px;
background: rgba(255,255,255,0.18);
transform: rotate(14deg);
}
.vb-slider-one-image-a {
background: linear-gradient(135deg, #22d3ee, #2563eb 52%, #7c3aed) !important;
}
.vb-slider-one-image-b {
background: linear-gradient(135deg, #34d399, #0f766e 52%, #0f172a) !important;
}
.vb-slider-one-image-c {
background: linear-gradient(135deg, #fb923c, #db2777 52%, #7c3aed) !important;
}
.vb-slider-one-image div,
.vb-slider-one-image strong {
position: relative;
z-index: 2;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-slider-one-image div {
width: fit-content;
padding: 9px 12px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.55);
font-size: 13px;
font-weight: 850;
}
.vb-slider-one-image strong {
max-width: 260px;
font-size: 32px;
line-height: 1.05;
font-weight: 950;
letter-spacing: -0.05em;
}
.vb-slider-one-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 18px;
}
.vb-slider-one-controls button {
cursor: pointer;
}
.vb-slider-one-controls > button {
width: 46px;
height: 46px;
border: 1px solid rgba(255,255,255,0.20);
border-radius: 999px;
background: rgba(255,255,255,0.12);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 24px;
font-weight: 900;
}
.vb-slider-one-dots {
display: flex;
gap: 9px;
}
.vb-slider-one-dots button {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,0.34);
}
.vb-slider-one-dots button.is-active {
width: 30px;
background: #38bdf8;
}
@media (max-width: 900px) {
.vb-slider-one-slide {
grid-template-columns: 1fr;
min-height: 720px;
}
}
@media (max-width: 640px) {
.vb-slider-one {
padding: 18px;
}
.vb-slider-one-slide {
padding: 24px;
min-height: 700px;
}
.vb-slider-one-content h3 {
font-size: 36px !important;
}
.vb-slider-one-image {
min-height: 280px;
}
}
This basic JavaScript image slider is a reliable foundation for more advanced slider patterns. You can reuse the same track movement logic for image galleries, portfolio sections, product image previews, hero banners, landing page visuals, and simple content sliders.
2. Responsive Hero Image Slider
A responsive hero image slider is useful when a homepage or landing page needs to highlight multiple campaigns, services, products, offers, or visual messages inside one high-impact section. Instead of using a static hero banner, this slider lets visitors move between several hero slides with different headlines, supporting text, CTA buttons, and visual panels.
This example uses a premium landing page layout with large typography, CSS-generated hero visuals, slide numbers, dot indicators, arrow controls, and responsive behavior. It works without external images, so the design stays visible even when image loading is blocked.
- Responsive hero slider for homepages and landing pages
- Large headline, supporting text, CTA buttons, and visual card
- Uses arrows, dots, and slide number indicators
- CSS-only hero design without external images
- Good for agencies, SaaS websites, ecommerce campaigns, portfolios, and business websites
JavaScript
(function () {
const slider = document.querySelector("[data-vb-slider-two]");
if (!slider) return;
const track = slider.querySelector("[data-vb-slider-two-track]");
const dots = slider.querySelectorAll("[data-vb-slider-two-dot]");
const prev = slider.querySelector("[data-vb-slider-two-prev]");
const next = slider.querySelector("[data-vb-slider-two-next]");
const total = dots.length;
let index = 0;
function updateSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updateSlider(index - 1);
});
next.addEventListener("click", function () {
updateSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateSlider(Number(dot.getAttribute("data-vb-slider-two-dot")));
});
});
})();
HTML
<div class="vb-slider-two" data-vb-slider-two>
<div class="vb-slider-two-window">
<div class="vb-slider-two-track" data-vb-slider-two-track>
<section class="vb-slider-two-slide vb-slider-two-slide-a">
<div class="vb-slider-two-copy">
<span>Hero Slider</span>
<h3>Design landing pages that feel alive</h3>
<p>Create a responsive hero image slider with large headlines, CTA buttons, dots, arrows, and polished JavaScript slide navigation.</p>
<div class="vb-slider-two-actions">
<a class="vb-slider-two-primary" href="#javascript-slider-examples">View examples</a>
<a class="vb-slider-two-secondary" href="#what-is-a-javascript-slider">Learn basics</a>
</div>
</div>
<div class="vb-slider-two-card">
<div class="vb-slider-two-card-top">
<span>Current slide</span>
<strong>01</strong>
</div>
<div class="vb-slider-two-visual"></div>
<p>Use hero sliders for campaigns, product launches, portfolio stories, or featured landing page content.</p>
</div>
</section>
<section class="vb-slider-two-slide vb-slider-two-slide-b">
<div class="vb-slider-two-copy">
<span>Creative UI</span>
<h3>Highlight more than one message</h3>
<p>A hero slider can show several offers, service angles, case studies, or calls to action without building a long homepage header.</p>
<div class="vb-slider-two-actions">
<a class="vb-slider-two-primary" href="#javascript-slider-examples">Explore patterns</a>
<a class="vb-slider-two-secondary" href="#why-javascript-sliders-matter">Why sliders matter</a>
</div>
</div>
<div class="vb-slider-two-card">
<div class="vb-slider-two-card-top">
<span>Current slide</span>
<strong>02</strong>
</div>
<div class="vb-slider-two-visual"></div>
<p>Combine strong visual direction with readable copy, clear buttons, and simple JavaScript controls.</p>
</div>
</section>
<section class="vb-slider-two-slide vb-slider-two-slide-c">
<div class="vb-slider-two-copy">
<span>Responsive Design</span>
<h3>Make hero content work on every screen</h3>
<p>This hero slider stacks content on smaller screens, keeps controls visible, and maintains a strong visual hierarchy.</p>
<div class="vb-slider-two-actions">
<a class="vb-slider-two-primary" href="#javascript-slider-examples">Build the section</a>
<a class="vb-slider-two-secondary" href="#responsive-slider-design-tips">Responsive tips</a>
</div>
</div>
<div class="vb-slider-two-card">
<div class="vb-slider-two-card-top">
<span>Current slide</span>
<strong>03</strong>
</div>
<div class="vb-slider-two-visual"></div>
<p>Good hero sliders should support mobile users, not only look impressive on large desktop screens.</p>
</div>
</section>
</div>
</div>
<div class="vb-slider-two-controls">
<button type="button" data-vb-slider-two-prev aria-label="Previous hero slide">‹</button>
<div class="vb-slider-two-dots">
<button type="button" class="is-active" data-vb-slider-two-dot="0" aria-label="Go to hero slide 1"></button>
<button type="button" data-vb-slider-two-dot="1" aria-label="Go to hero slide 2"></button>
<button type="button" data-vb-slider-two-dot="2" aria-label="Go to hero slide 3"></button>
</div>
<button type="button" data-vb-slider-two-next aria-label="Next hero slide">›</button>
</div>
</div>
CSS
.vb-slider-two,
.vb-slider-two * {
box-sizing: border-box;
}
.vb-slider-two {
margin: 28px 0;
padding: 28px;
border-radius: 28px;
background: #020617 !important;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
overflow: hidden;
}
.vb-slider-two-window {
overflow: hidden;
border-radius: 26px;
}
.vb-slider-two-track {
display: flex;
width: 100%;
transform: translateX(0);
transition: transform 0.5s ease;
}
.vb-slider-two-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(0, 0.94fr) minmax(300px, 0.68fr);
gap: 38px;
align-items: center;
min-height: 620px;
padding: 58px;
}
.vb-slider-two-slide-a {
background:
radial-gradient(circle at 18% 18%, rgba(14, 165, 233, 0.36), transparent 34%),
radial-gradient(circle at 82% 16%, rgba(124, 58, 237, 0.32), transparent 36%),
linear-gradient(135deg, #020617 0%, #0f172a 48%, #111827 100%) !important;
}
.vb-slider-two-slide-b {
background:
radial-gradient(circle at 16% 18%, rgba(34, 197, 94, 0.34), transparent 34%),
radial-gradient(circle at 84% 18%, rgba(20, 184, 166, 0.30), transparent 36%),
linear-gradient(135deg, #022c22 0%, #0f172a 52%, #020617 100%) !important;
}
.vb-slider-two-slide-c {
background:
radial-gradient(circle at 18% 18%, rgba(249, 115, 22, 0.32), transparent 34%),
radial-gradient(circle at 82% 20%, rgba(236, 72, 153, 0.30), transparent 36%),
linear-gradient(135deg, #1f2937 0%, #111827 52%, #020617 100%) !important;
}
.vb-slider-two-copy span {
display: inline-flex;
margin-bottom: 18px;
padding: 9px 13px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.16);
color: #e0f2fe !important;
-webkit-text-fill-color: #e0f2fe !important;
font-size: 13px;
font-weight: 950;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.vb-slider-two-copy h3 {
max-width: 720px;
margin: 0 0 18px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(42px, 6vw, 82px) !important;
line-height: 0.96 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-slider-two-copy p {
max-width: 590px;
margin: 0 0 28px !important;
color: #dbeafe !important;
-webkit-text-fill-color: #dbeafe !important;
font-size: 17px;
line-height: 1.75;
font-weight: 650;
}
.vb-slider-two-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.vb-slider-two-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 14px 20px;
border-radius: 999px;
font-size: 14px;
font-weight: 950;
line-height: 1;
text-decoration: none !important;
}
.vb-slider-two-primary {
background: linear-gradient(135deg, #06b6d4, #2563eb 58%, #7c3aed);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-slider-two-secondary {
background: rgba(255,255,255,0.12);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border: 1px solid rgba(255,255,255,0.18);
}
.vb-slider-two-card {
justify-self: end;
width: min(100%, 370px);
padding: 22px;
border-radius: 30px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.16);
box-shadow: 0 28px 80px rgba(0,0,0,0.28);
}
.vb-slider-two-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 18px;
}
.vb-slider-two-card-top span {
color: #bae6fd !important;
-webkit-text-fill-color: #bae6fd !important;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vb-slider-two-card-top strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 34px;
line-height: 1;
font-weight: 950;
}
.vb-slider-two-visual {
position: relative;
overflow: hidden;
height: 210px;
border-radius: 24px;
background: linear-gradient(135deg, #38bdf8, #2563eb 48%, #7c3aed) !important;
}
.vb-slider-two-slide-b .vb-slider-two-visual {
background: linear-gradient(135deg, #4ade80, #0f766e 50%, #0f172a) !important;
}
.vb-slider-two-slide-c .vb-slider-two-visual {
background: linear-gradient(135deg, #fb923c, #db2777 50%, #7c3aed) !important;
}
.vb-slider-two-visual::before {
content: "";
position: absolute;
inset: 22px;
border-radius: 22px;
background:
radial-gradient(circle at 20% 24%, rgba(255,255,255,0.35), transparent 24%),
radial-gradient(circle at 78% 32%, rgba(255,255,255,0.22), transparent 25%),
linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
border: 1px solid rgba(255,255,255,0.24);
}
.vb-slider-two-visual::after {
content: "";
position: absolute;
right: 34px;
bottom: -22px;
width: 120px;
height: 120px;
border-radius: 32px;
background: rgba(255,255,255,0.18);
transform: rotate(16deg);
}
.vb-slider-two-card p {
margin: 18px 0 0 !important;
color: #e0f2fe !important;
-webkit-text-fill-color: #e0f2fe !important;
font-size: 14px;
line-height: 1.65;
font-weight: 700;
}
.vb-slider-two-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 18px;
}
.vb-slider-two-controls button {
cursor: pointer;
}
.vb-slider-two-controls > button {
width: 48px;
height: 48px;
border: 1px solid rgba(255,255,255,0.20);
border-radius: 999px;
background: rgba(255,255,255,0.14);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 24px;
font-weight: 900;
}
.vb-slider-two-dots {
display: flex;
gap: 10px;
}
.vb-slider-two-dots button {
width: 11px;
height: 11px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,0.34);
}
.vb-slider-two-dots button.is-active {
width: 34px;
background: #ffffff;
}
@media (max-width: 980px) {
.vb-slider-two-slide {
grid-template-columns: 1fr;
min-height: 780px;
}
.vb-slider-two-card {
justify-self: start;
width: min(100%, 430px);
}
}
@media (max-width: 640px) {
.vb-slider-two {
padding: 18px;
}
.vb-slider-two-slide {
padding: 28px;
min-height: 800px;
}
.vb-slider-two-copy h3 {
font-size: 42px !important;
}
.vb-slider-two-copy p {
font-size: 15px;
}
.vb-slider-two-actions {
flex-direction: column;
}
.vb-slider-two-actions a {
width: 100%;
}
}
This responsive hero image slider is a strong pattern for high-impact landing pages. You can adapt it for campaign banners, SaaS hero sections, ecommerce promotions, portfolio websites, agency homepages, service pages, and modern business websites that need more than one hero message.
3. Card Slider with Multiple Visible Cards
A card slider with multiple visible cards is useful when you want to show several pieces of content in one row while still giving users slider controls. This pattern works well for services, features, blog cards, course modules, dashboard widgets, team cards, app benefits, and content previews.
This example uses a clean SaaS-style layout with soft shadows, rounded cards, numbered feature blocks, arrow controls, and responsive behavior. On desktop it shows multiple cards at once, while on smaller screens the layout becomes easier to browse with fewer visible cards.
- Multiple visible cards on desktop
- Clean SaaS-style card layout
- Previous and next controls
- Responsive card width with JavaScript scroll movement
- Good for features, services, blog cards, team cards, and UI content sections
JavaScript
(function () {
const slider = document.querySelector("[data-vb-card-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-card-slider-track]");
const prev = slider.querySelector("[data-vb-card-slider-prev]");
const next = slider.querySelector("[data-vb-card-slider-next]");
const progress = slider.querySelector("[data-vb-card-slider-progress]");
const items = slider.querySelectorAll(".vb-card-slider-item");
let index = 0;
function getVisibleCount() {
if (window.innerWidth <= 640) return 1;
if (window.innerWidth <= 980) return 2;
return 3;
}
function updateSlider(newIndex) {
const visible = getVisibleCount();
const maxIndex = Math.max(items.length - visible, 0);
if (newIndex < 0) {
index = maxIndex;
} else if (newIndex > maxIndex) {
index = 0;
} else {
index = newIndex;
}
const itemWidth = items[0].getBoundingClientRect().width;
const gap = 18;
track.style.transform = "translateX(-" + ((itemWidth + gap) * index) + "px)";
if (progress) {
const progressWidth = maxIndex === 0 ? 100 : ((index + 1) / (maxIndex + 1)) * 100;
progress.style.width = progressWidth + "%";
}
}
prev.addEventListener("click", function () {
updateSlider(index - 1);
});
next.addEventListener("click", function () {
updateSlider(index + 1);
});
window.addEventListener("resize", function () {
updateSlider(index);
});
})();
HTML
<div class="vb-card-slider" data-vb-card-slider>
<div class="vb-card-slider-header">
<div>
<span class="vb-card-slider-kicker">Feature Cards</span>
<h3>Browse modern UI cards in a smooth horizontal slider</h3>
</div>
<div class="vb-card-slider-header-controls">
<button type="button" data-vb-card-slider-prev aria-label="Previous cards">‹</button>
<button type="button" data-vb-card-slider-next aria-label="Next cards">›</button>
</div>
</div>
<div class="vb-card-slider-window">
<div class="vb-card-slider-track" data-vb-card-slider-track>
<article class="vb-card-slider-item">
<div class="vb-card-slider-icon">01</div>
<h4>Responsive Layout</h4>
<p>Create card sliders that adapt to desktop, tablet, and mobile screens without breaking the layout.</p>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</article>
<article class="vb-card-slider-item">
<div class="vb-card-slider-icon">02</div>
<h4>Clean JavaScript</h4>
<p>Use simple JavaScript to move the card track and keep the slider easy to reuse in other projects.</p>
<a href="#javascript-slider-best-practices">Best practices</a>
</article>
<article class="vb-card-slider-item">
<div class="vb-card-slider-icon">03</div>
<h4>Content Preview</h4>
<p>Show services, features, posts, products, lessons, or team cards inside one compact UI component.</p>
<a href="#javascript-slider-examples">View examples</a>
</article>
<article class="vb-card-slider-item">
<div class="vb-card-slider-icon">04</div>
<h4>Soft UI Style</h4>
<p>Use soft borders, spacious cards, and readable typography for a professional website section.</p>
<a href="#what-should-a-good-javascript-slider-include">Slider rules</a>
</article>
<article class="vb-card-slider-item">
<div class="vb-card-slider-icon">05</div>
<h4>Reusable Pattern</h4>
<p>This layout can be adapted for SaaS features, agency services, dashboard widgets, or article cards.</p>
<a href="#common-javascript-slider-mistakes">Avoid mistakes</a>
</article>
</div>
</div>
<div class="vb-card-slider-progress">
<span data-vb-card-slider-progress></span>
</div>
</div>
CSS
.vb-card-slider,
.vb-card-slider * {
box-sizing: border-box;
}
.vb-card-slider {
margin: 28px 0;
padding: 30px;
border-radius: 18px;
background:
linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
border: 1px solid rgba(148, 163, 184, 0.30);
box-shadow: 0 20px 55px rgba(15, 23, 42, 0.10);
overflow: hidden;
}
.vb-card-slider-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.vb-card-slider-kicker {
display: inline-flex;
margin-bottom: 10px;
padding: 7px 10px;
border-radius: 8px;
background: #e0f2fe;
color: #0369a1 !important;
-webkit-text-fill-color: #0369a1 !important;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-card-slider-header h3 {
max-width: 640px;
margin: 0 !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(30px, 4vw, 48px) !important;
line-height: 1.04 !important;
font-weight: 950 !important;
letter-spacing: -0.055em;
}
.vb-card-slider-header-controls {
display: flex;
gap: 10px;
flex: 0 0 auto;
}
.vb-card-slider-header-controls button {
width: 44px;
height: 44px;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 14px;
background: #ffffff;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 24px;
font-weight: 900;
line-height: 1;
cursor: pointer;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vb-card-slider-header-controls button:hover {
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}
.vb-card-slider-window {
overflow: hidden;
}
.vb-card-slider-track {
display: flex;
gap: 18px;
transform: translateX(0);
transition: transform 0.42s ease;
}
.vb-card-slider-item {
flex: 0 0 calc((100% - 36px) / 3);
min-height: 320px;
padding: 24px;
border-radius: 16px;
background: #ffffff !important;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}
.vb-card-slider-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
margin-bottom: 22px;
border-radius: 14px;
background: linear-gradient(135deg, #0ea5e9, #2563eb);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 15px;
font-weight: 950;
letter-spacing: -0.03em;
}
.vb-card-slider-item:nth-child(2) .vb-card-slider-icon {
background: linear-gradient(135deg, #10b981, #0f766e);
}
.vb-card-slider-item:nth-child(3) .vb-card-slider-icon {
background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.vb-card-slider-item:nth-child(4) .vb-card-slider-icon {
background: linear-gradient(135deg, #f97316, #ea580c);
}
.vb-card-slider-item:nth-child(5) .vb-card-slider-icon {
background: linear-gradient(135deg, #ec4899, #be185d);
}
.vb-card-slider-item h4 {
margin: 0 0 12px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 23px !important;
line-height: 1.12 !important;
font-weight: 900 !important;
letter-spacing: -0.035em;
}
.vb-card-slider-item p {
margin: 0 0 22px !important;
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 15px;
line-height: 1.7;
font-weight: 600;
}
.vb-card-slider-item a {
display: inline-flex;
color: #2563eb !important;
-webkit-text-fill-color: #2563eb !important;
font-size: 14px;
font-weight: 900;
text-decoration: none !important;
}
.vb-card-slider-progress {
position: relative;
height: 7px;
margin-top: 22px;
border-radius: 999px;
background: #e2e8f0;
overflow: hidden;
}
.vb-card-slider-progress span {
display: block;
width: 50%;
height: 100%;
border-radius: 999px;
background: linear-gradient(135deg, #06b6d4, #2563eb);
transition: width 0.3s ease;
}
@media (max-width: 980px) {
.vb-card-slider-item {
flex-basis: calc((100% - 18px) / 2);
}
}
@media (max-width: 640px) {
.vb-card-slider {
padding: 20px;
border-radius: 16px;
}
.vb-card-slider-header {
align-items: flex-start;
flex-direction: column;
}
.vb-card-slider-header h3 {
font-size: 32px !important;
}
.vb-card-slider-item {
flex-basis: 100%;
min-height: 300px;
}
}
This multiple-card JavaScript slider is a practical choice for feature sections, services, blog previews, team cards, lessons, dashboard widgets, and modern content blocks. The structure is lightweight, responsive, and easy to customize for different website sections.
4. Product Carousel Slider
A product carousel slider helps ecommerce websites show featured products, bestsellers, related products, new arrivals, sale items, or product collections without taking too much vertical space. This type of JavaScript carousel is useful for online stores, product landing pages, SaaS pricing add-ons, digital product marketplaces, and shop homepages.
This example uses a darker premium ecommerce design with product-style cards, sale badges, price blocks, rating text, and a bold shop interface. The layout is intentionally different from the previous card slider: it uses stronger contrast, sharper corners, darker colors, and a more commercial product showcase style.
- Premium ecommerce product carousel layout
- Product cards with badge, title, price, rating, and CTA button
- Dark shop-style design with sharper corners
- Responsive JavaScript carousel movement
- Good for WooCommerce sections, product pages, shop homepages, and landing pages
Featured Products
Premium product carousel for modern ecommerce sections
Use this JavaScript product slider to showcase featured items, bestsellers, seasonal offers, or related products.
Sale
Smart Desk Lamp
Minimal LED desk lamp with adjustable brightness and modern workspace style.
$49
View
New
Wireless Speaker
Compact premium speaker card for ecommerce carousel and product showcase sections.
$79
View
Hot
Travel Backpack
Stylish travel product card with bold visual area and clean purchase action.
$119
View
-20%
Desk Organizer
Useful product carousel card for shop pages, landing pages, and related items.
$35
View
JavaScript
(function () {
const carousel = document.querySelector("[data-vb-product-carousel]");
if (!carousel) return;
const track = carousel.querySelector("[data-vb-product-carousel-track]");
const cards = carousel.querySelectorAll(".vb-product-card");
const prev = carousel.querySelector("[data-vb-product-carousel-prev]");
const next = carousel.querySelector("[data-vb-product-carousel-next]");
const dots = carousel.querySelectorAll("[data-vb-product-carousel-dot]");
let index = 0;
function getVisibleCount() {
if (window.innerWidth <= 560) return 1;
if (window.innerWidth <= 800) return 2;
if (window.innerWidth <= 1100) return 3;
return 4;
}
function updateCarousel(newIndex) {
const visible = getVisibleCount();
const maxIndex = Math.max(cards.length - visible, 0);
if (newIndex < 0) {
index = maxIndex;
} else if (newIndex > maxIndex) {
index = 0;
} else {
index = newIndex;
}
const cardWidth = cards[0].getBoundingClientRect().width;
const gap = 18;
track.style.transform = "translateX(-" + ((cardWidth + gap) * index) + "px)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === Math.min(index, dots.length - 1));
});
}
prev.addEventListener("click", function () {
updateCarousel(index - 1);
});
next.addEventListener("click", function () {
updateCarousel(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateCarousel(Number(dot.getAttribute("data-vb-product-carousel-dot")));
});
});
window.addEventListener("resize", function () {
updateCarousel(index);
});
})();
HTML
<div class="vb-product-carousel" data-vb-product-carousel>
<div class="vb-product-carousel-top">
<div>
<span>Featured Products</span>
<h3>Premium product carousel for modern ecommerce sections</h3>
<p>Use this JavaScript product slider to showcase featured items, bestsellers, seasonal offers, or related products.</p>
</div>
<div class="vb-product-carousel-controls">
<button type="button" data-vb-product-carousel-prev aria-label="Previous products">‹</button>
<button type="button" data-vb-product-carousel-next aria-label="Next products">›</button>
</div>
</div>
<div class="vb-product-carousel-window">
<div class="vb-product-carousel-track" data-vb-product-carousel-track>
<article class="vb-product-card">
<div class="vb-product-card-image vb-product-card-image-a">
<span>Sale</span>
</div>
<div class="vb-product-card-body">
<div class="vb-product-card-rating">★★★★★ <em>4.9</em></div>
<h4>Smart Desk Lamp</h4>
<p>Minimal LED desk lamp with adjustable brightness and modern workspace style.</p>
<div class="vb-product-card-bottom">
<strong>$49</strong>
<a href="#javascript-slider-examples">View</a>
</div>
</div>
</article>
<article class="vb-product-card">
<div class="vb-product-card-image vb-product-card-image-b">
<span>New</span>
</div>
<div class="vb-product-card-body">
<div class="vb-product-card-rating">★★★★★ <em>4.8</em></div>
<h4>Wireless Speaker</h4>
<p>Compact premium speaker card for ecommerce carousel and product showcase sections.</p>
<div class="vb-product-card-bottom">
<strong>$79</strong>
<a href="#javascript-slider-examples">View</a>
</div>
</div>
</article>
<article class="vb-product-card">
<div class="vb-product-card-image vb-product-card-image-c">
<span>Hot</span>
</div>
<div class="vb-product-card-body">
<div class="vb-product-card-rating">★★★★★ <em>5.0</em></div>
<h4>Travel Backpack</h4>
<p>Stylish travel product card with bold visual area and clean purchase action.</p>
<div class="vb-product-card-bottom">
<strong>$119</strong>
<a href="#javascript-slider-examples">View</a>
</div>
</div>
</article>
<article class="vb-product-card">
<div class="vb-product-card-image vb-product-card-image-d">
<span>-20%</span>
</div>
<div class="vb-product-card-body">
<div class="vb-product-card-rating">★★★★☆ <em>4.7</em></div>
<h4>Desk Organizer</h4>
<p>Useful product carousel card for shop pages, landing pages, and related items.</p>
<div class="vb-product-card-bottom">
<strong>$35</strong>
<a href="#javascript-slider-examples">View</a>
</div>
</div>
</article>
</div>
</div>
<div class="vb-product-carousel-dots">
<button type="button" class="is-active" data-vb-product-carousel-dot="0" aria-label="Go to product group 1"></button>
<button type="button" data-vb-product-carousel-dot="1" aria-label="Go to product group 2"></button>
</div>
</div>
CSS
.vb-product-carousel,
.vb-product-carousel * {
box-sizing: border-box;
}
.vb-product-carousel {
margin: 28px 0;
padding: 28px;
border-radius: 8px;
background:
linear-gradient(135deg, #030712 0%, #111827 52%, #1f2937 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 26px 80px rgba(15, 23, 42, 0.32);
overflow: hidden;
}
.vb-product-carousel-top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: end;
margin-bottom: 24px;
}
.vb-product-carousel-top span {
display: inline-flex;
margin-bottom: 12px;
padding: 7px 11px;
border-radius: 3px;
background: #f59e0b;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-product-carousel-top h3 {
max-width: 760px;
margin: 0 0 12px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(30px, 4vw, 52px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.055em;
}
.vb-product-carousel-top p {
max-width: 680px;
margin: 0 !important;
color: #d1d5db !important;
-webkit-text-fill-color: #d1d5db !important;
font-size: 16px;
line-height: 1.7;
font-weight: 600;
}
.vb-product-carousel-controls {
display: flex;
gap: 10px;
}
.vb-product-carousel-controls button {
width: 46px;
height: 46px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 4px;
background: rgba(255, 255, 255, 0.08);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 25px;
font-weight: 900;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.vb-product-carousel-controls button:hover {
transform: translateY(-2px);
background: rgba(245, 158, 11, 0.22);
}
.vb-product-carousel-window {
overflow: hidden;
}
.vb-product-carousel-track {
display: flex;
gap: 18px;
transform: translateX(0);
transition: transform 0.45s ease;
}
.vb-product-card {
flex: 0 0 calc((100% - 54px) / 4);
overflow: hidden;
border-radius: 6px;
background: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.10);
}
.vb-product-card-image {
position: relative;
min-height: 210px;
background: linear-gradient(135deg, #0ea5e9, #1d4ed8) !important;
overflow: hidden;
}
.vb-product-card-image::before {
content: "";
position: absolute;
inset: 28px;
border-radius: 999px;
background:
radial-gradient(circle at 35% 35%, rgba(255,255,255,0.46), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04));
border: 1px solid rgba(255,255,255,0.24);
}
.vb-product-card-image::after {
content: "";
position: absolute;
right: 22px;
bottom: 22px;
width: 78px;
height: 78px;
border-radius: 18px;
background: rgba(255,255,255,0.20);
transform: rotate(12deg);
}
.vb-product-card-image-b {
background: linear-gradient(135deg, #16a34a, #065f46) !important;
}
.vb-product-card-image-c {
background: linear-gradient(135deg, #7c3aed, #db2777) !important;
}
.vb-product-card-image-d {
background: linear-gradient(135deg, #f97316, #b45309) !important;
}
.vb-product-card-image span {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
padding: 7px 9px;
border-radius: 3px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vb-product-card-body {
padding: 20px;
}
.vb-product-card-rating {
margin-bottom: 10px;
color: #f59e0b !important;
-webkit-text-fill-color: #f59e0b !important;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.04em;
}
.vb-product-card-rating em {
color: #6b7280 !important;
-webkit-text-fill-color: #6b7280 !important;
font-style: normal;
font-weight: 800;
}
.vb-product-card h4 {
margin: 0 0 10px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 21px !important;
line-height: 1.12 !important;
font-weight: 950 !important;
letter-spacing: -0.035em;
}
.vb-product-card p {
min-height: 76px;
margin: 0 0 18px !important;
color: #6b7280 !important;
-webkit-text-fill-color: #6b7280 !important;
font-size: 14px;
line-height: 1.55;
font-weight: 600;
}
.vb-product-card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.vb-product-card-bottom strong {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 24px;
line-height: 1;
font-weight: 950;
}
.vb-product-card-bottom a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 10px 14px;
border-radius: 4px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 13px;
font-weight: 900;
text-decoration: none !important;
}
.vb-product-carousel-dots {
display: flex;
justify-content: center;
gap: 9px;
margin-top: 20px;
}
.vb-product-carousel-dots button {
width: 26px;
height: 5px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.26);
cursor: pointer;
}
.vb-product-carousel-dots button.is-active {
background: #f59e0b;
}
@media (max-width: 1100px) {
.vb-product-card {
flex-basis: calc((100% - 36px) / 3);
}
}
@media (max-width: 800px) {
.vb-product-carousel-top {
grid-template-columns: 1fr;
}
.vb-product-card {
flex-basis: calc((100% - 18px) / 2);
}
}
@media (max-width: 560px) {
.vb-product-carousel {
padding: 20px;
}
.vb-product-card {
flex-basis: 100%;
}
.vb-product-carousel-top h3 {
font-size: 32px !important;
}
}
This product carousel slider is a practical ecommerce pattern for featured products, related products, bestseller sections, sale campaigns, new arrivals, and shop homepage blocks. You can connect the same layout to real product images, WooCommerce links, prices, and product categories.
5. Testimonial Slider
A testimonial slider is useful for showing customer reviews, client quotes, ratings, feedback, case study snippets, and social proof in a compact section. Instead of displaying a long list of reviews, this JavaScript testimonial slider lets visitors move between several strong quotes with clean navigation and a polished trust-focused layout.
This example uses a warm editorial-style design with quote cards, customer names, rating text, profile badges, and a side highlight panel. It is visually different from the previous examples and works without external images because the avatars are generated with CSS initials.
- JavaScript testimonial slider for reviews and client quotes
- CSS-generated avatar initials without external images
- Rating text, customer role, quote, and trust panel
- Previous and next controls with dot navigation
- Good for landing pages, SaaS websites, agencies, service pages, and ecommerce stores
JavaScript
(function () {
const slider = document.querySelector("[data-vb-testimonial-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-testimonial-slider-track]");
const dots = slider.querySelectorAll("[data-vb-testimonial-slider-dot]");
const prev = slider.querySelector("[data-vb-testimonial-slider-prev]");
const next = slider.querySelector("[data-vb-testimonial-slider-next]");
const total = dots.length;
let index = 0;
function updateTestimonial(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updateTestimonial(index - 1);
});
next.addEventListener("click", function () {
updateTestimonial(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateTestimonial(Number(dot.getAttribute("data-vb-testimonial-slider-dot")));
});
});
})();
HTML
<div class="vb-testimonial-slider" data-vb-testimonial-slider>
<div class="vb-testimonial-slider-shell">
<div class="vb-testimonial-slider-aside">
<span>Client Stories</span>
<h3>Real feedback presented in a focused JavaScript testimonial slider</h3>
<p>Use this slider to show reviews, quotes, ratings, and trust signals without making your landing page too long.</p>
<div class="vb-testimonial-slider-stats">
<div>
<strong>4.9</strong>
<small>Average rating</small>
</div>
<div>
<strong>120+</strong>
<small>Happy clients</small>
</div>
</div>
</div>
<div class="vb-testimonial-slider-main">
<div class="vb-testimonial-slider-window">
<div class="vb-testimonial-slider-track" data-vb-testimonial-slider-track>
<article class="vb-testimonial-slide">
<div class="vb-testimonial-avatar vb-testimonial-avatar-a">A</div>
<div class="vb-testimonial-rating">★★★★★ <span>Verified review</span></div>
<blockquote>
“The slider section helped us show our best customer stories without creating a long testimonial page. It feels clean, fast, and easy to browse.”
</blockquote>
<div class="vb-testimonial-author">
<strong>Anna Lewis</strong>
<span>Marketing Manager</span>
</div>
</article>
<article class="vb-testimonial-slide">
<div class="vb-testimonial-avatar vb-testimonial-avatar-b">M</div>
<div class="vb-testimonial-rating">★★★★★ <span>Project feedback</span></div>
<blockquote>
“This testimonial layout works well for service pages because it keeps trust signals close to the call to action and does not overload the design.”
</blockquote>
<div class="vb-testimonial-author">
<strong>Marcus Reed</strong>
<span>Agency Founder</span>
</div>
</article>
<article class="vb-testimonial-slide">
<div class="vb-testimonial-avatar vb-testimonial-avatar-c">S</div>
<div class="vb-testimonial-rating">★★★★★ <span>Customer quote</span></div>
<blockquote>
“The navigation is simple, the quotes are readable, and the slider works nicely on mobile. It is a practical pattern for modern websites.”
</blockquote>
<div class="vb-testimonial-author">
<strong>Sofia Carter</strong>
<span>Product Lead</span>
</div>
</article>
</div>
</div>
<div class="vb-testimonial-slider-controls">
<button type="button" data-vb-testimonial-slider-prev aria-label="Previous testimonial">‹</button>
<div class="vb-testimonial-slider-dots">
<button type="button" class="is-active" data-vb-testimonial-slider-dot="0" aria-label="Go to testimonial 1"></button>
<button type="button" data-vb-testimonial-slider-dot="1" aria-label="Go to testimonial 2"></button>
<button type="button" data-vb-testimonial-slider-dot="2" aria-label="Go to testimonial 3"></button>
</div>
<button type="button" data-vb-testimonial-slider-next aria-label="Next testimonial">›</button>
</div>
</div>
</div>
</div>
CSS
.vb-testimonial-slider,
.vb-testimonial-slider * {
box-sizing: border-box;
}
.vb-testimonial-slider {
margin: 28px 0;
padding: 26px;
border-radius: 34px;
background:
radial-gradient(circle at 12% 18%, rgba(251, 191, 36, 0.18), transparent 30%),
radial-gradient(circle at 86% 20%, rgba(244, 114, 182, 0.15), transparent 32%),
linear-gradient(135deg, #fff7ed 0%, #ffffff 52%, #fdf2f8 100%) !important;
border: 1px solid rgba(251, 146, 60, 0.22);
box-shadow: 0 24px 70px rgba(120, 53, 15, 0.12);
overflow: hidden;
}
.vb-testimonial-slider-shell {
display: grid;
grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
gap: 26px;
align-items: stretch;
}
.vb-testimonial-slider-aside {
padding: 34px;
border-radius: 28px 10px 28px 10px;
background:
linear-gradient(135deg, #7c2d12 0%, #be123c 100%) !important;
color: #ffffff;
box-shadow: 0 24px 60px rgba(190, 18, 60, 0.22);
}
.vb-testimonial-slider-aside > span {
display: inline-flex;
margin-bottom: 16px;
padding: 8px 11px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
color: #ffedd5 !important;
-webkit-text-fill-color: #ffedd5 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-testimonial-slider-aside h3 {
margin: 0 0 18px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(30px, 4vw, 52px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.06em;
}
.vb-testimonial-slider-aside p {
margin: 0 0 28px !important;
color: #ffedd5 !important;
-webkit-text-fill-color: #ffedd5 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-testimonial-slider-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.vb-testimonial-slider-stats div {
padding: 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.13);
border: 1px solid rgba(255, 255, 255, 0.16);
}
.vb-testimonial-slider-stats strong {
display: block;
margin-bottom: 4px;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 30px;
line-height: 1;
font-weight: 950;
}
.vb-testimonial-slider-stats small {
color: #fed7aa !important;
-webkit-text-fill-color: #fed7aa !important;
font-size: 12px;
font-weight: 800;
}
.vb-testimonial-slider-main {
padding: 18px;
border-radius: 10px 30px 10px 30px;
background: rgba(255, 255, 255, 0.72) !important;
border: 1px solid rgba(251, 146, 60, 0.20);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
}
.vb-testimonial-slider-window {
overflow: hidden;
border-radius: 24px;
}
.vb-testimonial-slider-track {
display: flex;
width: 100%;
transform: translateX(0);
transition: transform 0.45s ease;
}
.vb-testimonial-slide {
flex: 0 0 100%;
min-height: 430px;
padding: 38px;
border-radius: 24px;
background:
linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
border: 1px solid rgba(251, 146, 60, 0.18);
}
.vb-testimonial-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 74px;
height: 74px;
margin-bottom: 20px;
border-radius: 24px;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 30px;
font-weight: 950;
box-shadow: 0 18px 44px rgba(190, 18, 60, 0.18);
}
.vb-testimonial-avatar-a {
background: linear-gradient(135deg, #f97316, #be123c) !important;
}
.vb-testimonial-avatar-b {
background: linear-gradient(135deg, #0ea5e9, #7c3aed) !important;
}
.vb-testimonial-avatar-c {
background: linear-gradient(135deg, #10b981, #0f766e) !important;
}
.vb-testimonial-rating {
margin-bottom: 20px;
color: #f59e0b !important;
-webkit-text-fill-color: #f59e0b !important;
font-size: 15px;
font-weight: 950;
letter-spacing: 0.04em;
}
.vb-testimonial-rating span {
margin-left: 8px;
color: #9a3412 !important;
-webkit-text-fill-color: #9a3412 !important;
font-size: 13px;
font-weight: 850;
letter-spacing: 0;
}
.vb-testimonial-slide blockquote {
position: relative;
margin: 0 0 26px !important;
color: #431407 !important;
-webkit-text-fill-color: #431407 !important;
font-size: clamp(24px, 3vw, 38px);
line-height: 1.18;
font-weight: 850;
letter-spacing: -0.045em;
}
.vb-testimonial-author strong {
display: block;
margin-bottom: 4px;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 18px;
font-weight: 950;
}
.vb-testimonial-author span {
color: #9a3412 !important;
-webkit-text-fill-color: #9a3412 !important;
font-size: 14px;
font-weight: 750;
}
.vb-testimonial-slider-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 18px;
}
.vb-testimonial-slider-controls > button {
width: 48px;
height: 48px;
border: 0;
border-radius: 18px;
background: #7c2d12;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 25px;
font-weight: 950;
cursor: pointer;
}
.vb-testimonial-slider-dots {
display: flex;
gap: 9px;
}
.vb-testimonial-slider-dots button {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(124, 45, 18, 0.24);
cursor: pointer;
}
.vb-testimonial-slider-dots button.is-active {
width: 34px;
background: #be123c;
}
@media (max-width: 900px) {
.vb-testimonial-slider-shell {
grid-template-columns: 1fr;
}
.vb-testimonial-slide {
min-height: 390px;
}
}
@media (max-width: 640px) {
.vb-testimonial-slider {
padding: 18px;
border-radius: 24px;
}
.vb-testimonial-slider-aside,
.vb-testimonial-slider-main,
.vb-testimonial-slide {
padding: 24px;
}
.vb-testimonial-slider-stats {
grid-template-columns: 1fr;
}
.vb-testimonial-slide blockquote {
font-size: 25px;
}
}
This testimonial slider is a strong social proof pattern for websites that need to show customer feedback without taking too much page space. You can use the same JavaScript structure for reviews, case study quotes, client stories, star ratings, and landing page trust sections.
6. Auto-Playing Slideshow
An auto-playing slideshow automatically moves between slides after a short delay. This pattern is useful for homepage banners, campaign messages, announcements, event highlights, product launches, visual stories, and presentation-style website sections. A good autoplay slider should still include manual controls, so visitors can move backward, forward, or pause the slideshow.
This example uses a bold magazine-style layout with large slide numbers, a visible autoplay progress bar, pause/play control, manual arrows, and CSS-generated slide artwork. The design is intentionally different from the testimonial slider and product carousel, using strong typography, sharp composition, and a more editorial visual style.
- Auto-playing JavaScript slideshow
- Includes pause and play button
- Progress bar resets for each slide
- Manual previous and next controls
- Good for banners, announcements, events, campaigns, and homepage storytelling
JavaScript
(function () {
const slideshow = document.querySelector("[data-vb-auto-slideshow]");
if (!slideshow) return;
const track = slideshow.querySelector("[data-vb-auto-slideshow-track]");
const dots = slideshow.querySelectorAll("[data-vb-auto-slideshow-dot]");
const prev = slideshow.querySelector("[data-vb-auto-slideshow-prev]");
const next = slideshow.querySelector("[data-vb-auto-slideshow-next]");
const toggle = slideshow.querySelector("[data-vb-auto-slideshow-toggle]");
const progress = slideshow.querySelector("[data-vb-auto-slideshow-progress]");
const total = dots.length;
const delay = 4000;
let index = 0;
let timer = null;
let isPlaying = true;
function restartProgress() {
if (!progress) return;
progress.classList.remove("is-running");
void progress.offsetWidth;
progress.classList.add("is-running");
}
function updateSlideshow(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
restartProgress();
}
function startAutoplay() {
stopAutoplay();
isPlaying = true;
toggle.textContent = "Pause";
restartProgress();
timer = setInterval(function () {
updateSlideshow(index + 1);
}, delay);
}
function stopAutoplay() {
if (timer) {
clearInterval(timer);
timer = null;
}
isPlaying = false;
toggle.textContent = "Play";
if (progress) {
progress.classList.remove("is-running");
}
}
prev.addEventListener("click", function () {
updateSlideshow(index - 1);
if (isPlaying) startAutoplay();
});
next.addEventListener("click", function () {
updateSlideshow(index + 1);
if (isPlaying) startAutoplay();
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateSlideshow(Number(dot.getAttribute("data-vb-auto-slideshow-dot")));
if (isPlaying) startAutoplay();
});
});
toggle.addEventListener("click", function () {
if (isPlaying) {
stopAutoplay();
} else {
startAutoplay();
}
});
startAutoplay();
})();
HTML
<div class="vb-auto-slideshow" data-vb-auto-slideshow>
<div class="vb-auto-slideshow-top">
<span>Auto Slideshow</span>
<button type="button" data-vb-auto-slideshow-toggle aria-label="Pause slideshow">Pause</button>
</div>
<div class="vb-auto-slideshow-window">
<div class="vb-auto-slideshow-track" data-vb-auto-slideshow-track>
<section class="vb-auto-slide vb-auto-slide-a">
<div class="vb-auto-slide-number">01</div>
<div class="vb-auto-slide-copy">
<h3>Launch a visual story that moves automatically</h3>
<p>Use autoplay carefully for banners, campaigns, events, and landing page messages that benefit from sequential presentation.</p>
<a href="#javascript-slider-best-practices">Slider best practices</a>
</div>
<div class="vb-auto-slide-art">
<strong>Campaign</strong>
</div>
</section>
<section class="vb-auto-slide vb-auto-slide-b">
<div class="vb-auto-slide-number">02</div>
<div class="vb-auto-slide-copy">
<h3>Keep manual controls visible for better usability</h3>
<p>Even when a slideshow moves automatically, visitors should still be able to pause, go back, or jump forward.</p>
<a href="#common-javascript-slider-mistakes">Avoid mistakes</a>
</div>
<div class="vb-auto-slide-art">
<strong>Control</strong>
</div>
</section>
<section class="vb-auto-slide vb-auto-slide-c">
<div class="vb-auto-slide-number">03</div>
<div class="vb-auto-slide-copy">
<h3>Use a progress bar to make timing clear</h3>
<p>A visible progress indicator helps users understand when the next slide will appear and makes autoplay feel more predictable.</p>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</div>
<div class="vb-auto-slide-art">
<strong>Progress</strong>
</div>
</section>
</div>
</div>
<div class="vb-auto-slideshow-progress">
<span data-vb-auto-slideshow-progress></span>
</div>
<div class="vb-auto-slideshow-bottom">
<button type="button" data-vb-auto-slideshow-prev aria-label="Previous slide">‹ Previous</button>
<div class="vb-auto-slideshow-dots">
<button type="button" class="is-active" data-vb-auto-slideshow-dot="0" aria-label="Go to slide 1"></button>
<button type="button" data-vb-auto-slideshow-dot="1" aria-label="Go to slide 2"></button>
<button type="button" data-vb-auto-slideshow-dot="2" aria-label="Go to slide 3"></button>
</div>
<button type="button" data-vb-auto-slideshow-next aria-label="Next slide">Next ›</button>
</div>
</div>
CSS
.vb-auto-slideshow,
.vb-auto-slideshow * {
box-sizing: border-box;
}
.vb-auto-slideshow {
margin: 28px 0;
padding: 24px;
border-radius: 0;
background: #f4f4f5 !important;
border: 2px solid #18181b;
box-shadow: 12px 12px 0 #18181b;
overflow: hidden;
}
.vb-auto-slideshow-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.vb-auto-slideshow-top span {
display: inline-flex;
padding: 8px 12px;
border: 2px solid #18181b;
background: #facc15;
color: #18181b !important;
-webkit-text-fill-color: #18181b !important;
font-size: 13px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
box-shadow: 5px 5px 0 #18181b;
}
.vb-auto-slideshow-top button {
min-height: 42px;
padding: 10px 16px;
border: 2px solid #18181b;
border-radius: 0;
background: #ffffff;
color: #18181b !important;
-webkit-text-fill-color: #18181b !important;
font-size: 13px;
font-weight: 950;
cursor: pointer;
box-shadow: 5px 5px 0 #18181b;
}
.vb-auto-slideshow-window {
overflow: hidden;
border: 2px solid #18181b;
background: #ffffff;
}
.vb-auto-slideshow-track {
display: flex;
transform: translateX(0);
transition: transform 0.48s ease;
}
.vb-auto-slide {
flex: 0 0 100%;
position: relative;
display: grid;
grid-template-columns: 120px minmax(0, 1fr) minmax(280px, 0.7fr);
gap: 28px;
align-items: center;
min-height: 520px;
padding: 42px;
}
.vb-auto-slide-a {
background: #dbeafe !important;
}
.vb-auto-slide-b {
background: #dcfce7 !important;
}
.vb-auto-slide-c {
background: #fce7f3 !important;
}
.vb-auto-slide-number {
align-self: start;
color: #18181b !important;
-webkit-text-fill-color: #18181b !important;
font-size: clamp(70px, 8vw, 120px);
line-height: 0.85;
font-weight: 950;
letter-spacing: -0.08em;
}
.vb-auto-slide-copy h3 {
max-width: 660px;
margin: 0 0 18px !important;
color: #18181b !important;
-webkit-text-fill-color: #18181b !important;
font-size: clamp(36px, 5vw, 72px) !important;
line-height: 0.95 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-auto-slide-copy p {
max-width: 560px;
margin: 0 0 26px !important;
color: #3f3f46 !important;
-webkit-text-fill-color: #3f3f46 !important;
font-size: 17px;
line-height: 1.65;
font-weight: 700;
}
.vb-auto-slide-copy a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 13px 18px;
border: 2px solid #18181b;
background: #18181b;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
box-shadow: 6px 6px 0 rgba(24, 24, 27, 0.26);
}
.vb-auto-slide-art {
position: relative;
min-height: 300px;
border: 2px solid #18181b;
background: #ffffff !important;
box-shadow: 10px 10px 0 #18181b;
overflow: hidden;
}
.vb-auto-slide-art::before {
content: "";
position: absolute;
left: 28px;
top: 28px;
width: 120px;
height: 120px;
border: 2px solid #18181b;
border-radius: 999px;
background: #38bdf8;
}
.vb-auto-slide-b .vb-auto-slide-art::before {
background: #22c55e;
}
.vb-auto-slide-c .vb-auto-slide-art::before {
background: #ec4899;
}
.vb-auto-slide-art::after {
content: "";
position: absolute;
right: 32px;
bottom: 32px;
width: 140px;
height: 110px;
border: 2px solid #18181b;
background: #facc15;
transform: rotate(-8deg);
}
.vb-auto-slide-art strong {
position: absolute;
left: 28px;
bottom: 28px;
z-index: 2;
color: #18181b !important;
-webkit-text-fill-color: #18181b !important;
font-size: 34px;
line-height: 1;
font-weight: 950;
letter-spacing: -0.06em;
}
.vb-auto-slideshow-progress {
height: 10px;
margin-top: 18px;
border: 2px solid #18181b;
background: #ffffff;
overflow: hidden;
}
.vb-auto-slideshow-progress span {
display: block;
width: 0%;
height: 100%;
background: #facc15;
}
.vb-auto-slideshow-progress span.is-running {
animation: vbAutoProgress 4s linear forwards;
}
@keyframes vbAutoProgress {
from {
width: 0%;
}
to {
width: 100%;
}
}
.vb-auto-slideshow-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 18px;
}
.vb-auto-slideshow-bottom > button {
min-height: 44px;
padding: 10px 16px;
border: 2px solid #18181b;
background: #ffffff;
color: #18181b !important;
-webkit-text-fill-color: #18181b !important;
font-size: 13px;
font-weight: 950;
cursor: pointer;
box-shadow: 5px 5px 0 #18181b;
}
.vb-auto-slideshow-dots {
display: flex;
gap: 9px;
}
.vb-auto-slideshow-dots button {
width: 14px;
height: 14px;
padding: 0;
border: 2px solid #18181b;
border-radius: 999px;
background: #ffffff;
cursor: pointer;
}
.vb-auto-slideshow-dots button.is-active {
width: 38px;
background: #18181b;
}
@media (max-width: 960px) {
.vb-auto-slide {
grid-template-columns: 1fr;
min-height: 720px;
}
.vb-auto-slide-number {
font-size: 80px;
}
}
@media (max-width: 640px) {
.vb-auto-slideshow {
padding: 16px;
box-shadow: 7px 7px 0 #18181b;
}
.vb-auto-slide {
padding: 24px;
min-height: 760px;
}
.vb-auto-slide-copy h3 {
font-size: 38px !important;
}
.vb-auto-slide-art {
min-height: 240px;
}
.vb-auto-slideshow-bottom {
align-items: stretch;
flex-direction: column;
}
.vb-auto-slideshow-dots {
justify-content: center;
}
}
This auto-playing JavaScript slideshow is useful for campaign banners, announcements, launch sections, event highlights, and visual storytelling blocks. The pause button and manual controls make the autoplay behavior easier to control for visitors.
7. Fade Transition Image Slider
A fade transition image slider changes slides by fading one panel out and another panel in. This creates a softer, more elegant effect than a horizontal carousel. Fade sliders are useful for portfolios, hero banners, photography sections, luxury product pages, hotel websites, restaurant websites, creative landing pages, and visual brand storytelling.
This example uses a layered fade effect instead of moving a track left or right. The JavaScript updates the active slide, dot state, and slide counter. The design uses dark luxury styling, soft glow effects, CSS-generated image panels, and a cinematic layout that feels different from the previous examples.
- Fade transition instead of horizontal movement
- CSS-only image panels with cinematic styling
- Previous and next buttons
- Dot navigation and slide counter
- Good for portfolios, luxury websites, hero banners, galleries, and visual storytelling
JavaScript
(function () {
const slider = document.querySelector("[data-vb-fade-slider]");
if (!slider) return;
const slides = slider.querySelectorAll(".vb-fade-slide");
const dots = slider.querySelectorAll("[data-vb-fade-slider-dot]");
const prev = slider.querySelector("[data-vb-fade-slider-prev]");
const next = slider.querySelector("[data-vb-fade-slider-next]");
const counter = slider.querySelector("[data-vb-fade-slider-current]");
let index = 0;
function updateFadeSlider(newIndex) {
if (newIndex < 0) {
index = slides.length - 1;
} else if (newIndex >= slides.length) {
index = 0;
} else {
index = newIndex;
}
slides.forEach(function (slide, slideIndex) {
slide.classList.toggle("is-active", slideIndex === index);
});
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
if (counter) {
counter.textContent = String(index + 1).padStart(2, "0");
}
}
prev.addEventListener("click", function () {
updateFadeSlider(index - 1);
});
next.addEventListener("click", function () {
updateFadeSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateFadeSlider(Number(dot.getAttribute("data-vb-fade-slider-dot")));
});
});
})();
HTML
<div class="vb-fade-slider" data-vb-fade-slider>
<div class="vb-fade-slider-stage">
<section class="vb-fade-slide is-active">
<div class="vb-fade-slide-art vb-fade-slide-art-a">
<div class="vb-fade-slide-badge">Gallery 01</div>
</div>
<div class="vb-fade-slide-copy">
<span>Cinematic Fade</span>
<h3>Smooth image transitions for elegant website sections</h3>
<p>Use a fade transition slider when you want the visual experience to feel calm, polished, and premium instead of fast or mechanical.</p>
<a href="#javascript-slider-examples">Explore more sliders</a>
</div>
</section>
<section class="vb-fade-slide">
<div class="vb-fade-slide-art vb-fade-slide-art-b">
<div class="vb-fade-slide-badge">Gallery 02</div>
</div>
<div class="vb-fade-slide-copy">
<span>Soft Motion</span>
<h3>Create visual rhythm without sliding content sideways</h3>
<p>Fade sliders are useful for photography, restaurants, hotels, brands, agencies, and portfolio pages where mood matters.</p>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
</section>
<section class="vb-fade-slide">
<div class="vb-fade-slide-art vb-fade-slide-art-c">
<div class="vb-fade-slide-badge">Gallery 03</div>
</div>
<div class="vb-fade-slide-copy">
<span>Reusable Pattern</span>
<h3>Switch active slides with a small JavaScript function</h3>
<p>The JavaScript only changes active classes, making this fade slider easy to understand and customize.</p>
<a href="#common-javascript-slider-mistakes">Avoid mistakes</a>
</div>
</section>
</div>
<div class="vb-fade-slider-footer">
<div class="vb-fade-slider-count">
<strong data-vb-fade-slider-current>01</strong>
<span>/ 03</span>
</div>
<div class="vb-fade-slider-dots">
<button type="button" class="is-active" data-vb-fade-slider-dot="0" aria-label="Go to fade slide 1"></button>
<button type="button" data-vb-fade-slider-dot="1" aria-label="Go to fade slide 2"></button>
<button type="button" data-vb-fade-slider-dot="2" aria-label="Go to fade slide 3"></button>
</div>
<div class="vb-fade-slider-arrows">
<button type="button" data-vb-fade-slider-prev aria-label="Previous fade slide">←</button>
<button type="button" data-vb-fade-slider-next aria-label="Next fade slide">→</button>
</div>
</div>
</div>
CSS
.vb-fade-slider,
.vb-fade-slider * {
box-sizing: border-box;
}
.vb-fade-slider {
margin: 28px 0;
padding: 22px;
border-radius: 42px;
background:
radial-gradient(circle at 16% 12%, rgba(217, 119, 6, 0.18), transparent 30%),
radial-gradient(circle at 84% 18%, rgba(168, 85, 247, 0.16), transparent 32%),
linear-gradient(135deg, #09090b 0%, #18181b 52%, #0f172a 100%) !important;
border: 1px solid rgba(250, 204, 21, 0.14);
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.vb-fade-slider-stage {
position: relative;
min-height: 620px;
border-radius: 34px;
overflow: hidden;
background: #020617 !important;
}
.vb-fade-slide {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1fr);
gap: 34px;
align-items: center;
padding: 44px;
opacity: 0;
visibility: hidden;
transform: scale(1.015);
transition: opacity 0.65s ease, transform 0.65s ease, visibility 0.65s ease;
}
.vb-fade-slide.is-active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.vb-fade-slide-art {
position: relative;
min-height: 500px;
border-radius: 34px;
overflow: hidden;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}
.vb-fade-slide-art::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.34), transparent 24%),
radial-gradient(circle at 78% 30%, rgba(255, 255, 255, 0.18), transparent 24%),
linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02));
}
.vb-fade-slide-art::after {
content: "";
position: absolute;
inset: 28px;
border-radius: 28px;
border: 1px solid rgba(255,255,255,0.22);
background:
linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
}
.vb-fade-slide-art-a {
background:
linear-gradient(135deg, #f59e0b 0%, #be123c 52%, #581c87 100%) !important;
}
.vb-fade-slide-art-b {
background:
linear-gradient(135deg, #06b6d4 0%, #2563eb 52%, #1e1b4b 100%) !important;
}
.vb-fade-slide-art-c {
background:
linear-gradient(135deg, #10b981 0%, #0f766e 52%, #052e16 100%) !important;
}
.vb-fade-slide-badge {
position: absolute;
left: 28px;
bottom: 28px;
z-index: 3;
padding: 10px 14px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.62);
border: 1px solid rgba(255,255,255,0.18);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vb-fade-slide-copy span {
display: inline-flex;
margin-bottom: 18px;
padding: 9px 13px;
border-radius: 999px;
background: rgba(250, 204, 21, 0.12);
border: 1px solid rgba(250, 204, 21, 0.22);
color: #fde68a !important;
-webkit-text-fill-color: #fde68a !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.vb-fade-slide-copy h3 {
max-width: 720px;
margin: 0 0 18px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(40px, 6vw, 78px) !important;
line-height: 0.98 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-fade-slide-copy p {
max-width: 590px;
margin: 0 0 28px !important;
color: #d4d4d8 !important;
-webkit-text-fill-color: #d4d4d8 !important;
font-size: 17px;
line-height: 1.75;
font-weight: 650;
}
.vb-fade-slide-copy a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 14px 20px;
border-radius: 999px;
background: #facc15;
color: #18181b !important;
-webkit-text-fill-color: #18181b !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-fade-slider-footer {
display: grid;
grid-template-columns: 120px minmax(0, 1fr) auto;
gap: 20px;
align-items: center;
margin-top: 20px;
}
.vb-fade-slider-count {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-fade-slider-count strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 28px;
line-height: 1;
font-weight: 950;
}
.vb-fade-slider-count span {
color: #a1a1aa !important;
-webkit-text-fill-color: #a1a1aa !important;
font-size: 14px;
font-weight: 850;
}
.vb-fade-slider-dots {
display: flex;
justify-content: center;
gap: 9px;
}
.vb-fade-slider-dots button {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,0.28);
cursor: pointer;
}
.vb-fade-slider-dots button.is-active {
width: 38px;
background: #facc15;
}
.vb-fade-slider-arrows {
display: flex;
gap: 10px;
}
.vb-fade-slider-arrows button {
width: 48px;
height: 48px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px;
background: rgba(255,255,255,0.08);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 18px;
font-weight: 950;
cursor: pointer;
}
@media (max-width: 960px) {
.vb-fade-slider-stage {
min-height: 900px;
}
.vb-fade-slide {
grid-template-columns: 1fr;
align-content: center;
}
.vb-fade-slide-art {
min-height: 340px;
}
}
@media (max-width: 640px) {
.vb-fade-slider {
padding: 16px;
border-radius: 28px;
}
.vb-fade-slider-stage {
min-height: 840px;
border-radius: 24px;
}
.vb-fade-slide {
padding: 24px;
}
.vb-fade-slide-copy h3 {
font-size: 38px !important;
}
.vb-fade-slider-footer {
grid-template-columns: 1fr;
}
.vb-fade-slider-dots {
justify-content: flex-start;
}
}
This fade transition JavaScript slider is a strong option when the goal is a polished, elegant, and less mechanical slider effect. It works well for portfolios, galleries, luxury websites, restaurant pages, hotel websites, agency hero sections, and calm visual storytelling layouts.
8. Vertical JavaScript Slider
A vertical JavaScript slider moves content up and down instead of left and right. This pattern is useful for process steps, app features, onboarding screens, timelines, service explanations, roadmap sections, product benefits, and interactive storytelling layouts where vertical movement feels more natural than a horizontal carousel.
This example uses a modern dashboard-style layout with a vertical slide track, side navigation buttons, numbered steps, and a live preview panel. The design is different from the other examples because it uses a structured product UI style, square cards, cool colors, and vertical movement instead of horizontal sliding.
- Vertical JavaScript slider with up and down movement
- Great for steps, timelines, app features, and onboarding content
- Uses a vertical transform instead of horizontal translateX
- Side navigation with active state
- CSS-only dashboard visual panel with no external images
JavaScript
(function () {
const slider = document.querySelector("[data-vb-vertical-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-vertical-slider-track]");
const dots = slider.querySelectorAll("[data-vb-vertical-slider-dot]");
const prev = slider.querySelector("[data-vb-vertical-slider-prev]");
const next = slider.querySelector("[data-vb-vertical-slider-next]");
let index = 0;
function getSlideHeight() {
const firstSlide = slider.querySelector(".vb-vertical-slide");
return firstSlide ? firstSlide.getBoundingClientRect().height : 540;
}
function updateVerticalSlider(newIndex) {
if (newIndex < 0) {
index = dots.length - 1;
} else if (newIndex >= dots.length) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateY(-" + (getSlideHeight() * index) + "px)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updateVerticalSlider(index - 1);
});
next.addEventListener("click", function () {
updateVerticalSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateVerticalSlider(Number(dot.getAttribute("data-vb-vertical-slider-dot")));
});
});
window.addEventListener("resize", function () {
updateVerticalSlider(index);
});
})();
HTML
<div class="vb-vertical-slider" data-vb-vertical-slider>
<div class="vb-vertical-slider-header">
<span>Vertical Slider</span>
<h3>Move through product features one step at a time</h3>
</div>
<div class="vb-vertical-slider-layout">
<div class="vb-vertical-slider-nav">
<button type="button" class="is-active" data-vb-vertical-slider-dot="0">
<strong>01</strong>
<span>Discover</span>
</button>
<button type="button" data-vb-vertical-slider-dot="1">
<strong>02</strong>
<span>Customize</span>
</button>
<button type="button" data-vb-vertical-slider-dot="2">
<strong>03</strong>
<span>Launch</span>
</button>
</div>
<div class="vb-vertical-slider-window">
<div class="vb-vertical-slider-track" data-vb-vertical-slider-track>
<section class="vb-vertical-slide">
<div class="vb-vertical-slide-copy">
<span>Step One</span>
<h4>Discover the right content pattern</h4>
<p>Use vertical sliders when your content is naturally organized as steps, phases, features, or guided explanations.</p>
<a href="#javascript-slider-examples">View examples</a>
</div>
<div class="vb-vertical-slide-panel vb-vertical-slide-panel-a">
<div class="vb-vertical-panel-window">
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
<section class="vb-vertical-slide">
<div class="vb-vertical-slide-copy">
<span>Step Two</span>
<h4>Customize each slide with unique content</h4>
<p>Each vertical slide can contain text, UI mockups, icons, app screens, charts, onboarding copy, or service descriptions.</p>
<a href="#what-should-a-good-javascript-slider-include">Slider checklist</a>
</div>
<div class="vb-vertical-slide-panel vb-vertical-slide-panel-b">
<div class="vb-vertical-panel-window">
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
<section class="vb-vertical-slide">
<div class="vb-vertical-slide-copy">
<span>Step Three</span>
<h4>Launch a smoother guided section</h4>
<p>Vertical movement can make process sections, product tours, and step-by-step website blocks feel more interactive.</p>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
<div class="vb-vertical-slide-panel vb-vertical-slide-panel-c">
<div class="vb-vertical-panel-window">
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
</div>
</div>
<div class="vb-vertical-slider-controls">
<button type="button" data-vb-vertical-slider-prev aria-label="Previous vertical slide">↑</button>
<button type="button" data-vb-vertical-slider-next aria-label="Next vertical slide">↓</button>
</div>
</div>
</div>
CSS
.vb-vertical-slider,
.vb-vertical-slider * {
box-sizing: border-box;
}
.vb-vertical-slider {
margin: 28px 0;
padding: 30px;
border-radius: 24px;
background:
linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%) !important;
border: 1px solid rgba(99, 102, 241, 0.20);
box-shadow: 0 24px 70px rgba(30, 41, 59, 0.12);
overflow: hidden;
}
.vb-vertical-slider-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.vb-vertical-slider-header span {
display: inline-flex;
padding: 8px 11px;
border-radius: 12px;
background: #4f46e5;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-vertical-slider-header h3 {
max-width: 720px;
margin: 0 !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(32px, 5vw, 58px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.065em;
text-align: right;
}
.vb-vertical-slider-layout {
display: grid;
grid-template-columns: 190px minmax(0, 1fr) 58px;
gap: 20px;
align-items: stretch;
}
.vb-vertical-slider-nav {
display: grid;
gap: 12px;
align-content: center;
}
.vb-vertical-slider-nav button {
width: 100%;
min-height: 92px;
padding: 16px;
border: 1px solid rgba(99, 102, 241, 0.18);
border-radius: 18px;
background: #ffffff;
text-align: left;
cursor: pointer;
box-shadow: 0 14px 32px rgba(30, 41, 59, 0.08);
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.vb-vertical-slider-nav button.is-active {
background: #111827;
border-color: #111827;
transform: translateX(6px);
}
.vb-vertical-slider-nav strong {
display: block;
margin-bottom: 8px;
color: #4f46e5 !important;
-webkit-text-fill-color: #4f46e5 !important;
font-size: 20px;
line-height: 1;
font-weight: 950;
}
.vb-vertical-slider-nav span {
color: #334155 !important;
-webkit-text-fill-color: #334155 !important;
font-size: 14px;
font-weight: 900;
}
.vb-vertical-slider-nav button.is-active strong,
.vb-vertical-slider-nav button.is-active span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-vertical-slider-window {
overflow: hidden;
min-height: 540px;
border-radius: 26px;
background: #ffffff !important;
border: 1px solid rgba(99, 102, 241, 0.16);
box-shadow: 0 24px 70px rgba(30, 41, 59, 0.10);
}
.vb-vertical-slider-track {
display: flex;
flex-direction: column;
height: 540px;
transform: translateY(0);
transition: transform 0.48s ease;
}
.vb-vertical-slide {
flex: 0 0 540px;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.78fr);
gap: 28px;
align-items: center;
padding: 42px;
}
.vb-vertical-slide-copy > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 11px;
border-radius: 999px;
background: #eef2ff;
color: #4338ca !important;
-webkit-text-fill-color: #4338ca !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-vertical-slide-copy h4 {
max-width: 620px;
margin: 0 0 16px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(34px, 5vw, 62px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.065em;
}
.vb-vertical-slide-copy p {
max-width: 560px;
margin: 0 0 26px !important;
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-vertical-slide-copy a {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 13px 18px;
border-radius: 14px;
background: #4f46e5;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
box-shadow: 0 16px 34px rgba(79, 70, 229, 0.24);
}
.vb-vertical-slide-panel {
position: relative;
min-height: 360px;
border-radius: 28px;
overflow: hidden;
padding: 24px;
background: linear-gradient(135deg, #4f46e5, #0ea5e9) !important;
}
.vb-vertical-slide-panel-b {
background: linear-gradient(135deg, #0f766e, #22c55e) !important;
}
.vb-vertical-slide-panel-c {
background: linear-gradient(135deg, #db2777, #f97316) !important;
}
.vb-vertical-panel-window {
position: relative;
height: 100%;
min-height: 312px;
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.68)) !important;
border: 1px solid rgba(255,255,255,0.40);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}
.vb-vertical-panel-window::before {
content: "";
position: absolute;
left: 24px;
top: 24px;
right: 24px;
height: 54px;
border-radius: 16px;
background: rgba(15, 23, 42, 0.10);
}
.vb-vertical-panel-window span {
position: absolute;
left: 24px;
right: 24px;
height: 44px;
border-radius: 14px;
background: rgba(79, 70, 229, 0.16);
}
.vb-vertical-panel-window span:nth-child(1) {
top: 100px;
}
.vb-vertical-panel-window span:nth-child(2) {
top: 158px;
right: 82px;
}
.vb-vertical-panel-window span:nth-child(3) {
top: 216px;
right: 44px;
}
.vb-vertical-slider-controls {
display: grid;
gap: 12px;
align-content: center;
}
.vb-vertical-slider-controls button {
width: 58px;
height: 58px;
border: 0;
border-radius: 18px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 22px;
font-weight: 950;
cursor: pointer;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}
@media (max-width: 980px) {
.vb-vertical-slider-header {
align-items: flex-start;
flex-direction: column;
}
.vb-vertical-slider-header h3 {
text-align: left;
}
.vb-vertical-slider-layout {
grid-template-columns: 1fr;
}
.vb-vertical-slider-nav {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vb-vertical-slider-nav button.is-active {
transform: translateY(-4px);
}
.vb-vertical-slider-controls {
grid-template-columns: repeat(2, 58px);
justify-content: center;
}
}
@media (max-width: 720px) {
.vb-vertical-slider {
padding: 20px;
}
.vb-vertical-slider-nav {
grid-template-columns: 1fr;
}
.vb-vertical-slider-window {
min-height: 780px;
}
.vb-vertical-slider-track {
height: 780px;
}
.vb-vertical-slide {
flex-basis: 780px;
grid-template-columns: 1fr;
padding: 24px;
}
.vb-vertical-slide-copy h4 {
font-size: 36px !important;
}
.vb-vertical-slide-panel {
min-height: 280px;
}
}
This vertical JavaScript slider is a useful alternative to horizontal carousels when the content is organized as steps, phases, product features, app screens, onboarding messages, timelines, or guided explanations. It adds movement while keeping the structure clear and easy to follow.
9. Thumbnail Navigation Slider
A thumbnail navigation slider is useful when visitors need to preview several slides and choose one quickly. This pattern works well for product galleries, portfolio pages, image galleries, case studies, real estate pages, travel websites, restaurant galleries, and any layout where the main slide should be controlled by smaller preview items.
This example uses a gallery-style layout with a large main preview area on the left and vertical thumbnail buttons on the right. The visuals are created with CSS gradients, so the slider works without external image files. The JavaScript updates the active slide, active thumbnail, and main gallery content.
- Large main slide with thumbnail navigation
- Useful for galleries, products, portfolios, and real estate pages
- CSS-only visual panels without external images
- Active thumbnail state with JavaScript
- Responsive layout for mobile and desktop screens
JavaScript
(function () {
const slider = document.querySelector("[data-vb-thumb-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-thumb-slider-track]");
const thumbs = slider.querySelectorAll("[data-vb-thumb-slider-dot]");
const prev = slider.querySelector("[data-vb-thumb-slider-prev]");
const next = slider.querySelector("[data-vb-thumb-slider-next]");
const total = thumbs.length;
let index = 0;
function updateThumbnailSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
thumbs.forEach(function (thumb, thumbIndex) {
thumb.classList.toggle("is-active", thumbIndex === index);
});
}
prev.addEventListener("click", function () {
updateThumbnailSlider(index - 1);
});
next.addEventListener("click", function () {
updateThumbnailSlider(index + 1);
});
thumbs.forEach(function (thumb) {
thumb.addEventListener("click", function () {
updateThumbnailSlider(Number(thumb.getAttribute("data-vb-thumb-slider-dot")));
});
});
})();
HTML
<div class="vb-thumb-slider" data-vb-thumb-slider>
<div class="vb-thumb-slider-main">
<div class="vb-thumb-slider-window">
<div class="vb-thumb-slider-track" data-vb-thumb-slider-track>
<section class="vb-thumb-slide vb-thumb-slide-a">
<div class="vb-thumb-slide-label">Gallery Slide 01</div>
<div class="vb-thumb-slide-content">
<span>Featured Image</span>
<h3>Show a large preview with clickable thumbnails</h3>
<p>Thumbnail sliders help users jump directly to the image, product, or portfolio item they want to view.</p>
</div>
</section>
<section class="vb-thumb-slide vb-thumb-slide-b">
<div class="vb-thumb-slide-label">Gallery Slide 02</div>
<div class="vb-thumb-slide-content">
<span>Product Detail</span>
<h3>Use thumbnails for product image galleries</h3>
<p>This pattern is useful when one main image needs several smaller preview options beside it.</p>
</div>
</section>
<section class="vb-thumb-slide vb-thumb-slide-c">
<div class="vb-thumb-slide-label">Gallery Slide 03</div>
<div class="vb-thumb-slide-content">
<span>Portfolio View</span>
<h3>Let visitors choose the visual story</h3>
<p>Clickable thumbnails make galleries feel more controlled and easier to browse than autoplay-only sliders.</p>
</div>
</section>
<section class="vb-thumb-slide vb-thumb-slide-d">
<div class="vb-thumb-slide-label">Gallery Slide 04</div>
<div class="vb-thumb-slide-content">
<span>Case Study</span>
<h3>Highlight different project angles</h3>
<p>Use a thumbnail slider to show before views, details, mockups, room angles, product colors, or case study screens.</p>
</div>
</section>
</div>
</div>
<div class="vb-thumb-slider-controls">
<button type="button" data-vb-thumb-slider-prev aria-label="Previous thumbnail slide">‹</button>
<button type="button" data-vb-thumb-slider-next aria-label="Next thumbnail slide">›</button>
</div>
</div>
<div class="vb-thumb-slider-thumbs">
<button type="button" class="is-active vb-thumb-mini vb-thumb-mini-a" data-vb-thumb-slider-dot="0" aria-label="Go to thumbnail slide 1">
<span>01</span>
<strong>Featured</strong>
</button>
<button type="button" class="vb-thumb-mini vb-thumb-mini-b" data-vb-thumb-slider-dot="1" aria-label="Go to thumbnail slide 2">
<span>02</span>
<strong>Product</strong>
</button>
<button type="button" class="vb-thumb-mini vb-thumb-mini-c" data-vb-thumb-slider-dot="2" aria-label="Go to thumbnail slide 3">
<span>03</span>
<strong>Portfolio</strong>
</button>
<button type="button" class="vb-thumb-mini vb-thumb-mini-d" data-vb-thumb-slider-dot="3" aria-label="Go to thumbnail slide 4">
<span>04</span>
<strong>Details</strong>
</button>
</div>
</div>
CSS
.vb-thumb-slider,
.vb-thumb-slider * {
box-sizing: border-box;
}
.vb-thumb-slider {
display: grid;
grid-template-columns: minmax(0, 1fr) 230px;
gap: 18px;
margin: 28px 0;
padding: 24px;
border-radius: 32px;
background: #f1f5f9 !important;
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
overflow: hidden;
}
.vb-thumb-slider-main {
position: relative;
min-width: 0;
}
.vb-thumb-slider-window {
overflow: hidden;
border-radius: 26px;
background: #020617 !important;
min-height: 570px;
}
.vb-thumb-slider-track {
display: flex;
width: 100%;
transform: translateX(0);
transition: transform 0.5s ease;
}
.vb-thumb-slide {
position: relative;
flex: 0 0 100%;
min-height: 570px;
padding: 44px;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.vb-thumb-slide::before {
content: "";
position: absolute;
inset: 34px;
border-radius: 34px;
border: 1px solid rgba(255,255,255,0.24);
background:
radial-gradient(circle at 18% 18%, rgba(255,255,255,0.36), transparent 22%),
radial-gradient(circle at 80% 28%, rgba(255,255,255,0.18), transparent 26%),
linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
}
.vb-thumb-slide::after {
content: "";
position: absolute;
right: 72px;
top: 76px;
width: 170px;
height: 170px;
border-radius: 46px;
background: rgba(255,255,255,0.16);
transform: rotate(18deg);
}
.vb-thumb-slide-a {
background: linear-gradient(135deg, #0ea5e9, #2563eb 50%, #4c1d95) !important;
}
.vb-thumb-slide-b {
background: linear-gradient(135deg, #10b981, #047857 50%, #064e3b) !important;
}
.vb-thumb-slide-c {
background: linear-gradient(135deg, #f97316, #db2777 50%, #7e22ce) !important;
}
.vb-thumb-slide-d {
background: linear-gradient(135deg, #334155, #111827 50%, #020617) !important;
}
.vb-thumb-slide-label {
position: absolute;
left: 44px;
top: 44px;
z-index: 3;
padding: 9px 13px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.55);
border: 1px solid rgba(255,255,255,0.18);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vb-thumb-slide-content {
position: relative;
z-index: 3;
max-width: 680px;
padding: 28px;
border-radius: 26px;
background: rgba(2, 6, 23, 0.55);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(14px);
}
.vb-thumb-slide-content span {
display: inline-flex;
margin-bottom: 12px;
color: #bae6fd !important;
-webkit-text-fill-color: #bae6fd !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-thumb-slide-content h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(32px, 5vw, 58px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.065em;
}
.vb-thumb-slide-content p {
margin: 0 !important;
color: #dbeafe !important;
-webkit-text-fill-color: #dbeafe !important;
font-size: 16px;
line-height: 1.7;
font-weight: 650;
}
.vb-thumb-slider-controls {
position: absolute;
right: 24px;
bottom: 24px;
z-index: 5;
display: flex;
gap: 10px;
}
.vb-thumb-slider-controls button {
width: 48px;
height: 48px;
border: 1px solid rgba(255,255,255,0.20);
border-radius: 16px;
background: rgba(2, 6, 23, 0.68);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 24px;
font-weight: 950;
cursor: pointer;
backdrop-filter: blur(12px);
}
.vb-thumb-slider-thumbs {
display: grid;
gap: 12px;
align-content: stretch;
}
.vb-thumb-mini {
position: relative;
overflow: hidden;
min-height: 132px;
padding: 16px;
border: 2px solid transparent;
border-radius: 22px;
text-align: left;
cursor: pointer;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}
.vb-thumb-mini::before {
content: "";
position: absolute;
inset: 16px;
border-radius: 18px;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.24);
}
.vb-thumb-mini-a {
background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
}
.vb-thumb-mini-b {
background: linear-gradient(135deg, #10b981, #047857) !important;
}
.vb-thumb-mini-c {
background: linear-gradient(135deg, #f97316, #db2777) !important;
}
.vb-thumb-mini-d {
background: linear-gradient(135deg, #334155, #020617) !important;
}
.vb-thumb-mini.is-active {
border-color: #0f172a;
}
.vb-thumb-mini span,
.vb-thumb-mini strong {
position: relative;
z-index: 2;
display: block;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-thumb-mini span {
margin-bottom: 46px;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-thumb-mini strong {
font-size: 18px;
line-height: 1;
font-weight: 950;
}
@media (max-width: 900px) {
.vb-thumb-slider {
grid-template-columns: 1fr;
}
.vb-thumb-slider-thumbs {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vb-thumb-mini {
min-height: 110px;
}
.vb-thumb-mini span {
margin-bottom: 30px;
}
}
@media (max-width: 640px) {
.vb-thumb-slider {
padding: 18px;
border-radius: 24px;
}
.vb-thumb-slider-window,
.vb-thumb-slide {
min-height: 640px;
}
.vb-thumb-slide {
padding: 24px;
}
.vb-thumb-slide-label {
left: 24px;
top: 24px;
}
.vb-thumb-slide-content {
padding: 22px;
}
.vb-thumb-slider-thumbs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vb-thumb-slide-content h3 {
font-size: 34px !important;
}
}
This thumbnail navigation JavaScript slider is a strong pattern for image galleries, product galleries, portfolios, case studies, real estate pages, and visual product detail sections. It gives visitors more control because they can select a specific slide directly from the thumbnails.
10. Fullscreen Background Slider
A fullscreen background slider is designed for immersive hero sections and landing pages. It fills a large visual area with changing background panels, strong headlines, short supporting text, and clear calls to action. This type of JavaScript slider is useful for agencies, hotels, travel websites, restaurants, photographers, event pages, creative portfolios, and high-impact homepage headers.
This example uses a dramatic fullscreen-style layout with large typography, floating navigation, animated background panels, vertical slide numbers, and a bottom progress indicator. It does not use external images. Each “background image” is a CSS-generated scene, so the design stays visible and copy-paste friendly in Gutenberg.
- Fullscreen-style JavaScript background slider
- Large hero typography and CTA buttons
- CSS-generated background scenes without external images
- Floating arrows, slide numbers, and progress bar
- Good for immersive landing pages, portfolios, hotels, travel websites, and agencies
JavaScript
(function () {
const slider = document.querySelector("[data-vb-full-bg-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-full-bg-track]");
const dots = slider.querySelectorAll("[data-vb-full-bg-dot]");
const prev = slider.querySelector("[data-vb-full-bg-prev]");
const next = slider.querySelector("[data-vb-full-bg-next]");
const current = slider.querySelector("[data-vb-full-bg-current]");
const total = dots.length;
let index = 0;
function updateFullBgSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
if (current) {
current.textContent = String(index + 1).padStart(2, "0");
}
}
prev.addEventListener("click", function () {
updateFullBgSlider(index - 1);
});
next.addEventListener("click", function () {
updateFullBgSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateFullBgSlider(Number(dot.getAttribute("data-vb-full-bg-dot")));
});
});
})();
HTML
<div class="vb-full-bg-slider" data-vb-full-bg-slider>
<div class="vb-full-bg-slider-stage">
<div class="vb-full-bg-track" data-vb-full-bg-track>
<section class="vb-full-bg-slide vb-full-bg-slide-a">
<div class="vb-full-bg-overlay"></div>
<div class="vb-full-bg-content">
<span>Fullscreen Slider</span>
<h3>Create an immersive hero experience</h3>
<p>Use a fullscreen background slider when you want the first section of a page to feel cinematic, focused, and memorable.</p>
<div class="vb-full-bg-actions">
<a href="#javascript-slider-examples">View examples</a>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
</div>
</section>
<section class="vb-full-bg-slide vb-full-bg-slide-b">
<div class="vb-full-bg-overlay"></div>
<div class="vb-full-bg-content">
<span>Visual Landing Page</span>
<h3>Highlight campaigns with bold background panels</h3>
<p>Background sliders work well for travel, events, creative work, restaurants, hotel pages, and visual product launches.</p>
<div class="vb-full-bg-actions">
<a href="#responsive-slider-design-tips">Responsive tips</a>
<a href="#common-javascript-slider-mistakes">Avoid mistakes</a>
</div>
</div>
</section>
<section class="vb-full-bg-slide vb-full-bg-slide-c">
<div class="vb-full-bg-overlay"></div>
<div class="vb-full-bg-content">
<span>Modern UI Motion</span>
<h3>Guide visitors through a stronger first impression</h3>
<p>Use clear navigation and readable text overlays so the slider stays useful, not just decorative.</p>
<div class="vb-full-bg-actions">
<a href="#what-should-a-good-javascript-slider-include">Slider checklist</a>
<a href="#javascript-slider-examples">More sliders</a>
</div>
</div>
</section>
</div>
<div class="vb-full-bg-side-count">
<strong data-vb-full-bg-current>01</strong>
<span>/ 03</span>
</div>
<div class="vb-full-bg-controls">
<button type="button" data-vb-full-bg-prev aria-label="Previous fullscreen slide">‹</button>
<button type="button" data-vb-full-bg-next aria-label="Next fullscreen slide">›</button>
</div>
<div class="vb-full-bg-dots">
<button type="button" class="is-active" data-vb-full-bg-dot="0" aria-label="Go to fullscreen slide 1"></button>
<button type="button" data-vb-full-bg-dot="1" aria-label="Go to fullscreen slide 2"></button>
<button type="button" data-vb-full-bg-dot="2" aria-label="Go to fullscreen slide 3"></button>
</div>
</div>
</div>
CSS
.vb-full-bg-slider,
.vb-full-bg-slider * {
box-sizing: border-box;
}
.vb-full-bg-slider {
margin: 28px 0;
padding: 18px;
border-radius: 18px;
background: #020617 !important;
border: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.36);
overflow: hidden;
}
.vb-full-bg-slider-stage {
position: relative;
overflow: hidden;
min-height: 720px;
border-radius: 14px;
background: #020617 !important;
}
.vb-full-bg-track {
display: flex;
height: 720px;
transform: translateX(0);
transition: transform 0.6s ease;
}
.vb-full-bg-slide {
position: relative;
flex: 0 0 100%;
min-height: 720px;
display: flex;
align-items: center;
padding: 72px;
overflow: hidden;
}
.vb-full-bg-slide::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.30), transparent 20%),
radial-gradient(circle at 75% 25%, rgba(255,255,255,0.14), transparent 23%),
radial-gradient(circle at 65% 80%, rgba(255,255,255,0.20), transparent 24%);
}
.vb-full-bg-slide::after {
content: "";
position: absolute;
right: -80px;
top: 90px;
width: 440px;
height: 440px;
border-radius: 120px;
background: rgba(255,255,255,0.12);
transform: rotate(22deg);
}
.vb-full-bg-slide-a {
background:
linear-gradient(135deg, #0f172a 0%, #2563eb 48%, #7c3aed 100%) !important;
}
.vb-full-bg-slide-b {
background:
linear-gradient(135deg, #14532d 0%, #0f766e 48%, #0f172a 100%) !important;
}
.vb-full-bg-slide-c {
background:
linear-gradient(135deg, #7c2d12 0%, #be123c 48%, #581c87 100%) !important;
}
.vb-full-bg-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(2, 6, 23, 0.86) 0%, rgba(2, 6, 23, 0.52) 48%, rgba(2, 6, 23, 0.14) 100%);
}
.vb-full-bg-content {
position: relative;
z-index: 3;
max-width: 790px;
}
.vb-full-bg-content span {
display: inline-flex;
margin-bottom: 18px;
padding: 9px 13px;
border-radius: 0;
background: rgba(255,255,255,0.12);
border-left: 4px solid #38bdf8;
color: #e0f2fe !important;
-webkit-text-fill-color: #e0f2fe !important;
font-size: 13px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-full-bg-content h3 {
margin: 0 0 22px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(46px, 8vw, 104px) !important;
line-height: 0.9 !important;
font-weight: 950 !important;
letter-spacing: -0.095em;
}
.vb-full-bg-content p {
max-width: 660px;
margin: 0 0 30px !important;
color: #dbeafe !important;
-webkit-text-fill-color: #dbeafe !important;
font-size: 18px;
line-height: 1.72;
font-weight: 650;
}
.vb-full-bg-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.vb-full-bg-actions a {
display: inline-flex;
min-height: 52px;
align-items: center;
justify-content: center;
padding: 15px 22px;
border-radius: 0;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-full-bg-actions a:first-child {
background: #38bdf8;
color: #020617 !important;
-webkit-text-fill-color: #020617 !important;
}
.vb-full-bg-actions a:last-child {
border: 1px solid rgba(255,255,255,0.24);
background: rgba(255,255,255,0.10);
}
.vb-full-bg-side-count {
position: absolute;
z-index: 5;
right: 38px;
top: 38px;
display: grid;
justify-items: end;
}
.vb-full-bg-side-count strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 56px;
line-height: 0.9;
font-weight: 950;
letter-spacing: -0.08em;
}
.vb-full-bg-side-count span {
color: rgba(255,255,255,0.62) !important;
-webkit-text-fill-color: rgba(255,255,255,0.62) !important;
font-size: 14px;
font-weight: 900;
}
.vb-full-bg-controls {
position: absolute;
z-index: 5;
right: 38px;
bottom: 38px;
display: flex;
gap: 10px;
}
.vb-full-bg-controls button {
width: 54px;
height: 54px;
border: 1px solid rgba(255,255,255,0.20);
border-radius: 0;
background: rgba(255,255,255,0.12);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 28px;
font-weight: 950;
cursor: pointer;
backdrop-filter: blur(12px);
}
.vb-full-bg-dots {
position: absolute;
left: 72px;
bottom: 44px;
z-index: 5;
display: flex;
gap: 10px;
}
.vb-full-bg-dots button {
width: 42px;
height: 5px;
padding: 0;
border: 0;
border-radius: 0;
background: rgba(255,255,255,0.28);
cursor: pointer;
}
.vb-full-bg-dots button.is-active {
background: #38bdf8;
}
@media (max-width: 900px) {
.vb-full-bg-slider-stage,
.vb-full-bg-track,
.vb-full-bg-slide {
min-height: 760px;
height: 760px;
}
.vb-full-bg-slide {
padding: 46px;
}
.vb-full-bg-content h3 {
font-size: 64px !important;
}
}
@media (max-width: 640px) {
.vb-full-bg-slider {
padding: 12px;
}
.vb-full-bg-slider-stage,
.vb-full-bg-track,
.vb-full-bg-slide {
min-height: 780px;
height: 780px;
}
.vb-full-bg-slide {
padding: 26px;
}
.vb-full-bg-content h3 {
font-size: 46px !important;
}
.vb-full-bg-content p {
font-size: 16px;
}
.vb-full-bg-actions {
flex-direction: column;
}
.vb-full-bg-actions a {
width: 100%;
}
.vb-full-bg-side-count {
right: 24px;
top: 24px;
}
.vb-full-bg-controls {
right: 24px;
bottom: 24px;
}
.vb-full-bg-dots {
left: 26px;
bottom: 92px;
}
}
This fullscreen background JavaScript slider is a strong choice for immersive hero sections and visual landing pages. It works especially well when the first section of a website needs to create a bold impression while still giving users clear navigation and readable content.
11. Split Content Slider
A split content slider changes text and visual content together inside a two-column layout. This pattern is useful for SaaS feature sections, service explanations, app landing pages, product highlights, agency pages, startup websites, and homepage sections where each slide needs both written content and a visual panel.
This example uses a clean split-screen design with a left-side content panel and a right-side CSS-generated interface preview. The JavaScript moves the slide track horizontally and updates the active dot state. The layout is different from the previous fullscreen slider because it uses a calm white interface, structured cards, pill controls, and a product-feature style.
- Two-column split content slider
- Text and visual panel change together
- Good for SaaS features, service sections, app pages, and product highlights
- Responsive layout with visible first slide
- Full JavaScript, HTML, and CSS code included
JavaScript
(function () {
const slider = document.querySelector("[data-vb-split-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-split-slider-track]");
const dots = slider.querySelectorAll("[data-vb-split-slider-dot]");
const prev = slider.querySelector("[data-vb-split-slider-prev]");
const next = slider.querySelector("[data-vb-split-slider-next]");
const total = dots.length;
let index = 0;
function updateSplitSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updateSplitSlider(index - 1);
});
next.addEventListener("click", function () {
updateSplitSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateSplitSlider(Number(dot.getAttribute("data-vb-split-slider-dot")));
});
});
})();
HTML
<div class="vb-split-slider" data-vb-split-slider>
<div class="vb-split-slider-top">
<div>
<span>Split Content</span>
<h3>Explain features with text and visuals side by side</h3>
</div>
<div class="vb-split-slider-controls">
<button type="button" data-vb-split-slider-prev aria-label="Previous split slide">‹</button>
<button type="button" data-vb-split-slider-next aria-label="Next split slide">›</button>
</div>
</div>
<div class="vb-split-slider-window">
<div class="vb-split-slider-track" data-vb-split-slider-track>
<section class="vb-split-slide">
<div class="vb-split-copy">
<span>Feature 01</span>
<h4>Present a product benefit with a clear visual preview</h4>
<p>Split sliders work well when each slide needs a short explanation and a matching visual panel. Use this structure for app features, service benefits, dashboards, or onboarding content.</p>
<ul>
<li>Readable feature explanation</li>
<li>Matching CSS interface mockup</li>
<li>Simple arrow and dot navigation</li>
</ul>
<a href="#javascript-slider-examples">View examples</a>
</div>
<div class="vb-split-visual vb-split-visual-a">
<div class="vb-split-ui-card">
<div class="vb-split-ui-bar"></div>
<div class="vb-split-ui-grid">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="vb-split-ui-line"></div>
<div class="vb-split-ui-line short"></div>
</div>
</div>
</section>
<section class="vb-split-slide">
<div class="vb-split-copy">
<span>Feature 02</span>
<h4>Use sliders for guided product storytelling</h4>
<p>A split content slider can turn static product copy into a guided story where each panel explains one feature, use case, or customer benefit.</p>
<ul>
<li>Good for SaaS landing pages</li>
<li>Works for app feature tours</li>
<li>Easy to customize with real screenshots</li>
</ul>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
<div class="vb-split-visual vb-split-visual-b">
<div class="vb-split-ui-card">
<div class="vb-split-ui-bar"></div>
<div class="vb-split-ui-grid">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="vb-split-ui-line"></div>
<div class="vb-split-ui-line short"></div>
</div>
</div>
</section>
<section class="vb-split-slide">
<div class="vb-split-copy">
<span>Feature 03</span>
<h4>Keep navigation simple and visible</h4>
<p>For feature sliders, simple controls are often better than complex autoplay. Visitors should be able to move at their own pace and understand where they are.</p>
<ul>
<li>Clear slide indicators</li>
<li>Manual controls</li>
<li>Responsive content structure</li>
</ul>
<a href="#common-javascript-slider-mistakes">Avoid mistakes</a>
</div>
<div class="vb-split-visual vb-split-visual-c">
<div class="vb-split-ui-card">
<div class="vb-split-ui-bar"></div>
<div class="vb-split-ui-grid">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="vb-split-ui-line"></div>
<div class="vb-split-ui-line short"></div>
</div>
</div>
</section>
</div>
</div>
<div class="vb-split-slider-bottom">
<div class="vb-split-slider-dots">
<button type="button" class="is-active" data-vb-split-slider-dot="0" aria-label="Go to split slide 1"></button>
<button type="button" data-vb-split-slider-dot="1" aria-label="Go to split slide 2"></button>
<button type="button" data-vb-split-slider-dot="2" aria-label="Go to split slide 3"></button>
</div>
</div>
</div>
CSS
.vb-split-slider,
.vb-split-slider * {
box-sizing: border-box;
}
.vb-split-slider {
margin: 28px 0;
padding: 30px;
border-radius: 30px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
border: 1px solid rgba(148, 163, 184, 0.26);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
overflow: hidden;
}
.vb-split-slider-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.vb-split-slider-top span {
display: inline-flex;
margin-bottom: 12px;
padding: 8px 12px;
border-radius: 999px;
background: #ecfeff;
color: #0e7490 !important;
-webkit-text-fill-color: #0e7490 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-split-slider-top h3 {
max-width: 720px;
margin: 0 !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(32px, 5vw, 56px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.065em;
}
.vb-split-slider-controls {
display: flex;
gap: 10px;
flex: 0 0 auto;
}
.vb-split-slider-controls button {
width: 48px;
height: 48px;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 999px;
background: #0f172a;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 25px;
font-weight: 950;
cursor: pointer;
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
}
.vb-split-slider-window {
overflow: hidden;
border-radius: 24px;
background: #f1f5f9 !important;
}
.vb-split-slider-track {
display: flex;
transform: translateX(0);
transition: transform 0.5s ease;
}
.vb-split-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.86fr);
gap: 30px;
align-items: center;
min-height: 560px;
padding: 42px;
}
.vb-split-copy > span {
display: inline-flex;
margin-bottom: 14px;
padding: 7px 11px;
border-radius: 10px;
background: #0f172a;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.vb-split-copy h4 {
max-width: 640px;
margin: 0 0 16px !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(34px, 5vw, 62px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.065em;
}
.vb-split-copy p {
max-width: 580px;
margin: 0 0 20px !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-split-copy ul {
display: grid;
gap: 10px;
margin: 0 0 26px !important;
padding: 0 !important;
list-style: none !important;
}
.vb-split-copy li {
position: relative;
margin: 0 !important;
padding-left: 28px;
color: #334155 !important;
-webkit-text-fill-color: #334155 !important;
font-size: 15px;
font-weight: 750;
line-height: 1.45;
}
.vb-split-copy li::before {
content: "";
position: absolute;
left: 0;
top: 0.42em;
width: 14px;
height: 14px;
border-radius: 999px;
background: #06b6d4;
}
.vb-split-copy a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 13px 18px;
border-radius: 12px;
background: #06b6d4;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-split-visual {
position: relative;
min-height: 420px;
border-radius: 34px;
padding: 28px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
}
.vb-split-visual-a {
background: linear-gradient(135deg, #06b6d4, #2563eb) !important;
}
.vb-split-visual-b {
background: linear-gradient(135deg, #10b981, #0f766e) !important;
}
.vb-split-visual-c {
background: linear-gradient(135deg, #8b5cf6, #db2777) !important;
}
.vb-split-visual::before {
content: "";
position: absolute;
width: 240px;
height: 240px;
right: -70px;
top: -70px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
}
.vb-split-ui-card {
position: relative;
z-index: 2;
height: 100%;
min-height: 364px;
padding: 24px;
border-radius: 26px;
background: rgba(255, 255, 255, 0.88) !important;
border: 1px solid rgba(255,255,255,0.52);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}
.vb-split-ui-bar {
height: 54px;
margin-bottom: 20px;
border-radius: 16px;
background: rgba(15, 23, 42, 0.10);
}
.vb-split-ui-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-bottom: 20px;
}
.vb-split-ui-grid span {
min-height: 74px;
border-radius: 18px;
background: rgba(37, 99, 235, 0.14);
}
.vb-split-ui-grid span:nth-child(2) {
background: rgba(16, 185, 129, 0.16);
}
.vb-split-ui-grid span:nth-child(3) {
background: rgba(249, 115, 22, 0.16);
}
.vb-split-ui-grid span:nth-child(4) {
background: rgba(139, 92, 246, 0.16);
}
.vb-split-ui-line {
height: 16px;
margin-bottom: 12px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.12);
}
.vb-split-ui-line.short {
width: 64%;
}
.vb-split-slider-bottom {
display: flex;
justify-content: center;
margin-top: 20px;
}
.vb-split-slider-dots {
display: flex;
gap: 9px;
}
.vb-split-slider-dots button {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
background: #cbd5e1;
cursor: pointer;
}
.vb-split-slider-dots button.is-active {
width: 36px;
background: #06b6d4;
}
@media (max-width: 900px) {
.vb-split-slider-top {
align-items: flex-start;
flex-direction: column;
}
.vb-split-slide {
grid-template-columns: 1fr;
min-height: 820px;
}
}
@media (max-width: 640px) {
.vb-split-slider {
padding: 20px;
border-radius: 24px;
}
.vb-split-slide {
padding: 24px;
min-height: 820px;
}
.vb-split-copy h4 {
font-size: 36px !important;
}
.vb-split-visual {
min-height: 330px;
border-radius: 24px;
}
}
This split content JavaScript slider is a strong pattern for SaaS feature sections, product storytelling, app landing pages, service pages, and business websites. It keeps each slide focused by pairing one clear message with one matching visual panel.
12. Pricing Plan Slider
A pricing plan slider helps websites show different packages, plans, subscriptions, service levels, or product bundles in a compact and interactive layout. It is useful for SaaS pricing sections, agency service packages, hosting plans, membership websites, course packages, digital products, and mobile pricing layouts.
This example uses a bold pricing interface with plan cards, feature lists, prices, and a highlighted recommended plan. The design is intentionally different from the split content slider: it uses dark navy, lime accents, pricing-focused typography, rectangular cards, and a mobile-friendly carousel structure.
- JavaScript pricing plan carousel
- Displays several pricing cards in a horizontal slider
- Includes plan names, prices, feature lists, and CTA buttons
- Responsive layout for desktop and mobile pricing sections
- Good for SaaS, agencies, hosting, memberships, and service packages
JavaScript
(function () {
const slider = document.querySelector("[data-vb-pricing-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-pricing-slider-track]");
const cards = slider.querySelectorAll(".vb-pricing-card");
const dots = slider.querySelectorAll("[data-vb-pricing-slider-dot]");
const prev = slider.querySelector("[data-vb-pricing-slider-prev]");
const next = slider.querySelector("[data-vb-pricing-slider-next]");
let index = 0;
function getVisibleCount() {
if (window.innerWidth <= 560) return 1;
if (window.innerWidth <= 820) return 2;
if (window.innerWidth <= 1120) return 3;
return 4;
}
function updatePricingSlider(newIndex) {
const visible = getVisibleCount();
const maxIndex = Math.max(cards.length - visible, 0);
if (newIndex < 0) {
index = maxIndex;
} else if (newIndex > maxIndex) {
index = 0;
} else {
index = newIndex;
}
const cardWidth = cards[0].getBoundingClientRect().width;
const gap = 18;
track.style.transform = "translateX(-" + ((cardWidth + gap) * index) + "px)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updatePricingSlider(index - 1);
});
next.addEventListener("click", function () {
updatePricingSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updatePricingSlider(Number(dot.getAttribute("data-vb-pricing-slider-dot")));
});
});
window.addEventListener("resize", function () {
updatePricingSlider(index);
});
})();
HTML
<div class="vb-pricing-slider" data-vb-pricing-slider>
<div class="vb-pricing-slider-head">
<span>Pricing Slider</span>
<h3>Compare plans in a responsive JavaScript pricing carousel</h3>
<p>Use this pricing slider to present plans, packages, memberships, subscriptions, or service tiers in a compact section.</p>
</div>
<div class="vb-pricing-slider-window">
<div class="vb-pricing-slider-track" data-vb-pricing-slider-track>
<article class="vb-pricing-card">
<div class="vb-pricing-card-label">Starter</div>
<h4>Essential</h4>
<p>For small projects that need a clean starting point.</p>
<div class="vb-pricing-price">$19<span>/mo</span></div>
<ul>
<li>Basic slider setup</li>
<li>Responsive layout</li>
<li>Email support</li>
</ul>
<a href="#javascript-slider-examples">Choose plan</a>
</article>
<article class="vb-pricing-card vb-pricing-card-featured">
<div class="vb-pricing-card-label">Popular</div>
<h4>Professional</h4>
<p>For growing websites that need more UI sections.</p>
<div class="vb-pricing-price">$49<span>/mo</span></div>
<ul>
<li>Advanced slider layouts</li>
<li>Custom interactions</li>
<li>Priority support</li>
</ul>
<a href="#javascript-slider-examples">Choose plan</a>
</article>
<article class="vb-pricing-card">
<div class="vb-pricing-card-label">Business</div>
<h4>Growth</h4>
<p>For businesses that need polished conversion sections.</p>
<div class="vb-pricing-price">$89<span>/mo</span></div>
<ul>
<li>Multiple UI components</li>
<li>Conversion sections</li>
<li>Design review</li>
</ul>
<a href="#javascript-slider-examples">Choose plan</a>
</article>
<article class="vb-pricing-card">
<div class="vb-pricing-card-label">Enterprise</div>
<h4>Scale</h4>
<p>For larger teams that need custom landing page systems.</p>
<div class="vb-pricing-price">$149<span>/mo</span></div>
<ul>
<li>Custom design system</li>
<li>Reusable components</li>
<li>Dedicated support</li>
</ul>
<a href="#javascript-slider-examples">Contact sales</a>
</article>
</div>
</div>
<div class="vb-pricing-slider-controls">
<button type="button" data-vb-pricing-slider-prev aria-label="Previous pricing plan">‹</button>
<div class="vb-pricing-slider-dots">
<button type="button" class="is-active" data-vb-pricing-slider-dot="0" aria-label="Go to pricing plan 1"></button>
<button type="button" data-vb-pricing-slider-dot="1" aria-label="Go to pricing plan 2"></button>
<button type="button" data-vb-pricing-slider-dot="2" aria-label="Go to pricing plan 3"></button>
<button type="button" data-vb-pricing-slider-dot="3" aria-label="Go to pricing plan 4"></button>
</div>
<button type="button" data-vb-pricing-slider-next aria-label="Next pricing plan">›</button>
</div>
</div>
CSS
.vb-pricing-slider,
.vb-pricing-slider * {
box-sizing: border-box;
}
.vb-pricing-slider {
margin: 28px 0;
padding: 30px;
border-radius: 0 44px 0 44px;
background:
radial-gradient(circle at 14% 16%, rgba(132, 204, 22, 0.20), transparent 30%),
linear-gradient(135deg, #020617 0%, #111827 100%) !important;
border: 1px solid rgba(132, 204, 22, 0.20);
box-shadow: 0 28px 86px rgba(2, 6, 23, 0.34);
overflow: hidden;
}
.vb-pricing-slider-head {
max-width: 820px;
margin-bottom: 26px;
}
.vb-pricing-slider-head > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 0 16px 0 16px;
background: #a3e635;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-pricing-slider-head h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(34px, 5vw, 62px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.07em;
}
.vb-pricing-slider-head p {
margin: 0 !important;
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-pricing-slider-window {
overflow: hidden;
}
.vb-pricing-slider-track {
display: flex;
gap: 18px;
transform: translateX(0);
transition: transform 0.48s ease;
}
.vb-pricing-card {
flex: 0 0 calc((100% - 54px) / 4);
min-height: 470px;
padding: 24px;
border-radius: 0 28px 0 28px;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.13);
color: #ffffff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.vb-pricing-card-featured {
background: #ffffff !important;
color: #111827;
transform: translateY(-6px);
}
.vb-pricing-card-label {
width: fit-content;
margin-bottom: 18px;
padding: 7px 10px;
border-radius: 999px;
background: rgba(163, 230, 53, 0.16);
color: #bef264 !important;
-webkit-text-fill-color: #bef264 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.vb-pricing-card-featured .vb-pricing-card-label {
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-pricing-card h4 {
margin: 0 0 10px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 28px !important;
line-height: 1.05 !important;
font-weight: 950 !important;
letter-spacing: -0.05em;
}
.vb-pricing-card-featured h4 {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
}
.vb-pricing-card p {
min-height: 74px;
margin: 0 0 20px !important;
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 14px;
line-height: 1.6;
font-weight: 650;
}
.vb-pricing-card-featured p {
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
}
.vb-pricing-price {
margin-bottom: 22px;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 48px;
line-height: 1;
font-weight: 950;
letter-spacing: -0.07em;
}
.vb-pricing-card-featured .vb-pricing-price {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
}
.vb-pricing-price span {
margin-left: 5px;
color: #94a3b8 !important;
-webkit-text-fill-color: #94a3b8 !important;
font-size: 14px;
font-weight: 850;
letter-spacing: 0;
}
.vb-pricing-card ul {
display: grid;
gap: 10px;
min-height: 110px;
margin: 0 0 24px !important;
padding: 0 !important;
list-style: none !important;
}
.vb-pricing-card li {
position: relative;
margin: 0 !important;
padding-left: 24px;
color: #e5e7eb !important;
-webkit-text-fill-color: #e5e7eb !important;
font-size: 14px;
font-weight: 750;
}
.vb-pricing-card-featured li {
color: #334155 !important;
-webkit-text-fill-color: #334155 !important;
}
.vb-pricing-card li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 13px;
height: 13px;
border-radius: 999px;
background: #a3e635;
}
.vb-pricing-card a {
display: inline-flex;
width: 100%;
min-height: 48px;
align-items: center;
justify-content: center;
border-radius: 0 16px 0 16px;
background: #a3e635;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-pricing-card-featured a {
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-pricing-slider-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 22px;
}
.vb-pricing-slider-controls > button {
width: 48px;
height: 48px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 0 16px 0 16px;
background: rgba(255,255,255,0.08);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 25px;
font-weight: 950;
cursor: pointer;
}
.vb-pricing-slider-dots {
display: flex;
gap: 9px;
}
.vb-pricing-slider-dots button {
width: 11px;
height: 11px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,0.28);
cursor: pointer;
}
.vb-pricing-slider-dots button.is-active {
width: 34px;
background: #a3e635;
}
@media (max-width: 1120px) {
.vb-pricing-card {
flex-basis: calc((100% - 36px) / 3);
}
}
@media (max-width: 820px) {
.vb-pricing-card {
flex-basis: calc((100% - 18px) / 2);
}
}
@media (max-width: 560px) {
.vb-pricing-slider {
padding: 20px;
border-radius: 0 28px 0 28px;
}
.vb-pricing-card {
flex-basis: 100%;
}
.vb-pricing-slider-head h3 {
font-size: 36px !important;
}
}
This pricing plan JavaScript slider is useful when pricing content needs to stay compact, responsive, and easy to compare. You can adapt it for SaaS plans, agency packages, hosting plans, subscription tiers, course bundles, membership levels, and service pricing sections.
13. Logo Carousel Slider
A logo carousel slider is useful for showing partner logos, client logos, press mentions, technology stacks, integrations, sponsors, awards, and brand trust signals in a compact horizontal section. This JavaScript carousel pattern works well on SaaS websites, agency homepages, startup landing pages, event pages, B2B websites, and service business pages.
This example uses a clean trust-section design with monochrome logo cards, subtle movement, arrow controls, and responsive card widths. The logos are CSS-generated text marks, so the carousel works without external images or SVG files. You can replace the placeholder logo text with real image logos later.
- JavaScript logo carousel for trust and partner sections
- CSS-generated logo cards without external images
- Responsive multi-card carousel layout
- Previous and next controls
- Good for SaaS, agencies, startups, sponsors, integrations, and B2B websites
Trusted By
Show client logos in a clean JavaScript logo carousel
Use this logo slider to display clients, partners, sponsors, integrations, press mentions, or technology brands.
Nova
Pulse
Orbit
Atlas
Vertex
Signal
Cloudly
Metric
8+
example partner logos
JavaScript
(function () {
const carousel = document.querySelector("[data-vb-logo-carousel]");
if (!carousel) return;
const track = carousel.querySelector("[data-vb-logo-carousel-track]");
const cards = carousel.querySelectorAll(".vb-logo-card");
const prev = carousel.querySelector("[data-vb-logo-carousel-prev]");
const next = carousel.querySelector("[data-vb-logo-carousel-next]");
let index = 0;
function getVisibleCount() {
if (window.innerWidth <= 640) return 2;
if (window.innerWidth <= 820) return 3;
if (window.innerWidth <= 1100) return 4;
return 5;
}
function updateLogoCarousel(newIndex) {
const visible = getVisibleCount();
const maxIndex = Math.max(cards.length - visible, 0);
if (newIndex < 0) {
index = maxIndex;
} else if (newIndex > maxIndex) {
index = 0;
} else {
index = newIndex;
}
const cardWidth = cards[0].getBoundingClientRect().width;
const gap = 16;
track.style.transform = "translateX(-" + ((cardWidth + gap) * index) + "px)";
}
prev.addEventListener("click", function () {
updateLogoCarousel(index - 1);
});
next.addEventListener("click", function () {
updateLogoCarousel(index + 1);
});
window.addEventListener("resize", function () {
updateLogoCarousel(index);
});
})();
HTML
<div class="vb-logo-carousel" data-vb-logo-carousel>
<div class="vb-logo-carousel-head">
<span>Trusted By</span>
<h3>Show client logos in a clean JavaScript logo carousel</h3>
<p>Use this logo slider to display clients, partners, sponsors, integrations, press mentions, or technology brands.</p>
</div>
<div class="vb-logo-carousel-window">
<div class="vb-logo-carousel-track" data-vb-logo-carousel-track>
<div class="vb-logo-card"><span>Nova</span></div>
<div class="vb-logo-card"><span>Pulse</span></div>
<div class="vb-logo-card"><span>Orbit</span></div>
<div class="vb-logo-card"><span>Atlas</span></div>
<div class="vb-logo-card"><span>Vertex</span></div>
<div class="vb-logo-card"><span>Signal</span></div>
<div class="vb-logo-card"><span>Cloudly</span></div>
<div class="vb-logo-card"><span>Metric</span></div>
</div>
</div>
<div class="vb-logo-carousel-bottom">
<button type="button" data-vb-logo-carousel-prev aria-label="Previous logos">‹</button>
<div class="vb-logo-carousel-note">
<strong>8+</strong>
<span>example partner logos</span>
</div>
<button type="button" data-vb-logo-carousel-next aria-label="Next logos">›</button>
</div>
</div>
CSS
.vb-logo-carousel,
.vb-logo-carousel * {
box-sizing: border-box;
}
.vb-logo-carousel {
margin: 28px 0;
padding: 30px;
border-radius: 36px;
background:
linear-gradient(135deg, #f8fafc 0%, #ffffff 48%, #eef2ff 100%) !important;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
overflow: hidden;
}
.vb-logo-carousel-head {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
text-align: center;
margin-bottom: 28px;
}
.vb-logo-carousel-head span {
display: inline-flex;
margin-bottom: 12px;
padding: 8px 12px;
border-radius: 999px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.vb-logo-carousel-head h3 {
max-width: 760px;
margin: 0 0 14px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(32px, 5vw, 56px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.065em;
}
.vb-logo-carousel-head p {
max-width: 680px;
margin: 0 !important;
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-logo-carousel-window {
overflow: hidden;
padding: 4px;
}
.vb-logo-carousel-track {
display: flex;
gap: 16px;
transform: translateX(0);
transition: transform 0.45s ease;
}
.vb-logo-card {
position: relative;
flex: 0 0 calc((100% - 64px) / 5);
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 28px;
background: #ffffff !important;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
overflow: hidden;
}
.vb-logo-card::before {
content: "";
position: absolute;
inset: 18px;
border-radius: 22px;
background:
radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.14), transparent 28%),
linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.01));
}
.vb-logo-card span {
position: relative;
z-index: 2;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 25px;
line-height: 1;
font-weight: 950;
letter-spacing: -0.06em;
}
.vb-logo-card:nth-child(2n) span {
color: #4f46e5 !important;
-webkit-text-fill-color: #4f46e5 !important;
}
.vb-logo-card:nth-child(3n) span {
color: #0f766e !important;
-webkit-text-fill-color: #0f766e !important;
}
.vb-logo-carousel-bottom {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) 54px;
gap: 16px;
align-items: center;
margin-top: 24px;
}
.vb-logo-carousel-bottom button {
width: 54px;
height: 54px;
border: 0;
border-radius: 999px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 26px;
font-weight: 950;
cursor: pointer;
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
}
.vb-logo-carousel-note {
display: flex;
justify-content: center;
align-items: baseline;
gap: 10px;
padding: 14px 18px;
border-radius: 999px;
background: rgba(79, 70, 229, 0.08);
border: 1px solid rgba(79, 70, 229, 0.14);
}
.vb-logo-carousel-note strong {
color: #4f46e5 !important;
-webkit-text-fill-color: #4f46e5 !important;
font-size: 24px;
line-height: 1;
font-weight: 950;
}
.vb-logo-carousel-note span {
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 14px;
font-weight: 850;
}
@media (max-width: 1100px) {
.vb-logo-card {
flex-basis: calc((100% - 48px) / 4);
}
}
@media (max-width: 820px) {
.vb-logo-card {
flex-basis: calc((100% - 32px) / 3);
}
}
@media (max-width: 640px) {
.vb-logo-carousel {
padding: 20px;
border-radius: 26px;
}
.vb-logo-card {
flex-basis: calc((100% - 16px) / 2);
min-height: 132px;
}
.vb-logo-carousel-head h3 {
font-size: 34px !important;
}
.vb-logo-carousel-bottom {
grid-template-columns: 48px minmax(0, 1fr) 48px;
}
.vb-logo-carousel-bottom button {
width: 48px;
height: 48px;
}
.vb-logo-carousel-note {
flex-direction: column;
gap: 3px;
align-items: center;
}
}
This JavaScript logo carousel is a practical trust-building section for SaaS websites, agencies, startups, event pages, sponsor sections, partner strips, integration showcases, and B2B landing pages. Replace the text placeholders with real logo images when you use it in a production project.
14. Before and After Slider
A before and after slider lets visitors compare two states by dragging a handle across the visual area. This JavaScript pattern is useful for renovation websites, beauty services, cleaning companies, design portfolios, photo editing examples, roofing projects, interior design, landscaping, repair services, and any website that needs a strong visual comparison.
This example uses a draggable comparison handle with a CSS-generated “before” and “after” scene. The JavaScript listens for mouse and touch movement, calculates the handle position, and updates the visible after layer. It is a different slider style because it is interactive by dragging rather than clicking arrows.
- Interactive before and after comparison slider
- Mouse and touch drag support
- CSS-generated before and after panels
- Useful for portfolios, renovation, design, repair, and service websites
- Full JavaScript, HTML, and CSS code included
JavaScript
(function () {
const slider = document.querySelector("[data-vb-before-after]");
if (!slider) return;
const box = slider.querySelector("[data-vb-before-after-box]");
const after = slider.querySelector("[data-vb-before-after-after]");
const divider = slider.querySelector("[data-vb-before-after-divider]");
let isDragging = false;
function setPosition(clientX) {
const rect = box.getBoundingClientRect();
let position = ((clientX - rect.left) / rect.width) * 100;
if (position < 0) position = 0;
if (position > 100) position = 100;
after.style.width = position + "%";
divider.style.left = position + "%";
}
function startDrag(event) {
isDragging = true;
const clientX = event.touches ? event.touches[0].clientX : event.clientX;
setPosition(clientX);
}
function moveDrag(event) {
if (!isDragging) return;
const clientX = event.touches ? event.touches[0].clientX : event.clientX;
setPosition(clientX);
}
function stopDrag() {
isDragging = false;
}
box.addEventListener("mousedown", startDrag);
window.addEventListener("mousemove", moveDrag);
window.addEventListener("mouseup", stopDrag);
box.addEventListener("touchstart", startDrag);
window.addEventListener("touchmove", moveDrag);
window.addEventListener("touchend", stopDrag);
})();
HTML
<div class="vb-before-after-slider" data-vb-before-after>
<div class="vb-before-after-info">
<span>Before / After</span>
<h3>Drag the handle to compare two visual states</h3>
<p>This JavaScript comparison slider is useful when visitors need to see a transformation, result, upgrade, repair, redesign, or visual improvement.</p>
</div>
<div class="vb-before-after-box" data-vb-before-after-box>
<div class="vb-ba-layer vb-ba-before">
<div class="vb-ba-scene">
<span>Before</span>
<strong>Old Layout</strong>
</div>
</div>
<div class="vb-ba-layer vb-ba-after" data-vb-before-after-after>
<div class="vb-ba-scene">
<span>After</span>
<strong>New Design</strong>
</div>
</div>
<div class="vb-ba-divider" data-vb-before-after-divider>
<button type="button" data-vb-before-after-handle aria-label="Drag before and after slider">↔</button>
</div>
</div>
<div class="vb-before-after-footer">
<div>
<strong>Before</strong>
<span>Muted, flat, unfinished state</span>
</div>
<div>
<strong>After</strong>
<span>Bright, polished, conversion-ready result</span>
</div>
</div>
</div>
CSS
.vb-before-after-slider,
.vb-before-after-slider * {
box-sizing: border-box;
}
.vb-before-after-slider {
margin: 28px 0;
padding: 28px;
border-radius: 18px 54px 18px 54px;
background:
radial-gradient(circle at 12% 18%, rgba(14, 165, 233, 0.18), transparent 28%),
linear-gradient(135deg, #0f172a 0%, #020617 100%) !important;
border: 1px solid rgba(125, 211, 252, 0.16);
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.34);
overflow: hidden;
}
.vb-before-after-info {
max-width: 760px;
margin-bottom: 24px;
}
.vb-before-after-info span {
display: inline-flex;
margin-bottom: 12px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(125, 211, 252, 0.12);
border: 1px solid rgba(125, 211, 252, 0.20);
color: #bae6fd !important;
-webkit-text-fill-color: #bae6fd !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-before-after-info h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(34px, 5vw, 64px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.07em;
}
.vb-before-after-info p {
margin: 0 !important;
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-before-after-box {
position: relative;
min-height: 560px;
border-radius: 14px 40px 14px 40px;
overflow: hidden;
user-select: none;
touch-action: none;
background: #111827 !important;
border: 1px solid rgba(255,255,255,0.12);
}
.vb-ba-layer {
position: absolute;
inset: 0;
}
.vb-ba-before {
background:
linear-gradient(135deg, #475569 0%, #1f2937 52%, #111827 100%) !important;
}
.vb-ba-after {
width: 50%;
overflow: hidden;
background:
linear-gradient(135deg, #06b6d4 0%, #2563eb 52%, #7c3aed 100%) !important;
}
.vb-ba-scene {
position: absolute;
inset: 42px;
min-width: calc(100% - 84px);
border-radius: 14px 34px 14px 34px;
border: 1px solid rgba(255,255,255,0.22);
background:
radial-gradient(circle at 22% 20%, rgba(255,255,255,0.34), transparent 22%),
radial-gradient(circle at 78% 30%, rgba(255,255,255,0.20), transparent 24%),
linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
}
.vb-ba-scene::before {
content: "";
position: absolute;
left: 34px;
top: 34px;
right: 34px;
height: 70px;
border-radius: 20px;
background: rgba(255,255,255,0.18);
}
.vb-ba-scene::after {
content: "";
position: absolute;
right: 40px;
bottom: 40px;
width: 190px;
height: 150px;
border-radius: 34px;
background: rgba(255,255,255,0.16);
transform: rotate(-10deg);
}
.vb-ba-scene span {
position: absolute;
left: 34px;
bottom: 92px;
z-index: 2;
padding: 9px 12px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.55);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-ba-scene strong {
position: absolute;
left: 34px;
bottom: 34px;
z-index: 2;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(34px, 5vw, 62px);
line-height: 0.95;
font-weight: 950;
letter-spacing: -0.07em;
}
.vb-ba-divider {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 4px;
background: #ffffff;
transform: translateX(-50%);
z-index: 5;
}
.vb-ba-divider button {
position: absolute;
left: 50%;
top: 50%;
width: 66px;
height: 66px;
border: 4px solid #ffffff;
border-radius: 999px;
background: #020617;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 22px;
font-weight: 950;
cursor: grab;
transform: translate(-50%, -50%);
box-shadow: 0 18px 42px rgba(2, 6, 23, 0.34);
}
.vb-ba-divider button:active {
cursor: grabbing;
}
.vb-before-after-footer {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
.vb-before-after-footer div {
padding: 18px;
border-radius: 18px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.10);
}
.vb-before-after-footer strong {
display: block;
margin-bottom: 5px;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 18px;
font-weight: 950;
}
.vb-before-after-footer span {
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 14px;
line-height: 1.5;
font-weight: 650;
}
@media (max-width: 760px) {
.vb-before-after-slider {
padding: 20px;
border-radius: 16px 34px 16px 34px;
}
.vb-before-after-box {
min-height: 500px;
}
.vb-ba-scene {
inset: 24px;
min-width: calc(100% - 48px);
}
.vb-before-after-footer {
grid-template-columns: 1fr;
}
}
This before and after JavaScript slider is a strong interactive pattern for transformation-based websites. It is especially useful for portfolios, redesigns, renovations, cleaning results, repair services, beauty treatments, product upgrades, and visual case studies.
15. Content Carousel Slider
A content carousel slider is useful when a website needs to show different content blocks inside one compact section. This can include blog previews, learning modules, service cards, resource links, onboarding panels, feature highlights, or marketing messages. Unlike a basic image slider, this carousel focuses on structured text content and readable information.
This example uses a clean editorial layout with article-style cards, category labels, reading time, arrows, and dot navigation. The design is intentionally different from the previous examples because it uses a magazine/content hub style with white cards, serif-inspired headings, soft beige tones, and structured content previews.
- JavaScript content carousel for article and resource previews
- Works with text-heavy cards instead of image slides
- Includes category labels, reading time, titles, and summaries
- Responsive carousel movement
- Good for blogs, learning hubs, resources, onboarding, and service content
Content Carousel
Show useful resources in a readable carousel layout
Use this JavaScript carousel to present blog posts, guides, lessons, resources, or content cards in one compact section.
How to plan a better JavaScript slider section
Learn how to choose the right slider type, keep controls visible, and avoid overloading the section with too much content.
Read guideDesign rules for modern carousel layouts
Use spacing, readable typography, and consistent card structure to make carousel content easier to scan.
View checklistWhen should a website use a content slider?
Content sliders work best when users benefit from browsing related items without leaving the current section.
Learn moreSimple JavaScript logic for moving a card track
A small amount of JavaScript can power responsive content carousels without relying on large external libraries.
View examplesCommon carousel mistakes that hurt usability
Avoid hidden controls, unreadable cards, autoplay-only behavior, and sliders that do not work well on mobile.
Avoid mistakesJavaScript
(function () {
const carousel = document.querySelector("[data-vb-content-carousel]");
if (!carousel) return;
const track = carousel.querySelector("[data-vb-content-carousel-track]");
const cards = carousel.querySelectorAll(".vb-content-card");
const dots = carousel.querySelectorAll("[data-vb-content-carousel-dot]");
const prev = carousel.querySelector("[data-vb-content-carousel-prev]");
const next = carousel.querySelector("[data-vb-content-carousel-next]");
let index = 0;
function getVisibleCount() {
if (window.innerWidth <= 640) return 1;
if (window.innerWidth <= 980) return 2;
return 3;
}
function updateContentCarousel(newIndex) {
const visible = getVisibleCount();
const maxIndex = Math.max(cards.length - visible, 0);
if (newIndex < 0) {
index = maxIndex;
} else if (newIndex > maxIndex) {
index = 0;
} else {
index = newIndex;
}
const cardWidth = cards[0].getBoundingClientRect().width;
const gap = 18;
track.style.transform = "translateX(-" + ((cardWidth + gap) * index) + "px)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === Math.min(index, dots.length - 1));
});
}
prev.addEventListener("click", function () {
updateContentCarousel(index - 1);
});
next.addEventListener("click", function () {
updateContentCarousel(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateContentCarousel(Number(dot.getAttribute("data-vb-content-carousel-dot")));
});
});
window.addEventListener("resize", function () {
updateContentCarousel(index);
});
})();
HTML
<div class="vb-content-carousel" data-vb-content-carousel>
<div class="vb-content-carousel-header">
<div>
<span>Content Carousel</span>
<h3>Show useful resources in a readable carousel layout</h3>
<p>Use this JavaScript carousel to present blog posts, guides, lessons, resources, or content cards in one compact section.</p>
</div>
<div class="vb-content-carousel-arrows">
<button type="button" data-vb-content-carousel-prev aria-label="Previous content cards">‹</button>
<button type="button" data-vb-content-carousel-next aria-label="Next content cards">›</button>
</div>
</div>
<div class="vb-content-carousel-window">
<div class="vb-content-carousel-track" data-vb-content-carousel-track>
<article class="vb-content-card">
<div class="vb-content-card-meta">
<span>Guide</span>
<small>6 min read</small>
</div>
<h4>How to plan a better JavaScript slider section</h4>
<p>Learn how to choose the right slider type, keep controls visible, and avoid overloading the section with too much content.</p>
<a href="#javascript-slider-best-practices">Read guide</a>
</article>
<article class="vb-content-card">
<div class="vb-content-card-meta">
<span>UI Design</span>
<small>4 min read</small>
</div>
<h4>Design rules for modern carousel layouts</h4>
<p>Use spacing, readable typography, and consistent card structure to make carousel content easier to scan.</p>
<a href="#what-should-a-good-javascript-slider-include">View checklist</a>
</article>
<article class="vb-content-card">
<div class="vb-content-card-meta">
<span>UX Tips</span>
<small>5 min read</small>
</div>
<h4>When should a website use a content slider?</h4>
<p>Content sliders work best when users benefit from browsing related items without leaving the current section.</p>
<a href="#why-javascript-sliders-matter">Learn more</a>
</article>
<article class="vb-content-card">
<div class="vb-content-card-meta">
<span>Code</span>
<small>7 min read</small>
</div>
<h4>Simple JavaScript logic for moving a card track</h4>
<p>A small amount of JavaScript can power responsive content carousels without relying on large external libraries.</p>
<a href="#javascript-slider-examples">View examples</a>
</article>
<article class="vb-content-card">
<div class="vb-content-card-meta">
<span>Mistakes</span>
<small>3 min read</small>
</div>
<h4>Common carousel mistakes that hurt usability</h4>
<p>Avoid hidden controls, unreadable cards, autoplay-only behavior, and sliders that do not work well on mobile.</p>
<a href="#common-javascript-slider-mistakes">Avoid mistakes</a>
</article>
</div>
</div>
<div class="vb-content-carousel-dots">
<button type="button" class="is-active" data-vb-content-carousel-dot="0" aria-label="Go to content group 1"></button>
<button type="button" data-vb-content-carousel-dot="1" aria-label="Go to content group 2"></button>
<button type="button" data-vb-content-carousel-dot="2" aria-label="Go to content group 3"></button>
</div>
</div>
CSS
.vb-content-carousel,
.vb-content-carousel * {
box-sizing: border-box;
}
.vb-content-carousel {
margin: 28px 0;
padding: 30px;
border-radius: 12px;
background:
linear-gradient(135deg, #fef3c7 0%, #fffbeb 45%, #ffffff 100%) !important;
border: 1px solid rgba(146, 64, 14, 0.16);
box-shadow: 0 24px 70px rgba(120, 53, 15, 0.10);
overflow: hidden;
}
.vb-content-carousel-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: end;
margin-bottom: 26px;
}
.vb-content-carousel-header span {
display: inline-flex;
margin-bottom: 12px;
padding: 8px 12px;
border-radius: 4px;
background: #92400e;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-content-carousel-header h3 {
max-width: 760px;
margin: 0 0 12px !important;
color: #451a03 !important;
-webkit-text-fill-color: #451a03 !important;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(34px, 5vw, 62px) !important;
line-height: 1.02 !important;
font-weight: 900 !important;
letter-spacing: -0.055em;
}
.vb-content-carousel-header p {
max-width: 690px;
margin: 0 !important;
color: #78350f !important;
-webkit-text-fill-color: #78350f !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-content-carousel-arrows {
display: flex;
gap: 10px;
}
.vb-content-carousel-arrows button {
width: 48px;
height: 48px;
border: 1px solid rgba(120, 53, 15, 0.18);
border-radius: 4px;
background: #ffffff;
color: #451a03 !important;
-webkit-text-fill-color: #451a03 !important;
font-size: 26px;
font-weight: 950;
cursor: pointer;
box-shadow: 0 14px 32px rgba(120, 53, 15, 0.10);
}
.vb-content-carousel-window {
overflow: hidden;
}
.vb-content-carousel-track {
display: flex;
gap: 18px;
transform: translateX(0);
transition: transform 0.45s ease;
}
.vb-content-card {
flex: 0 0 calc((100% - 36px) / 3);
min-height: 360px;
display: flex;
flex-direction: column;
padding: 26px;
border-radius: 10px;
background: #ffffff !important;
border: 1px solid rgba(120, 53, 15, 0.12);
box-shadow: 0 18px 42px rgba(120, 53, 15, 0.08);
}
.vb-content-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 22px;
}
.vb-content-card-meta span {
display: inline-flex;
padding: 7px 10px;
border-radius: 999px;
background: #fef3c7;
color: #92400e !important;
-webkit-text-fill-color: #92400e !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vb-content-card-meta small {
color: #a16207 !important;
-webkit-text-fill-color: #a16207 !important;
font-size: 12px;
font-weight: 800;
}
.vb-content-card h4 {
margin: 0 0 14px !important;
color: #451a03 !important;
-webkit-text-fill-color: #451a03 !important;
font-family: Georgia, "Times New Roman", serif;
font-size: 29px !important;
line-height: 1.08 !important;
font-weight: 900 !important;
letter-spacing: -0.045em;
}
.vb-content-card p {
margin: 0 0 24px !important;
color: #78350f !important;
-webkit-text-fill-color: #78350f !important;
font-size: 15px;
line-height: 1.7;
font-weight: 600;
}
.vb-content-card a {
margin-top: auto;
display: inline-flex;
width: fit-content;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 11px 15px;
border-radius: 4px;
background: #451a03;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 13px;
font-weight: 950;
text-decoration: none !important;
}
.vb-content-carousel-dots {
display: flex;
justify-content: center;
gap: 9px;
margin-top: 22px;
}
.vb-content-carousel-dots button {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(120, 53, 15, 0.25);
cursor: pointer;
}
.vb-content-carousel-dots button.is-active {
width: 38px;
background: #92400e;
}
@media (max-width: 980px) {
.vb-content-card {
flex-basis: calc((100% - 18px) / 2);
}
}
@media (max-width: 640px) {
.vb-content-carousel {
padding: 20px;
}
.vb-content-carousel-header {
grid-template-columns: 1fr;
}
.vb-content-carousel-header h3 {
font-size: 36px !important;
}
.vb-content-card {
flex-basis: 100%;
}
}
This content carousel JavaScript slider is a useful layout for blogs, resource hubs, course pages, documentation previews, onboarding cards, service explanations, and marketing content sections. It keeps text-heavy content organized while still giving users a simple way to browse more items.
16. Team Member Slider
A team member slider helps websites present people, roles, departments, experts, founders, instructors, consultants, or support agents in a compact and attractive format. This JavaScript slider is useful for agency websites, SaaS teams, course platforms, coaching websites, service businesses, startups, and company about pages.
This example uses a modern profile-card design with CSS-generated avatar shapes, role labels, skill tags, navigation arrows, and dot indicators. The design is different from the content carousel because it uses dark purple gradients, rounded portrait cards, profile details, and a team-focused layout.
- JavaScript team member slider
- Profile cards with name, role, tags, and short bio
- CSS-generated avatars without external images
- Responsive card carousel layout
- Good for agencies, startups, course platforms, service teams, and about pages
JavaScript
(function () {
const slider = document.querySelector("[data-vb-team-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-team-slider-track]");
const cards = slider.querySelectorAll(".vb-team-card");
const dots = slider.querySelectorAll("[data-vb-team-slider-dot]");
const prev = slider.querySelector("[data-vb-team-slider-prev]");
const next = slider.querySelector("[data-vb-team-slider-next]");
let index = 0;
function getVisibleCount() {
if (window.innerWidth <= 560) return 1;
if (window.innerWidth <= 820) return 2;
if (window.innerWidth <= 1100) return 3;
return 4;
}
function updateTeamSlider(newIndex) {
const visible = getVisibleCount();
const maxIndex = Math.max(cards.length - visible, 0);
if (newIndex < 0) {
index = maxIndex;
} else if (newIndex > maxIndex) {
index = 0;
} else {
index = newIndex;
}
const cardWidth = cards[0].getBoundingClientRect().width;
const gap = 18;
track.style.transform = "translateX(-" + ((cardWidth + gap) * index) + "px)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === Math.min(index, dots.length - 1));
});
}
prev.addEventListener("click", function () {
updateTeamSlider(index - 1);
});
next.addEventListener("click", function () {
updateTeamSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateTeamSlider(Number(dot.getAttribute("data-vb-team-slider-dot")));
});
});
window.addEventListener("resize", function () {
updateTeamSlider(index);
});
})();
HTML
<div class="vb-team-slider" data-vb-team-slider>
<div class="vb-team-slider-intro">
<span>Meet the Team</span>
<h3>Present experts in a polished profile slider</h3>
<p>Use this JavaScript team slider for founders, instructors, consultants, departments, support agents, or company profile sections.</p>
</div>
<div class="vb-team-slider-window">
<div class="vb-team-slider-track" data-vb-team-slider-track>
<article class="vb-team-card">
<div class="vb-team-avatar vb-team-avatar-a">
<span>AL</span>
</div>
<div class="vb-team-card-body">
<small>Product Strategy</small>
<h4>Ava Lawson</h4>
<p>Plans user journeys, conversion-focused sections, and feature explanations for modern landing pages.</p>
<div class="vb-team-tags">
<span>UX</span>
<span>Strategy</span>
</div>
</div>
</article>
<article class="vb-team-card">
<div class="vb-team-avatar vb-team-avatar-b">
<span>NR</span>
</div>
<div class="vb-team-card-body">
<small>Frontend Developer</small>
<h4>Noah Reed</h4>
<p>Builds lightweight JavaScript components, responsive layouts, and reusable UI patterns.</p>
<div class="vb-team-tags">
<span>JavaScript</span>
<span>CSS</span>
</div>
</div>
</article>
<article class="vb-team-card">
<div class="vb-team-avatar vb-team-avatar-c">
<span>MS</span>
</div>
<div class="vb-team-card-body">
<small>Visual Designer</small>
<h4>Mia Stone</h4>
<p>Creates strong interface systems, brand visuals, and polished website sections that feel professional.</p>
<div class="vb-team-tags">
<span>UI</span>
<span>Branding</span>
</div>
</div>
</article>
<article class="vb-team-card">
<div class="vb-team-avatar vb-team-avatar-d">
<span>EL</span>
</div>
<div class="vb-team-card-body">
<small>Growth Specialist</small>
<h4>Ethan Lane</h4>
<p>Improves landing page structure, CTA placement, and content flow for better user engagement.</p>
<div class="vb-team-tags">
<span>Growth</span>
<span>SEO</span>
</div>
</div>
</article>
</div>
</div>
<div class="vb-team-slider-controls">
<button type="button" data-vb-team-slider-prev aria-label="Previous team members">‹</button>
<div class="vb-team-slider-dots">
<button type="button" class="is-active" data-vb-team-slider-dot="0" aria-label="Go to team group 1"></button>
<button type="button" data-vb-team-slider-dot="1" aria-label="Go to team group 2"></button>
<button type="button" data-vb-team-slider-dot="2" aria-label="Go to team group 3"></button>
</div>
<button type="button" data-vb-team-slider-next aria-label="Next team members">›</button>
</div>
</div>
CSS
.vb-team-slider,
.vb-team-slider * {
box-sizing: border-box;
}
.vb-team-slider {
margin: 28px 0;
padding: 30px;
border-radius: 44px;
background:
radial-gradient(circle at 18% 14%, rgba(168, 85, 247, 0.22), transparent 30%),
radial-gradient(circle at 86% 18%, rgba(236, 72, 153, 0.18), transparent 32%),
linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #581c87 100%) !important;
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 30px 90px rgba(49, 46, 129, 0.34);
overflow: hidden;
}
.vb-team-slider-intro {
max-width: 760px;
margin-bottom: 26px;
}
.vb-team-slider-intro > span {
display: inline-flex;
margin-bottom: 13px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
color: #f5d0fe !important;
-webkit-text-fill-color: #f5d0fe !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-team-slider-intro h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(34px, 5vw, 64px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.07em;
}
.vb-team-slider-intro p {
margin: 0 !important;
color: #ddd6fe !important;
-webkit-text-fill-color: #ddd6fe !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-team-slider-window {
overflow: hidden;
}
.vb-team-slider-track {
display: flex;
gap: 18px;
transform: translateX(0);
transition: transform 0.45s ease;
}
.vb-team-card {
flex: 0 0 calc((100% - 54px) / 4);
overflow: hidden;
border-radius: 34px;
background: rgba(255,255,255,0.10) !important;
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}
.vb-team-avatar {
position: relative;
min-height: 250px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.vb-team-avatar::before {
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 999px;
background: rgba(255,255,255,0.20);
}
.vb-team-avatar::after {
content: "";
position: absolute;
width: 110px;
height: 110px;
bottom: -24px;
border-radius: 36px;
background: rgba(255,255,255,0.18);
transform: rotate(12deg);
}
.vb-team-avatar-a {
background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}
.vb-team-avatar-b {
background: linear-gradient(135deg, #06b6d4, #2563eb) !important;
}
.vb-team-avatar-c {
background: linear-gradient(135deg, #f97316, #be123c) !important;
}
.vb-team-avatar-d {
background: linear-gradient(135deg, #10b981, #0f766e) !important;
}
.vb-team-avatar span {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 92px;
height: 92px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.66);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 28px;
font-weight: 950;
letter-spacing: -0.06em;
border: 1px solid rgba(255,255,255,0.22);
}
.vb-team-card-body {
padding: 22px;
background: rgba(2, 6, 23, 0.42) !important;
}
.vb-team-card-body small {
display: block;
margin-bottom: 9px;
color: #f0abfc !important;
-webkit-text-fill-color: #f0abfc !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.vb-team-card-body h4 {
margin: 0 0 10px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 25px !important;
line-height: 1.08 !important;
font-weight: 950 !important;
letter-spacing: -0.045em;
}
.vb-team-card-body p {
min-height: 92px;
margin: 0 0 18px !important;
color: #ddd6fe !important;
-webkit-text-fill-color: #ddd6fe !important;
font-size: 14px;
line-height: 1.6;
font-weight: 650;
}
.vb-team-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.vb-team-tags span {
display: inline-flex;
padding: 7px 9px;
border-radius: 999px;
background: rgba(255,255,255,0.11);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 850;
}
.vb-team-slider-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 22px;
}
.vb-team-slider-controls > button {
width: 50px;
height: 50px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px;
background: rgba(255,255,255,0.12);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 26px;
font-weight: 950;
cursor: pointer;
}
.vb-team-slider-dots {
display: flex;
gap: 9px;
}
.vb-team-slider-dots button {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,0.30);
cursor: pointer;
}
.vb-team-slider-dots button.is-active {
width: 38px;
background: #f0abfc;
}
@media (max-width: 1100px) {
.vb-team-card {
flex-basis: calc((100% - 36px) / 3);
}
}
@media (max-width: 820px) {
.vb-team-card {
flex-basis: calc((100% - 18px) / 2);
}
}
@media (max-width: 560px) {
.vb-team-slider {
padding: 20px;
border-radius: 30px;
}
.vb-team-slider-intro h3 {
font-size: 36px !important;
}
.vb-team-card {
flex-basis: 100%;
}
}
This team member JavaScript slider is useful for about pages, agency websites, startup teams, instructor sections, consultant profiles, support teams, and expert directories. It keeps profile content compact while still giving each person enough visual space.
17. App Screenshot Slider
An app screenshot slider is useful for showing mobile app screens, SaaS dashboards, product interfaces, admin panels, software features, onboarding screens, and UI previews. Instead of placing many screenshots in a long column, this JavaScript slider lets users browse interface screens inside a focused product-style section.
This example uses a dark app landing page style with a large phone mockup, screen labels, feature text, arrows, and dot navigation. The phone screens are built with CSS, so the demo works without external images and can later be replaced with real screenshots from your own product.
- JavaScript slider for app screenshots and software UI previews
- CSS-generated phone mockup without external images
- Good for SaaS, mobile apps, dashboards, and product landing pages
- Manual arrows and dot indicators
- Responsive layout for desktop and mobile screens
JavaScript
(function () {
const slider = document.querySelector("[data-vb-app-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-app-slider-track]");
const dots = slider.querySelectorAll("[data-vb-app-slider-dot]");
const prev = slider.querySelector("[data-vb-app-slider-prev]");
const next = slider.querySelector("[data-vb-app-slider-next]");
const total = dots.length;
let index = 0;
function updateAppSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updateAppSlider(index - 1);
});
next.addEventListener("click", function () {
updateAppSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateAppSlider(Number(dot.getAttribute("data-vb-app-slider-dot")));
});
});
})();
HTML
<div class="vb-app-slider" data-vb-app-slider>
<div class="vb-app-slider-window">
<div class="vb-app-slider-track" data-vb-app-slider-track>
<section class="vb-app-slide">
<div class="vb-app-copy">
<span>App Screen 01</span>
<h3>Show your app interface in a focused screenshot slider</h3>
<p>Use this layout to present app screens, dashboard views, onboarding steps, product features, or software previews.</p>
<a href="#javascript-slider-examples">View slider examples</a>
</div>
<div class="vb-app-phone vb-app-phone-a">
<div class="vb-app-phone-top"></div>
<div class="vb-app-phone-screen">
<div class="vb-app-ui-pill"></div>
<div class="vb-app-ui-title"></div>
<div class="vb-app-ui-card big"></div>
<div class="vb-app-ui-grid">
<span></span>
<span></span>
</div>
</div>
</div>
</section>
<section class="vb-app-slide">
<div class="vb-app-copy">
<span>App Screen 02</span>
<h3>Guide users through product features with clear UI panels</h3>
<p>Each slide can explain one product benefit while the phone mockup shows a matching interface preview.</p>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
<div class="vb-app-phone vb-app-phone-b">
<div class="vb-app-phone-top"></div>
<div class="vb-app-phone-screen">
<div class="vb-app-ui-pill"></div>
<div class="vb-app-ui-title"></div>
<div class="vb-app-ui-card big"></div>
<div class="vb-app-ui-grid">
<span></span>
<span></span>
</div>
</div>
</div>
</section>
<section class="vb-app-slide">
<div class="vb-app-copy">
<span>App Screen 03</span>
<h3>Replace the CSS mockups with real screenshots later</h3>
<p>The structure is copy-paste friendly. You can keep the layout and add real app screenshots as image backgrounds.</p>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</div>
<div class="vb-app-phone vb-app-phone-c">
<div class="vb-app-phone-top"></div>
<div class="vb-app-phone-screen">
<div class="vb-app-ui-pill"></div>
<div class="vb-app-ui-title"></div>
<div class="vb-app-ui-card big"></div>
<div class="vb-app-ui-grid">
<span></span>
<span></span>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="vb-app-slider-controls">
<button type="button" data-vb-app-slider-prev aria-label="Previous app screen">‹</button>
<div class="vb-app-slider-dots">
<button type="button" class="is-active" data-vb-app-slider-dot="0" aria-label="Go to app screen 1"></button>
<button type="button" data-vb-app-slider-dot="1" aria-label="Go to app screen 2"></button>
<button type="button" data-vb-app-slider-dot="2" aria-label="Go to app screen 3"></button>
</div>
<button type="button" data-vb-app-slider-next aria-label="Next app screen">›</button>
</div>
</div>
CSS
.vb-app-slider,
.vb-app-slider * {
box-sizing: border-box;
}
.vb-app-slider {
margin: 28px 0;
padding: 28px;
border-radius: 38px;
background:
radial-gradient(circle at 18% 14%, rgba(14, 165, 233, 0.22), transparent 30%),
radial-gradient(circle at 86% 18%, rgba(168, 85, 247, 0.20), transparent 32%),
linear-gradient(135deg, #020617 0%, #0f172a 52%, #111827 100%) !important;
border: 1px solid rgba(148, 163, 184, 0.16);
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.36);
overflow: hidden;
}
.vb-app-slider-window {
overflow: hidden;
border-radius: 30px;
}
.vb-app-slider-track {
display: flex;
transform: translateX(0);
transition: transform 0.52s ease;
}
.vb-app-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
gap: 42px;
align-items: center;
min-height: 640px;
padding: 48px;
}
.vb-app-copy span {
display: inline-flex;
margin-bottom: 16px;
padding: 9px 13px;
border-radius: 999px;
background: rgba(14, 165, 233, 0.14);
border: 1px solid rgba(125, 211, 252, 0.22);
color: #bae6fd !important;
-webkit-text-fill-color: #bae6fd !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-app-copy h3 {
max-width: 740px;
margin: 0 0 18px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(40px, 6vw, 78px) !important;
line-height: 0.98 !important;
font-weight: 950 !important;
letter-spacing: -0.085em;
}
.vb-app-copy p {
max-width: 620px;
margin: 0 0 28px !important;
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 17px;
line-height: 1.75;
font-weight: 650;
}
.vb-app-copy a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 14px 20px;
border-radius: 999px;
background: linear-gradient(135deg, #06b6d4, #2563eb);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
box-shadow: 0 18px 42px rgba(37, 99, 235, 0.26);
}
.vb-app-phone {
justify-self: center;
position: relative;
width: min(100%, 340px);
min-height: 560px;
padding: 18px;
border-radius: 46px;
background: #020617 !important;
border: 1px solid rgba(255,255,255,0.18);
box-shadow: 0 34px 90px rgba(0, 0, 0, 0.46);
}
.vb-app-phone::before {
content: "";
position: absolute;
left: 50%;
top: 12px;
width: 92px;
height: 24px;
border-radius: 999px;
background: #0f172a;
transform: translateX(-50%);
z-index: 4;
}
.vb-app-phone-screen {
position: relative;
min-height: 524px;
padding: 48px 22px 22px;
border-radius: 34px;
overflow: hidden;
}
.vb-app-phone-a .vb-app-phone-screen {
background: linear-gradient(135deg, #06b6d4, #2563eb 58%, #7c3aed) !important;
}
.vb-app-phone-b .vb-app-phone-screen {
background: linear-gradient(135deg, #10b981, #0f766e 58%, #022c22) !important;
}
.vb-app-phone-c .vb-app-phone-screen {
background: linear-gradient(135deg, #f97316, #db2777 58%, #581c87) !important;
}
.vb-app-ui-pill {
width: 90px;
height: 28px;
margin-bottom: 20px;
border-radius: 999px;
background: rgba(255,255,255,0.30);
}
.vb-app-ui-title {
width: 78%;
height: 42px;
margin-bottom: 24px;
border-radius: 14px;
background: rgba(255,255,255,0.34);
}
.vb-app-ui-card.big {
height: 190px;
margin-bottom: 18px;
border-radius: 28px;
background:
radial-gradient(circle at 24% 24%, rgba(255,255,255,0.42), transparent 26%),
linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08));
border: 1px solid rgba(255,255,255,0.28);
}
.vb-app-ui-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.vb-app-ui-grid span {
min-height: 118px;
border-radius: 24px;
background: rgba(255,255,255,0.22);
border: 1px solid rgba(255,255,255,0.20);
}
.vb-app-slider-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 20px;
}
.vb-app-slider-controls > button {
width: 52px;
height: 52px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
background: rgba(255,255,255,0.10);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 28px;
font-weight: 950;
cursor: pointer;
}
.vb-app-slider-dots {
display: flex;
gap: 9px;
}
.vb-app-slider-dots button {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,0.30);
cursor: pointer;
}
.vb-app-slider-dots button.is-active {
width: 38px;
background: #38bdf8;
}
@media (max-width: 900px) {
.vb-app-slide {
grid-template-columns: 1fr;
min-height: 980px;
padding: 34px;
}
.vb-app-phone {
justify-self: start;
}
}
@media (max-width: 640px) {
.vb-app-slider {
padding: 18px;
border-radius: 28px;
}
.vb-app-slide {
min-height: 940px;
padding: 24px;
}
.vb-app-copy h3 {
font-size: 38px !important;
}
.vb-app-phone {
min-height: 500px;
}
.vb-app-phone-screen {
min-height: 464px;
}
}
This app screenshot JavaScript slider is a practical section for mobile apps, SaaS products, dashboards, onboarding flows, admin panels, and product landing pages. Replace the CSS mockups with real screenshots when you want to use it in a live project.
18. Timeline Slider
A timeline slider helps visitors move through milestones, project phases, company history, product releases, event schedules, case study steps, or roadmap items. It is useful when information has a clear sequence but you do not want to show a long vertical timeline on the page.
This example uses a timeline-style interface with year markers, milestone cards, a progress line, arrow controls, and active state navigation. The design is different from the app screenshot slider because it uses a horizontal roadmap layout, warm accent colors, structured dates, and a clean business timeline style.
- JavaScript timeline slider for milestones and roadmap sections
- Active timeline marker navigation
- Good for company history, project phases, events, and product roadmaps
- Responsive layout with visible first slide
- Full JavaScript, HTML, and CSS code included
JavaScript
(function () {
const slider = document.querySelector("[data-vb-timeline-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-timeline-track]");
const dots = slider.querySelectorAll("[data-vb-timeline-dot]");
const prev = slider.querySelector("[data-vb-timeline-prev]");
const next = slider.querySelector("[data-vb-timeline-next]");
const total = dots.length;
let index = 0;
function updateTimelineSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updateTimelineSlider(index - 1);
});
next.addEventListener("click", function () {
updateTimelineSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateTimelineSlider(Number(dot.getAttribute("data-vb-timeline-dot")));
});
});
})();
HTML
<div class="vb-timeline-slider" data-vb-timeline-slider>
<div class="vb-timeline-header">
<span>Timeline Slider</span>
<h3>Move through milestones in a horizontal roadmap slider</h3>
<p>Use this JavaScript timeline slider for project phases, company history, release notes, events, or product roadmaps.</p>
</div>
<div class="vb-timeline-nav">
<button type="button" class="is-active" data-vb-timeline-dot="0">
<strong>2023</strong>
<span>Start</span>
</button>
<button type="button" data-vb-timeline-dot="1">
<strong>2024</strong>
<span>Growth</span>
</button>
<button type="button" data-vb-timeline-dot="2">
<strong>2025</strong>
<span>Scale</span>
</button>
<button type="button" data-vb-timeline-dot="3">
<strong>2026</strong>
<span>Future</span>
</button>
</div>
<div class="vb-timeline-window">
<div class="vb-timeline-track" data-vb-timeline-track>
<section class="vb-timeline-slide">
<div class="vb-timeline-year">2023</div>
<div class="vb-timeline-card">
<span>Milestone 01</span>
<h4>Define the first version of the product story</h4>
<p>Timeline sliders are useful when you want to show progress, phases, or history without using a long static section.</p>
<a href="#javascript-slider-examples">View examples</a>
</div>
</section>
<section class="vb-timeline-slide">
<div class="vb-timeline-year">2024</div>
<div class="vb-timeline-card">
<span>Milestone 02</span>
<h4>Improve the structure with clearer content sections</h4>
<p>Use each slide to highlight one important step, launch, event, feature release, or project stage.</p>
<a href="#what-should-a-good-javascript-slider-include">Slider checklist</a>
</div>
</section>
<section class="vb-timeline-slide">
<div class="vb-timeline-year">2025</div>
<div class="vb-timeline-card">
<span>Milestone 03</span>
<h4>Scale the roadmap into a reusable website pattern</h4>
<p>A timeline slider can work for case studies, SaaS roadmaps, startup history, service processes, and event schedules.</p>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
</section>
<section class="vb-timeline-slide">
<div class="vb-timeline-year">2026</div>
<div class="vb-timeline-card">
<span>Milestone 04</span>
<h4>Build future releases into a clear interactive roadmap</h4>
<p>Use manual controls and visible timeline markers so visitors understand the sequence and can move at their own pace.</p>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</div>
</section>
</div>
</div>
<div class="vb-timeline-controls">
<button type="button" data-vb-timeline-prev aria-label="Previous timeline item">‹ Previous</button>
<button type="button" data-vb-timeline-next aria-label="Next timeline item">Next ›</button>
</div>
</div>
CSS
.vb-timeline-slider,
.vb-timeline-slider * {
box-sizing: border-box;
}
.vb-timeline-slider {
margin: 28px 0;
padding: 30px;
border-radius: 8px;
background:
linear-gradient(135deg, #fff7ed 0%, #ffffff 56%, #fef3c7 100%) !important;
border: 1px solid rgba(194, 65, 12, 0.16);
box-shadow: 0 24px 70px rgba(120, 53, 15, 0.10);
overflow: hidden;
}
.vb-timeline-header {
max-width: 820px;
margin-bottom: 28px;
}
.vb-timeline-header > span {
display: inline-flex;
margin-bottom: 12px;
padding: 8px 12px;
border-radius: 4px;
background: #c2410c;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-timeline-header h3 {
margin: 0 0 14px !important;
color: #431407 !important;
-webkit-text-fill-color: #431407 !important;
font-size: clamp(34px, 5vw, 64px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.07em;
}
.vb-timeline-header p {
margin: 0 !important;
color: #7c2d12 !important;
-webkit-text-fill-color: #7c2d12 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-timeline-nav {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 22px;
}
.vb-timeline-nav::before {
content: "";
position: absolute;
left: 10%;
right: 10%;
top: 22px;
height: 3px;
background: rgba(194, 65, 12, 0.18);
}
.vb-timeline-nav button {
position: relative;
z-index: 2;
min-height: 84px;
padding: 14px;
border: 1px solid rgba(194, 65, 12, 0.18);
border-radius: 6px;
background: #ffffff;
text-align: left;
cursor: pointer;
box-shadow: 0 14px 34px rgba(120, 53, 15, 0.07);
}
.vb-timeline-nav button::before {
content: "";
position: absolute;
left: 14px;
top: 16px;
width: 15px;
height: 15px;
border-radius: 999px;
background: #fed7aa;
border: 3px solid #ffffff;
box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.22);
}
.vb-timeline-nav button.is-active {
background: #431407;
border-color: #431407;
}
.vb-timeline-nav button.is-active::before {
background: #fb923c;
box-shadow: 0 0 0 2px #fb923c;
}
.vb-timeline-nav strong {
display: block;
margin: 28px 0 4px;
color: #431407 !important;
-webkit-text-fill-color: #431407 !important;
font-size: 20px;
line-height: 1;
font-weight: 950;
}
.vb-timeline-nav span {
color: #9a3412 !important;
-webkit-text-fill-color: #9a3412 !important;
font-size: 13px;
font-weight: 850;
}
.vb-timeline-nav button.is-active strong,
.vb-timeline-nav button.is-active span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-timeline-window {
overflow: hidden;
border-radius: 8px;
background: #431407 !important;
}
.vb-timeline-track {
display: flex;
transform: translateX(0);
transition: transform 0.5s ease;
}
.vb-timeline-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 28px;
align-items: center;
min-height: 460px;
padding: 42px;
background:
radial-gradient(circle at 18% 18%, rgba(251, 146, 60, 0.24), transparent 28%),
linear-gradient(135deg, #431407 0%, #7c2d12 100%) !important;
}
.vb-timeline-year {
color: rgba(255,255,255,0.20) !important;
-webkit-text-fill-color: rgba(255,255,255,0.20) !important;
font-size: clamp(78px, 11vw, 150px);
line-height: 0.8;
font-weight: 950;
letter-spacing: -0.1em;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.vb-timeline-card {
max-width: 760px;
padding: 34px;
border-radius: 8px;
background: #fff7ed !important;
border: 1px solid rgba(255,255,255,0.18);
box-shadow: 0 24px 70px rgba(0,0,0,0.20);
}
.vb-timeline-card span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 11px;
border-radius: 999px;
background: #fed7aa;
color: #9a3412 !important;
-webkit-text-fill-color: #9a3412 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-timeline-card h4 {
margin: 0 0 16px !important;
color: #431407 !important;
-webkit-text-fill-color: #431407 !important;
font-size: clamp(32px, 5vw, 58px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.065em;
}
.vb-timeline-card p {
margin: 0 0 26px !important;
color: #7c2d12 !important;
-webkit-text-fill-color: #7c2d12 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-timeline-card a {
display: inline-flex;
min-height: 46px;
align-items: center;
justify-content: center;
padding: 13px 17px;
border-radius: 4px;
background: #c2410c;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-timeline-controls {
display: flex;
justify-content: space-between;
gap: 14px;
margin-top: 18px;
}
.vb-timeline-controls button {
min-height: 48px;
padding: 12px 18px;
border: 0;
border-radius: 4px;
background: #431407;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
cursor: pointer;
}
@media (max-width: 760px) {
.vb-timeline-slider {
padding: 20px;
}
.vb-timeline-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vb-timeline-slide {
grid-template-columns: 1fr;
min-height: 660px;
padding: 24px;
}
.vb-timeline-year {
writing-mode: horizontal-tb;
transform: none;
font-size: 74px;
}
.vb-timeline-card {
padding: 24px;
}
.vb-timeline-controls {
flex-direction: column;
}
}
This timeline JavaScript slider is useful for roadmaps, project phases, company history, release notes, event schedules, case study steps, and process sections. It makes sequential information easier to browse while keeping the page layout compact.
19. News Ticker Slider
A news ticker slider is useful for short updates, announcements, breaking news, product alerts, event notices, stock-style updates, content headlines, and website notification bars. Unlike large image sliders, this JavaScript slider focuses on compact text movement and quick readable messages.
This example uses a dark newsroom-style strip with one visible message, previous and next controls, category labels, and a live counter. The JavaScript changes one ticker item at a time, so the layout stays stable and reliable inside Gutenberg.
- Compact JavaScript news ticker slider
- One visible update at a time
- Previous and next controls
- Good for announcements, alerts, news headlines, and update bars
- Works without external libraries or images
Live Updates
New JavaScript slider examples can help you build better image sliders, content carousels, and responsive UI sections.
Use small vanilla JavaScript functions when you do not need a heavy slider library for a simple website component.
Always keep slider controls visible so visitors can move through content manually instead of relying only on autoplay.
Lightweight sliders with CSS transitions are easier to maintain and often load faster than plugin-heavy carousel systems.
01
/ 04
JavaScript
(function () {
const ticker = document.querySelector("[data-vb-news-ticker]");
if (!ticker) return;
const track = ticker.querySelector("[data-vb-news-ticker-track]");
const items = ticker.querySelectorAll(".vb-news-ticker-item");
const prev = ticker.querySelector("[data-vb-news-ticker-prev]");
const next = ticker.querySelector("[data-vb-news-ticker-next]");
const current = ticker.querySelector("[data-vb-news-ticker-current]");
let index = 0;
function updateNewsTicker(newIndex) {
if (newIndex < 0) {
index = items.length - 1;
} else if (newIndex >= items.length) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
if (current) {
current.textContent = String(index + 1).padStart(2, "0");
}
}
prev.addEventListener("click", function () {
updateNewsTicker(index - 1);
});
next.addEventListener("click", function () {
updateNewsTicker(index + 1);
});
})();
HTML
<div class="vb-news-ticker" data-vb-news-ticker>
<div class="vb-news-ticker-label">
<span>Live Updates</span>
</div>
<div class="vb-news-ticker-window">
<div class="vb-news-ticker-track" data-vb-news-ticker-track>
<article class="vb-news-ticker-item">
<strong>Design</strong>
<p>New JavaScript slider examples can help you build better image sliders, content carousels, and responsive UI sections.</p>
</article>
<article class="vb-news-ticker-item">
<strong>Development</strong>
<p>Use small vanilla JavaScript functions when you do not need a heavy slider library for a simple website component.</p>
</article>
<article class="vb-news-ticker-item">
<strong>UX</strong>
<p>Always keep slider controls visible so visitors can move through content manually instead of relying only on autoplay.</p>
</article>
<article class="vb-news-ticker-item">
<strong>Performance</strong>
<p>Lightweight sliders with CSS transitions are easier to maintain and often load faster than plugin-heavy carousel systems.</p>
</article>
</div>
</div>
<div class="vb-news-ticker-counter">
<span data-vb-news-ticker-current>01</span>
<small>/ 04</small>
</div>
<div class="vb-news-ticker-controls">
<button type="button" data-vb-news-ticker-prev aria-label="Previous news item">‹</button>
<button type="button" data-vb-news-ticker-next aria-label="Next news item">›</button>
</div>
</div>
CSS
.vb-news-ticker,
.vb-news-ticker * {
box-sizing: border-box;
}
.vb-news-ticker {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
gap: 14px;
align-items: center;
margin: 28px 0;
padding: 16px;
border-radius: 0;
background: #020617 !important;
border: 2px solid #111827;
box-shadow: 0 20px 60px rgba(2, 6, 23, 0.28);
overflow: hidden;
}
.vb-news-ticker-label span {
display: inline-flex;
align-items: center;
min-height: 46px;
padding: 12px 16px;
border-radius: 0;
background: #ef4444;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 13px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-news-ticker-window {
overflow: hidden;
min-width: 0;
border-left: 1px solid rgba(255,255,255,0.12);
border-right: 1px solid rgba(255,255,255,0.12);
}
.vb-news-ticker-track {
display: flex;
transform: translateX(0);
transition: transform 0.42s ease;
}
.vb-news-ticker-item {
flex: 0 0 100%;
display: grid;
grid-template-columns: 130px minmax(0, 1fr);
gap: 14px;
align-items: center;
min-height: 58px;
padding: 8px 18px;
}
.vb-news-ticker-item strong {
color: #fca5a5 !important;
-webkit-text-fill-color: #fca5a5 !important;
font-size: 13px;
font-weight: 950;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.vb-news-ticker-item p {
margin: 0 !important;
color: #e5e7eb !important;
-webkit-text-fill-color: #e5e7eb !important;
font-size: 15px;
line-height: 1.55;
font-weight: 650;
}
.vb-news-ticker-counter {
display: flex;
align-items: baseline;
gap: 3px;
padding: 0 6px;
}
.vb-news-ticker-counter span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 22px;
line-height: 1;
font-weight: 950;
}
.vb-news-ticker-counter small {
color: #94a3b8 !important;
-webkit-text-fill-color: #94a3b8 !important;
font-size: 12px;
font-weight: 850;
}
.vb-news-ticker-controls {
display: flex;
gap: 8px;
}
.vb-news-ticker-controls button {
width: 42px;
height: 42px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 0;
background: rgba(255,255,255,0.08);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 22px;
font-weight: 950;
cursor: pointer;
}
@media (max-width: 760px) {
.vb-news-ticker {
grid-template-columns: 1fr;
}
.vb-news-ticker-window {
border-left: 0;
border-right: 0;
border-top: 1px solid rgba(255,255,255,0.12);
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.vb-news-ticker-item {
grid-template-columns: 1fr;
gap: 6px;
min-height: 130px;
padding: 18px 0;
}
.vb-news-ticker-controls {
justify-content: space-between;
}
}
This news ticker JavaScript slider is a compact pattern for website updates, alert bars, article headlines, announcements, product notices, event reminders, and status messages. It keeps important content visible without taking up the space of a full carousel section.
20. Featured Article Slider
A featured article slider is useful for blogs, magazines, content websites, documentation hubs, resource libraries, and editorial homepages. It lets you highlight important articles, guides, tutorials, case studies, or news posts inside a large visual section while keeping the page clean and organized.
This example uses a premium editorial layout with a large featured article panel, category tag, author row, reading time, slide counter, arrows, and dot navigation. The design is different from the news ticker because it uses bigger editorial spacing, magazine-style typography, soft gradients, and featured-content storytelling.
- JavaScript featured article slider
- Large editorial card with category, title, summary, and meta row
- Previous and next controls
- Dot navigation and slide counter
- Good for blogs, magazines, documentation hubs, and resource websites
JavaScript
(function () {
const slider = document.querySelector("[data-vb-featured-article-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-featured-article-track]");
const dots = slider.querySelectorAll("[data-vb-featured-article-dot]");
const prev = slider.querySelector("[data-vb-featured-article-prev]");
const next = slider.querySelector("[data-vb-featured-article-next]");
const current = slider.querySelector("[data-vb-featured-article-current]");
const total = dots.length;
let index = 0;
function updateFeaturedArticle(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
if (current) {
current.textContent = String(index + 1).padStart(2, "0");
}
}
prev.addEventListener("click", function () {
updateFeaturedArticle(index - 1);
});
next.addEventListener("click", function () {
updateFeaturedArticle(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateFeaturedArticle(Number(dot.getAttribute("data-vb-featured-article-dot")));
});
});
})();
HTML
<div class="vb-featured-article-slider" data-vb-featured-article-slider>
<div class="vb-featured-article-window">
<div class="vb-featured-article-track" data-vb-featured-article-track>
<article class="vb-featured-article-slide vb-featured-article-a">
<div class="vb-featured-article-copy">
<span>JavaScript Guide</span>
<h3>How to build better sliders without heavy libraries</h3>
<p>Learn how small JavaScript functions, CSS transitions, and simple layout rules can create practical sliders for modern websites.</p>
<div class="vb-featured-article-meta">
<strong>UI Development</strong>
<small>8 min read</small>
</div>
<a href="#javascript-slider-examples">Read examples</a>
</div>
<div class="vb-featured-article-visual">
<div class="vb-featured-article-card">
<span></span>
<span></span>
<span></span>
</div>
</div>
</article>
<article class="vb-featured-article-slide vb-featured-article-b">
<div class="vb-featured-article-copy">
<span>UX Pattern</span>
<h3>When sliders help and when they make websites harder to use</h3>
<p>A good carousel has clear controls, readable content, responsive behavior, and a reason to exist beyond decoration.</p>
<div class="vb-featured-article-meta">
<strong>Design Systems</strong>
<small>6 min read</small>
</div>
<a href="#common-javascript-slider-mistakes">Avoid mistakes</a>
</div>
<div class="vb-featured-article-visual">
<div class="vb-featured-article-card">
<span></span>
<span></span>
<span></span>
</div>
</div>
</article>
<article class="vb-featured-article-slide vb-featured-article-c">
<div class="vb-featured-article-copy">
<span>Responsive UI</span>
<h3>Design slider sections that still work on small screens</h3>
<p>Responsive sliders need clear spacing, flexible content, visible controls, and slide widths that adapt to mobile layouts.</p>
<div class="vb-featured-article-meta">
<strong>Frontend Tips</strong>
<small>7 min read</small>
</div>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</div>
<div class="vb-featured-article-visual">
<div class="vb-featured-article-card">
<span></span>
<span></span>
<span></span>
</div>
</div>
</article>
</div>
</div>
<div class="vb-featured-article-footer">
<div class="vb-featured-article-count">
<strong data-vb-featured-article-current>01</strong>
<span>/ 03</span>
</div>
<div class="vb-featured-article-dots">
<button type="button" class="is-active" data-vb-featured-article-dot="0" aria-label="Go to featured article 1"></button>
<button type="button" data-vb-featured-article-dot="1" aria-label="Go to featured article 2"></button>
<button type="button" data-vb-featured-article-dot="2" aria-label="Go to featured article 3"></button>
</div>
<div class="vb-featured-article-controls">
<button type="button" data-vb-featured-article-prev aria-label="Previous featured article">←</button>
<button type="button" data-vb-featured-article-next aria-label="Next featured article">→</button>
</div>
</div>
</div>
CSS
.vb-featured-article-slider,
.vb-featured-article-slider * {
box-sizing: border-box;
}
.vb-featured-article-slider {
margin: 28px 0;
padding: 28px;
border-radius: 34px;
background:
radial-gradient(circle at 16% 16%, rgba(14, 165, 233, 0.14), transparent 28%),
radial-gradient(circle at 84% 20%, rgba(249, 115, 22, 0.13), transparent 30%),
linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
overflow: hidden;
}
.vb-featured-article-window {
overflow: hidden;
border-radius: 28px;
}
.vb-featured-article-track {
display: flex;
transform: translateX(0);
transition: transform 0.52s ease;
}
.vb-featured-article-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
gap: 34px;
align-items: center;
min-height: 620px;
padding: 48px;
border-radius: 28px;
}
.vb-featured-article-a {
background:
linear-gradient(135deg, #eff6ff 0%, #ffffff 52%, #f8fafc 100%) !important;
}
.vb-featured-article-b {
background:
linear-gradient(135deg, #fff7ed 0%, #ffffff 52%, #fefce8 100%) !important;
}
.vb-featured-article-c {
background:
linear-gradient(135deg, #ecfdf5 0%, #ffffff 52%, #f0fdfa 100%) !important;
}
.vb-featured-article-copy > span {
display: inline-flex;
margin-bottom: 16px;
padding: 8px 12px;
border-radius: 999px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-featured-article-copy h3 {
max-width: 760px;
margin: 0 0 18px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(40px, 6vw, 78px) !important;
line-height: 0.98 !important;
font-weight: 900 !important;
letter-spacing: -0.07em;
}
.vb-featured-article-copy p {
max-width: 620px;
margin: 0 0 24px !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 17px;
line-height: 1.75;
font-weight: 650;
}
.vb-featured-article-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-bottom: 28px;
}
.vb-featured-article-meta strong {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 14px;
font-weight: 950;
}
.vb-featured-article-meta small {
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 13px;
font-weight: 800;
}
.vb-featured-article-copy a {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
padding: 14px 20px;
border-radius: 999px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-featured-article-visual {
position: relative;
min-height: 430px;
border-radius: 32px;
padding: 28px;
background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
overflow: hidden;
box-shadow: 0 30px 80px rgba(37, 99, 235, 0.20);
}
.vb-featured-article-b .vb-featured-article-visual {
background: linear-gradient(135deg, #f97316, #be123c) !important;
}
.vb-featured-article-c .vb-featured-article-visual {
background: linear-gradient(135deg, #10b981, #0f766e) !important;
}
.vb-featured-article-visual::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
right: -84px;
top: -84px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
}
.vb-featured-article-card {
position: relative;
z-index: 2;
height: 100%;
min-height: 374px;
padding: 26px;
border-radius: 26px;
background: rgba(255,255,255,0.84) !important;
border: 1px solid rgba(255,255,255,0.46);
box-shadow: 0 26px 70px rgba(15, 23, 42, 0.18);
}
.vb-featured-article-card::before {
content: "";
display: block;
height: 138px;
margin-bottom: 24px;
border-radius: 22px;
background:
radial-gradient(circle at 24% 26%, rgba(15, 23, 42, 0.18), transparent 26%),
linear-gradient(135deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.04));
}
.vb-featured-article-card span {
display: block;
height: 18px;
margin-bottom: 14px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.12);
}
.vb-featured-article-card span:nth-child(2) {
width: 78%;
}
.vb-featured-article-card span:nth-child(3) {
width: 56%;
}
.vb-featured-article-footer {
display: grid;
grid-template-columns: 120px minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
margin-top: 20px;
}
.vb-featured-article-count strong {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 28px;
line-height: 1;
font-weight: 950;
}
.vb-featured-article-count span {
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 14px;
font-weight: 850;
}
.vb-featured-article-dots {
display: flex;
justify-content: center;
gap: 9px;
}
.vb-featured-article-dots button {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
background: #cbd5e1;
cursor: pointer;
}
.vb-featured-article-dots button.is-active {
width: 38px;
background: #111827;
}
.vb-featured-article-controls {
display: flex;
gap: 10px;
}
.vb-featured-article-controls button {
width: 48px;
height: 48px;
border: 0;
border-radius: 999px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 18px;
font-weight: 950;
cursor: pointer;
}
@media (max-width: 900px) {
.vb-featured-article-slide {
grid-template-columns: 1fr;
min-height: 860px;
}
}
@media (max-width: 640px) {
.vb-featured-article-slider {
padding: 18px;
border-radius: 24px;
}
.vb-featured-article-slide {
padding: 24px;
min-height: 840px;
}
.vb-featured-article-copy h3 {
font-size: 38px !important;
}
.vb-featured-article-visual {
min-height: 330px;
}
.vb-featured-article-footer {
grid-template-columns: 1fr;
}
.vb-featured-article-dots {
justify-content: flex-start;
}
}
This featured article JavaScript slider is a strong layout for blogs, magazines, resource hubs, tutorial websites, documentation libraries, and content-heavy homepages. It lets you highlight important content while keeping the page visually organized and easy to browse.
21. Product Feature Slider
A product feature slider is useful when a landing page needs to explain several product benefits without creating a very long page. This JavaScript slider works well for SaaS products, apps, digital tools, ecommerce product pages, service pages, and startup websites where each slide should focus on one clear feature.
This example uses a modern product UI layout with a large feature card, side feature navigation, gradient visual blocks, and a progress indicator. The JavaScript changes the active feature, updates the slide position, highlights the correct navigation item, and keeps the interface simple enough to copy into Gutenberg.
- JavaScript product feature slider
- Side navigation for feature selection
- Large feature card with matching visual panel
- Progress bar and active state updates
- Good for SaaS, apps, product pages, and landing pages
JavaScript
(function () {
const slider = document.querySelector("[data-vb-feature-product-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-feature-product-track]");
const dots = slider.querySelectorAll("[data-vb-feature-product-dot]");
const prev = slider.querySelector("[data-vb-feature-product-prev]");
const next = slider.querySelector("[data-vb-feature-product-next]");
const progress = slider.querySelector("[data-vb-feature-product-progress]");
const total = dots.length;
let index = 0;
function updateFeatureProductSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
if (progress) {
progress.style.width = ((index + 1) / total) * 100 + "%";
}
}
prev.addEventListener("click", function () {
updateFeatureProductSlider(index - 1);
});
next.addEventListener("click", function () {
updateFeatureProductSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateFeatureProductSlider(Number(dot.getAttribute("data-vb-feature-product-dot")));
});
});
})();
HTML
<div class="vb-feature-product-slider" data-vb-feature-product-slider>
<div class="vb-feature-product-sidebar">
<span>Product Features</span>
<h3>Explore key benefits in a focused feature slider</h3>
<div class="vb-feature-product-nav">
<button type="button" class="is-active" data-vb-feature-product-dot="0">
<strong>01</strong>
<span>Automated Workflow</span>
</button>
<button type="button" data-vb-feature-product-dot="1">
<strong>02</strong>
<span>Smart Dashboard</span>
</button>
<button type="button" data-vb-feature-product-dot="2">
<strong>03</strong>
<span>Fast Reporting</span>
</button>
</div>
</div>
<div class="vb-feature-product-main">
<div class="vb-feature-product-window">
<div class="vb-feature-product-track" data-vb-feature-product-track>
<section class="vb-feature-product-slide">
<div class="vb-feature-product-copy">
<span>Feature 01</span>
<h4>Automate repetitive tasks with a smoother workflow</h4>
<p>Use this product feature slider to explain one benefit per slide. It keeps the content focused and helps visitors understand the product faster.</p>
<a href="#javascript-slider-examples">View examples</a>
</div>
<div class="vb-feature-product-visual vb-feature-product-visual-a">
<div class="vb-feature-product-ui">
<div class="vb-feature-product-ui-top"></div>
<div class="vb-feature-product-ui-row"></div>
<div class="vb-feature-product-ui-row short"></div>
<div class="vb-feature-product-ui-grid">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</section>
<section class="vb-feature-product-slide">
<div class="vb-feature-product-copy">
<span>Feature 02</span>
<h4>Show dashboard insights with clear visual structure</h4>
<p>Feature sliders work well when text and interface previews need to change together in one compact landing page section.</p>
<a href="#what-should-a-good-javascript-slider-include">Slider checklist</a>
</div>
<div class="vb-feature-product-visual vb-feature-product-visual-b">
<div class="vb-feature-product-ui">
<div class="vb-feature-product-ui-top"></div>
<div class="vb-feature-product-ui-row"></div>
<div class="vb-feature-product-ui-row short"></div>
<div class="vb-feature-product-ui-grid">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</section>
<section class="vb-feature-product-slide">
<div class="vb-feature-product-copy">
<span>Feature 03</span>
<h4>Turn complex reporting into a simple slider story</h4>
<p>Use this layout for SaaS features, app benefits, product highlights, service explanations, and conversion-focused website sections.</p>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
<div class="vb-feature-product-visual vb-feature-product-visual-c">
<div class="vb-feature-product-ui">
<div class="vb-feature-product-ui-top"></div>
<div class="vb-feature-product-ui-row"></div>
<div class="vb-feature-product-ui-row short"></div>
<div class="vb-feature-product-ui-grid">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="vb-feature-product-bottom">
<button type="button" data-vb-feature-product-prev aria-label="Previous feature">‹</button>
<div class="vb-feature-product-progress">
<span data-vb-feature-product-progress></span>
</div>
<button type="button" data-vb-feature-product-next aria-label="Next feature">›</button>
</div>
</div>
</div>
CSS
.vb-feature-product-slider,
.vb-feature-product-slider * {
box-sizing: border-box;
}
.vb-feature-product-slider {
display: grid;
grid-template-columns: 340px minmax(0, 1fr);
gap: 24px;
margin: 28px 0;
padding: 30px;
border-radius: 34px;
background:
radial-gradient(circle at 16% 14%, rgba(59, 130, 246, 0.16), transparent 30%),
linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
overflow: hidden;
}
.vb-feature-product-sidebar {
padding: 28px;
border-radius: 26px;
background: #0f172a !important;
color: #ffffff;
}
.vb-feature-product-sidebar > span {
display: inline-flex;
margin-bottom: 16px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
color: #bfdbfe !important;
-webkit-text-fill-color: #bfdbfe !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-feature-product-sidebar h3 {
margin: 0 0 24px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(30px, 4vw, 46px) !important;
line-height: 1.03 !important;
font-weight: 950 !important;
letter-spacing: -0.065em;
}
.vb-feature-product-nav {
display: grid;
gap: 12px;
}
.vb-feature-product-nav button {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
align-items: center;
min-height: 72px;
padding: 14px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px;
background: rgba(255,255,255,0.06);
text-align: left;
cursor: pointer;
}
.vb-feature-product-nav button.is-active {
background: #ffffff;
}
.vb-feature-product-nav strong {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 14px;
background: rgba(59, 130, 246, 0.18);
color: #bfdbfe !important;
-webkit-text-fill-color: #bfdbfe !important;
font-size: 13px;
font-weight: 950;
}
.vb-feature-product-nav span {
color: #e5e7eb !important;
-webkit-text-fill-color: #e5e7eb !important;
font-size: 14px;
line-height: 1.35;
font-weight: 850;
}
.vb-feature-product-nav button.is-active strong {
background: #2563eb;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-feature-product-nav button.is-active span {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
}
.vb-feature-product-main {
min-width: 0;
}
.vb-feature-product-window {
overflow: hidden;
border-radius: 26px;
background: #eef2ff !important;
}
.vb-feature-product-track {
display: flex;
transform: translateX(0);
transition: transform 0.5s ease;
}
.vb-feature-product-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(260px, 0.78fr);
gap: 30px;
align-items: center;
min-height: 590px;
padding: 42px;
}
.vb-feature-product-copy > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: #dbeafe;
color: #1d4ed8 !important;
-webkit-text-fill-color: #1d4ed8 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-feature-product-copy h4 {
max-width: 660px;
margin: 0 0 16px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(34px, 5vw, 64px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.07em;
}
.vb-feature-product-copy p {
max-width: 580px;
margin: 0 0 26px !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-feature-product-copy a {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 13px 18px;
border-radius: 14px;
background: #2563eb;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-feature-product-visual {
min-height: 410px;
padding: 28px;
border-radius: 32px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(15, 23, 42, 0.16);
}
.vb-feature-product-visual-a {
background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
}
.vb-feature-product-visual-b {
background: linear-gradient(135deg, #7c3aed, #db2777) !important;
}
.vb-feature-product-visual-c {
background: linear-gradient(135deg, #10b981, #0f766e) !important;
}
.vb-feature-product-ui {
height: 100%;
min-height: 354px;
padding: 24px;
border-radius: 26px;
background: rgba(255,255,255,0.86) !important;
border: 1px solid rgba(255,255,255,0.44);
}
.vb-feature-product-ui-top {
height: 68px;
margin-bottom: 20px;
border-radius: 18px;
background: rgba(15, 23, 42, 0.12);
}
.vb-feature-product-ui-row {
height: 18px;
margin-bottom: 12px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.14);
}
.vb-feature-product-ui-row.short {
width: 62%;
margin-bottom: 24px;
}
.vb-feature-product-ui-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.vb-feature-product-ui-grid span {
min-height: 128px;
border-radius: 18px;
background: rgba(37, 99, 235, 0.16);
}
.vb-feature-product-ui-grid span:nth-child(2) {
background: rgba(16, 185, 129, 0.16);
}
.vb-feature-product-ui-grid span:nth-child(3) {
background: rgba(249, 115, 22, 0.16);
}
.vb-feature-product-bottom {
display: grid;
grid-template-columns: 50px minmax(0, 1fr) 50px;
gap: 14px;
align-items: center;
margin-top: 18px;
}
.vb-feature-product-bottom button {
width: 50px;
height: 50px;
border: 0;
border-radius: 999px;
background: #0f172a;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 26px;
font-weight: 950;
cursor: pointer;
}
.vb-feature-product-progress {
height: 8px;
border-radius: 999px;
background: #e2e8f0;
overflow: hidden;
}
.vb-feature-product-progress span {
display: block;
width: 33.333%;
height: 100%;
border-radius: 999px;
background: #2563eb;
transition: width 0.3s ease;
}
@media (max-width: 980px) {
.vb-feature-product-slider {
grid-template-columns: 1fr;
}
.vb-feature-product-slide {
grid-template-columns: 1fr;
min-height: 850px;
}
}
@media (max-width: 640px) {
.vb-feature-product-slider {
padding: 20px;
border-radius: 24px;
}
.vb-feature-product-sidebar {
padding: 22px;
}
.vb-feature-product-slide {
padding: 24px;
min-height: 820px;
}
.vb-feature-product-copy h4 {
font-size: 36px !important;
}
.vb-feature-product-visual {
min-height: 320px;
}
.vb-feature-product-ui-grid {
grid-template-columns: 1fr;
}
.vb-feature-product-ui-grid span {
min-height: 54px;
}
}
This product feature JavaScript slider is a practical section for SaaS landing pages, product pages, app websites, service pages, and startup homepages. It helps explain multiple benefits clearly without making the page feel too long.
22. Event Schedule Slider
An event schedule slider is useful for conferences, workshops, webinars, festivals, online summits, course schedules, product launches, and multi-session events. It helps visitors browse agenda items one by one instead of scrolling through a long schedule table.
This example uses an event agenda layout with session times, speaker cards, topic labels, and day navigation. The JavaScript moves between event sessions, updates the active schedule tab, and keeps the layout responsive for smaller screens.
- JavaScript event schedule slider
- Session cards with time, title, speaker, and topic label
- Clickable agenda navigation
- Previous and next controls
- Good for conferences, webinars, workshops, launches, and online events
JavaScript
(function () {
const slider = document.querySelector("[data-vb-event-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-event-track]");
const dots = slider.querySelectorAll("[data-vb-event-dot]");
const prev = slider.querySelector("[data-vb-event-prev]");
const next = slider.querySelector("[data-vb-event-next]");
const total = dots.length;
let index = 0;
function updateEventSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updateEventSlider(index - 1);
});
next.addEventListener("click", function () {
updateEventSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateEventSlider(Number(dot.getAttribute("data-vb-event-dot")));
});
});
})();
HTML
<div class="vb-event-slider" data-vb-event-slider>
<div class="vb-event-slider-header">
<span>Event Schedule</span>
<h3>Browse event sessions in a clean agenda slider</h3>
<p>Use this JavaScript schedule slider to present conference sessions, webinar agendas, workshops, or product launch timelines.</p>
</div>
<div class="vb-event-slider-tabs">
<button type="button" class="is-active" data-vb-event-dot="0">
<strong>09:00</strong>
<span>Opening</span>
</button>
<button type="button" data-vb-event-dot="1">
<strong>11:00</strong>
<span>Workshop</span>
</button>
<button type="button" data-vb-event-dot="2">
<strong>14:00</strong>
<span>Panel</span>
</button>
<button type="button" data-vb-event-dot="3">
<strong>16:00</strong>
<span>Closing</span>
</button>
</div>
<div class="vb-event-slider-window">
<div class="vb-event-slider-track" data-vb-event-track>
<section class="vb-event-slide">
<div class="vb-event-time">
<strong>09:00</strong>
<span>Main Stage</span>
</div>
<div class="vb-event-session">
<span>Opening Session</span>
<h4>Modern website UI patterns for faster product storytelling</h4>
<p>Start the event with a practical overview of interactive sections, JavaScript sliders, content carousels, and responsive UI patterns.</p>
<div class="vb-event-speaker">
<div class="vb-event-avatar">JS</div>
<div>
<strong>Jordan Smith</strong>
<small>Frontend Lead</small>
</div>
</div>
</div>
</section>
<section class="vb-event-slide">
<div class="vb-event-time">
<strong>11:00</strong>
<span>Workshop Room</span>
</div>
<div class="vb-event-session">
<span>Hands-On Workshop</span>
<h4>Build lightweight sliders without using heavy libraries</h4>
<p>This workshop explains how small JavaScript functions and CSS transitions can create reliable sliders for real websites.</p>
<div class="vb-event-speaker">
<div class="vb-event-avatar">MR</div>
<div>
<strong>Maya Roberts</strong>
<small>UI Engineer</small>
</div>
</div>
</div>
</section>
<section class="vb-event-slide">
<div class="vb-event-time">
<strong>14:00</strong>
<span>Panel Stage</span>
</div>
<div class="vb-event-session">
<span>Expert Panel</span>
<h4>When sliders improve UX and when they should be avoided</h4>
<p>A discussion about carousel usability, autoplay problems, mobile behavior, accessibility, and conversion-focused design.</p>
<div class="vb-event-speaker">
<div class="vb-event-avatar">AK</div>
<div>
<strong>Alex Kim</strong>
<small>UX Strategist</small>
</div>
</div>
</div>
</section>
<section class="vb-event-slide">
<div class="vb-event-time">
<strong>16:00</strong>
<span>Final Session</span>
</div>
<div class="vb-event-session">
<span>Closing Session</span>
<h4>Turn slider examples into reusable website sections</h4>
<p>Close the day with practical ideas for adapting sliders into hero sections, galleries, product showcases, and content blocks.</p>
<div class="vb-event-speaker">
<div class="vb-event-avatar">EL</div>
<div>
<strong>Emma Lane</strong>
<small>Design Systems Lead</small>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="vb-event-slider-controls">
<button type="button" data-vb-event-prev aria-label="Previous event session">‹ Previous</button>
<button type="button" data-vb-event-next aria-label="Next event session">Next ›</button>
</div>
</div>
CSS
.vb-event-slider,
.vb-event-slider * {
box-sizing: border-box;
}
.vb-event-slider {
margin: 28px 0;
padding: 30px;
border-radius: 16px;
background:
radial-gradient(circle at 14% 16%, rgba(245, 158, 11, 0.18), transparent 28%),
linear-gradient(135deg, #111827 0%, #020617 100%) !important;
border: 1px solid rgba(245, 158, 11, 0.20);
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.34);
overflow: hidden;
}
.vb-event-slider-header {
max-width: 820px;
margin-bottom: 26px;
}
.vb-event-slider-header > span {
display: inline-flex;
margin-bottom: 13px;
padding: 8px 12px;
border-radius: 4px;
background: #f59e0b;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-event-slider-header h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(34px, 5vw, 64px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.07em;
}
.vb-event-slider-header p {
margin: 0 !important;
color: #d1d5db !important;
-webkit-text-fill-color: #d1d5db !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-event-slider-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.vb-event-slider-tabs button {
min-height: 84px;
padding: 16px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
background: rgba(255,255,255,0.07);
text-align: left;
cursor: pointer;
}
.vb-event-slider-tabs button.is-active {
background: #f59e0b;
}
.vb-event-slider-tabs strong {
display: block;
margin-bottom: 6px;
color: #fbbf24 !important;
-webkit-text-fill-color: #fbbf24 !important;
font-size: 22px;
line-height: 1;
font-weight: 950;
}
.vb-event-slider-tabs span {
color: #e5e7eb !important;
-webkit-text-fill-color: #e5e7eb !important;
font-size: 13px;
font-weight: 850;
}
.vb-event-slider-tabs button.is-active strong,
.vb-event-slider-tabs button.is-active span {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
}
.vb-event-slider-window {
overflow: hidden;
border-radius: 16px;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.10);
}
.vb-event-slider-track {
display: flex;
transform: translateX(0);
transition: transform 0.5s ease;
}
.vb-event-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
gap: 24px;
align-items: stretch;
min-height: 430px;
padding: 30px;
}
.vb-event-time {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 26px;
border-radius: 14px;
background: #f59e0b !important;
}
.vb-event-time strong {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(42px, 6vw, 72px);
line-height: 0.9;
font-weight: 950;
letter-spacing: -0.08em;
}
.vb-event-time span {
color: #451a03 !important;
-webkit-text-fill-color: #451a03 !important;
font-size: 14px;
font-weight: 900;
}
.vb-event-session {
padding: 34px;
border-radius: 14px;
background: #ffffff !important;
}
.vb-event-session > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 11px;
border-radius: 999px;
background: #fef3c7;
color: #92400e !important;
-webkit-text-fill-color: #92400e !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-event-session h4 {
max-width: 760px;
margin: 0 0 16px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(32px, 5vw, 58px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.065em;
}
.vb-event-session p {
max-width: 680px;
margin: 0 0 28px !important;
color: #4b5563 !important;
-webkit-text-fill-color: #4b5563 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-event-speaker {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid #e5e7eb;
}
.vb-event-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 18px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 16px;
font-weight: 950;
}
.vb-event-speaker strong {
display: block;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 16px;
font-weight: 950;
}
.vb-event-speaker small {
display: block;
color: #6b7280 !important;
-webkit-text-fill-color: #6b7280 !important;
font-size: 13px;
font-weight: 750;
}
.vb-event-slider-controls {
display: flex;
justify-content: space-between;
gap: 14px;
margin-top: 18px;
}
.vb-event-slider-controls button {
min-height: 48px;
padding: 12px 18px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
background: rgba(255,255,255,0.08);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
cursor: pointer;
}
@media (max-width: 820px) {
.vb-event-slider-tabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vb-event-slide {
grid-template-columns: 1fr;
min-height: 620px;
}
.vb-event-time {
min-height: 180px;
}
}
@media (max-width: 560px) {
.vb-event-slider {
padding: 20px;
}
.vb-event-slider-tabs {
grid-template-columns: 1fr;
}
.vb-event-slide {
padding: 18px;
min-height: 720px;
}
.vb-event-session {
padding: 24px;
}
.vb-event-session h4 {
font-size: 34px !important;
}
.vb-event-slider-controls {
flex-direction: column;
}
}
This event schedule JavaScript slider is useful for conferences, workshops, webinars, online summits, product launch events, course schedules, and multi-session landing pages. It keeps agenda content easier to browse than a long static schedule table.
23. Restaurant Menu Slider
A restaurant menu slider is useful for showing featured dishes, seasonal menus, chef specials, drink selections, dessert cards, takeaway offers, or restaurant promotions in a compact interactive section. Instead of listing every item in a long grid, this JavaScript slider lets visitors browse one highlighted menu item at a time.
This example uses a warm restaurant-style layout with dish cards, price labels, category tags, ingredient highlights, and CSS-generated food visuals. The JavaScript moves the slide track, updates the active dot, and keeps the menu slider fully functional without external images or libraries.
- JavaScript restaurant menu slider
- Featured dish card with name, category, price, and ingredients
- CSS-generated food visuals without external images
- Previous, next, and dot navigation
- Good for restaurants, cafes, bars, bakeries, and food delivery websites
JavaScript
(function () {
const slider = document.querySelector("[data-vb-menu-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-menu-slider-track]");
const dots = slider.querySelectorAll("[data-vb-menu-slider-dot]");
const prev = slider.querySelector("[data-vb-menu-slider-prev]");
const next = slider.querySelector("[data-vb-menu-slider-next]");
const total = dots.length;
let index = 0;
function updateMenuSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updateMenuSlider(index - 1);
});
next.addEventListener("click", function () {
updateMenuSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateMenuSlider(Number(dot.getAttribute("data-vb-menu-slider-dot")));
});
});
})();
HTML
<div class="vb-menu-slider" data-vb-menu-slider>
<div class="vb-menu-slider-header">
<span>Chef Specials</span>
<h3>Show featured dishes in a tasteful restaurant menu slider</h3>
<p>Use this JavaScript menu slider to highlight seasonal dishes, chef specials, drink menus, desserts, or food delivery offers.</p>
</div>
<div class="vb-menu-slider-window">
<div class="vb-menu-slider-track" data-vb-menu-slider-track>
<section class="vb-menu-slide">
<div class="vb-menu-food vb-menu-food-a">
<div class="vb-menu-plate">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="vb-menu-copy">
<span>Signature Dish</span>
<h4>Herb roasted garden plate with citrus dressing</h4>
<p>A warm featured menu card with layered flavors, fresh ingredients, and a visual layout that works well for restaurant websites.</p>
<div class="vb-menu-details">
<div>
<strong>$24</strong>
<small>Menu price</small>
</div>
<div>
<strong>25 min</strong>
<small>Prep time</small>
</div>
</div>
<a href="#javascript-slider-examples">View examples</a>
</div>
</section>
<section class="vb-menu-slide">
<div class="vb-menu-food vb-menu-food-b">
<div class="vb-menu-plate">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="vb-menu-copy">
<span>Fresh Special</span>
<h4>Charred vegetable bowl with creamy basil sauce</h4>
<p>Restaurant sliders can present dishes one at a time with stronger detail than a small static menu grid.</p>
<div class="vb-menu-details">
<div>
<strong>$18</strong>
<small>Menu price</small>
</div>
<div>
<strong>18 min</strong>
<small>Prep time</small>
</div>
</div>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
</section>
<section class="vb-menu-slide">
<div class="vb-menu-food vb-menu-food-c">
<div class="vb-menu-plate">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="vb-menu-copy">
<span>Dessert Feature</span>
<h4>Dark chocolate tart with berry cream finish</h4>
<p>Use this type of slider for desserts, drinks, lunch offers, tasting menus, or homepage food highlights.</p>
<div class="vb-menu-details">
<div>
<strong>$12</strong>
<small>Menu price</small>
</div>
<div>
<strong>10 min</strong>
<small>Prep time</small>
</div>
</div>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</div>
</section>
</div>
</div>
<div class="vb-menu-slider-controls">
<button type="button" data-vb-menu-slider-prev aria-label="Previous menu item">‹</button>
<div class="vb-menu-slider-dots">
<button type="button" class="is-active" data-vb-menu-slider-dot="0" aria-label="Go to menu item 1"></button>
<button type="button" data-vb-menu-slider-dot="1" aria-label="Go to menu item 2"></button>
<button type="button" data-vb-menu-slider-dot="2" aria-label="Go to menu item 3"></button>
</div>
<button type="button" data-vb-menu-slider-next aria-label="Next menu item">›</button>
</div>
</div>
CSS
.vb-menu-slider,
.vb-menu-slider * {
box-sizing: border-box;
}
.vb-menu-slider {
margin: 28px 0;
padding: 30px;
border-radius: 44px 8px 44px 8px;
background:
radial-gradient(circle at 14% 16%, rgba(251, 146, 60, 0.20), transparent 30%),
radial-gradient(circle at 86% 20%, rgba(132, 204, 22, 0.16), transparent 32%),
linear-gradient(135deg, #fff7ed 0%, #ffffff 100%) !important;
border: 1px solid rgba(194, 65, 12, 0.18);
box-shadow: 0 24px 70px rgba(120, 53, 15, 0.12);
overflow: hidden;
}
.vb-menu-slider-header {
max-width: 820px;
margin-bottom: 26px;
}
.vb-menu-slider-header > span {
display: inline-flex;
margin-bottom: 13px;
padding: 8px 12px;
border-radius: 999px;
background: #9a3412;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-menu-slider-header h3 {
margin: 0 0 14px !important;
color: #431407 !important;
-webkit-text-fill-color: #431407 !important;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(34px, 5vw, 64px) !important;
line-height: 1.02 !important;
font-weight: 900 !important;
letter-spacing: -0.06em;
}
.vb-menu-slider-header p {
margin: 0 !important;
color: #7c2d12 !important;
-webkit-text-fill-color: #7c2d12 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-menu-slider-window {
overflow: hidden;
border-radius: 34px 6px 34px 6px;
background: #ffffff !important;
border: 1px solid rgba(194, 65, 12, 0.12);
}
.vb-menu-slider-track {
display: flex;
transform: translateX(0);
transition: transform 0.52s ease;
}
.vb-menu-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1fr);
gap: 34px;
align-items: center;
min-height: 600px;
padding: 46px;
}
.vb-menu-food {
position: relative;
min-height: 460px;
border-radius: 999px 999px 34px 34px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.vb-menu-food-a {
background: linear-gradient(135deg, #fb923c, #dc2626) !important;
}
.vb-menu-food-b {
background: linear-gradient(135deg, #84cc16, #15803d) !important;
}
.vb-menu-food-c {
background: linear-gradient(135deg, #7c2d12, #be123c) !important;
}
.vb-menu-food::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
}
.vb-menu-plate {
position: relative;
z-index: 2;
width: 280px;
height: 280px;
border-radius: 999px;
background: #fffbeb !important;
border: 18px solid rgba(255,255,255,0.52);
box-shadow: 0 30px 80px rgba(67, 20, 7, 0.24);
}
.vb-menu-plate::before {
content: "";
position: absolute;
inset: 42px;
border-radius: 999px;
background:
radial-gradient(circle at 34% 36%, rgba(194, 65, 12, 0.40), transparent 18%),
radial-gradient(circle at 66% 42%, rgba(132, 204, 22, 0.50), transparent 20%),
radial-gradient(circle at 50% 68%, rgba(249, 115, 22, 0.46), transparent 22%),
#fed7aa;
}
.vb-menu-plate span {
position: absolute;
z-index: 3;
width: 42px;
height: 42px;
border-radius: 999px;
background: rgba(67, 20, 7, 0.18);
}
.vb-menu-plate span:nth-child(1) {
left: 72px;
top: 82px;
}
.vb-menu-plate span:nth-child(2) {
right: 76px;
top: 110px;
}
.vb-menu-plate span:nth-child(3) {
left: 116px;
bottom: 72px;
}
.vb-menu-copy > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: #ffedd5;
color: #9a3412 !important;
-webkit-text-fill-color: #9a3412 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-menu-copy h4 {
max-width: 700px;
margin: 0 0 16px !important;
color: #431407 !important;
-webkit-text-fill-color: #431407 !important;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(36px, 5vw, 68px) !important;
line-height: 1.02 !important;
font-weight: 900 !important;
letter-spacing: -0.06em;
}
.vb-menu-copy p {
max-width: 620px;
margin: 0 0 26px !important;
color: #7c2d12 !important;
-webkit-text-fill-color: #7c2d12 !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-menu-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 150px));
gap: 14px;
margin-bottom: 28px;
}
.vb-menu-details div {
padding: 16px;
border-radius: 18px;
background: #fff7ed;
border: 1px solid rgba(194, 65, 12, 0.14);
}
.vb-menu-details strong {
display: block;
color: #431407 !important;
-webkit-text-fill-color: #431407 !important;
font-size: 28px;
line-height: 1;
font-weight: 950;
}
.vb-menu-details small {
color: #9a3412 !important;
-webkit-text-fill-color: #9a3412 !important;
font-size: 12px;
font-weight: 850;
}
.vb-menu-copy a {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 13px 18px;
border-radius: 999px;
background: #9a3412;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-menu-slider-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 20px;
}
.vb-menu-slider-controls > button {
width: 52px;
height: 52px;
border: 0;
border-radius: 999px;
background: #431407;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 28px;
font-weight: 950;
cursor: pointer;
}
.vb-menu-slider-dots {
display: flex;
gap: 9px;
}
.vb-menu-slider-dots button {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(154, 52, 18, 0.24);
cursor: pointer;
}
.vb-menu-slider-dots button.is-active {
width: 38px;
background: #9a3412;
}
@media (max-width: 860px) {
.vb-menu-slide {
grid-template-columns: 1fr;
min-height: 900px;
}
.vb-menu-food {
min-height: 360px;
}
}
@media (max-width: 560px) {
.vb-menu-slider {
padding: 20px;
border-radius: 30px 8px 30px 8px;
}
.vb-menu-slide {
padding: 24px;
min-height: 850px;
}
.vb-menu-copy h4 {
font-size: 38px !important;
}
.vb-menu-details {
grid-template-columns: 1fr;
}
.vb-menu-plate {
width: 230px;
height: 230px;
}
}
This restaurant menu JavaScript slider is useful for restaurants, cafes, bakeries, bars, food delivery websites, and hospitality landing pages. It lets you present featured menu items with stronger visual impact than a simple static list.
24. Real Estate Property Slider
A real estate property slider helps property websites show listings, featured homes, apartment previews, rental offers, interior highlights, or investment properties in a compact interactive layout. Visitors can browse key listing details without immediately opening a separate property page.
This example uses a clean real estate card layout with a large CSS-generated property preview, listing price, location, bedroom and bathroom details, and thumbnail-style navigation. The JavaScript updates the active property, slide position, and selected thumbnail button.
- JavaScript real estate property slider
- Large property preview with price and listing details
- Thumbnail-style property navigation
- Good for real estate websites, apartment rentals, property agencies, and listing pages
- Works without external images or slider libraries
JavaScript
(function () {
const slider = document.querySelector("[data-vb-property-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-property-track]");
const dots = slider.querySelectorAll("[data-vb-property-dot]");
const prev = slider.querySelector("[data-vb-property-prev]");
const next = slider.querySelector("[data-vb-property-next]");
const total = dots.length;
let index = 0;
function updatePropertySlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updatePropertySlider(index - 1);
});
next.addEventListener("click", function () {
updatePropertySlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updatePropertySlider(Number(dot.getAttribute("data-vb-property-dot")));
});
});
})();
HTML
<div class="vb-property-slider" data-vb-property-slider>
<div class="vb-property-slider-top">
<div>
<span>Featured Properties</span>
<h3>Browse property listings in a modern real estate slider</h3>
</div>
<div class="vb-property-slider-arrows">
<button type="button" data-vb-property-prev aria-label="Previous property">‹</button>
<button type="button" data-vb-property-next aria-label="Next property">›</button>
</div>
</div>
<div class="vb-property-slider-window">
<div class="vb-property-slider-track" data-vb-property-track>
<section class="vb-property-slide">
<div class="vb-property-image vb-property-image-a">
<span>Featured Home</span>
</div>
<div class="vb-property-info">
<span>Modern Villa</span>
<h4>Bright family home with garden terrace</h4>
<p>A property slider can highlight important listing details, location, price, and visual previews in one focused section.</p>
<div class="vb-property-price">$725,000</div>
<div class="vb-property-stats">
<div><strong>4</strong><small>Beds</small></div>
<div><strong>3</strong><small>Baths</small></div>
<div><strong>2,480</strong><small>Sq ft</small></div>
</div>
<a href="#javascript-slider-examples">View examples</a>
</div>
</section>
<section class="vb-property-slide">
<div class="vb-property-image vb-property-image-b">
<span>City Apartment</span>
</div>
<div class="vb-property-info">
<span>Urban Apartment</span>
<h4>Central apartment with skyline balcony</h4>
<p>Use this slider type for rental listings, apartment collections, real estate agencies, or featured property blocks.</p>
<div class="vb-property-price">$465,000</div>
<div class="vb-property-stats">
<div><strong>2</strong><small>Beds</small></div>
<div><strong>2</strong><small>Baths</small></div>
<div><strong>1,180</strong><small>Sq ft</small></div>
</div>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
</section>
<section class="vb-property-slide">
<div class="vb-property-image vb-property-image-c">
<span>Lake House</span>
</div>
<div class="vb-property-info">
<span>Waterfront House</span>
<h4>Peaceful lake home with open living space</h4>
<p>Real estate sliders work best when they include clear navigation and enough visible information for comparison.</p>
<div class="vb-property-price">$890,000</div>
<div class="vb-property-stats">
<div><strong>5</strong><small>Beds</small></div>
<div><strong>4</strong><small>Baths</small></div>
<div><strong>3,120</strong><small>Sq ft</small></div>
</div>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</div>
</section>
</div>
</div>
<div class="vb-property-thumbs">
<button type="button" class="is-active" data-vb-property-dot="0">
<strong>01</strong>
<span>Villa</span>
</button>
<button type="button" data-vb-property-dot="1">
<strong>02</strong>
<span>Apartment</span>
</button>
<button type="button" data-vb-property-dot="2">
<strong>03</strong>
<span>Lake House</span>
</button>
</div>
</div>
CSS
.vb-property-slider,
.vb-property-slider * {
box-sizing: border-box;
}
.vb-property-slider {
margin: 28px 0;
padding: 30px;
border-radius: 32px;
background:
linear-gradient(135deg, #f8fafc 0%, #ffffff 54%, #ecfdf5 100%) !important;
border: 1px solid rgba(15, 118, 110, 0.16);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
overflow: hidden;
}
.vb-property-slider-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.vb-property-slider-top span {
display: inline-flex;
margin-bottom: 12px;
padding: 8px 12px;
border-radius: 12px;
background: #0f766e;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-property-slider-top h3 {
max-width: 760px;
margin: 0 !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(34px, 5vw, 62px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.07em;
}
.vb-property-slider-arrows {
display: flex;
gap: 10px;
}
.vb-property-slider-arrows button {
width: 50px;
height: 50px;
border: 0;
border-radius: 16px;
background: #0f172a;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 26px;
font-weight: 950;
cursor: pointer;
}
.vb-property-slider-window {
overflow: hidden;
border-radius: 26px;
background: #ffffff !important;
border: 1px solid rgba(15, 118, 110, 0.12);
}
.vb-property-slider-track {
display: flex;
transform: translateX(0);
transition: transform 0.52s ease;
}
.vb-property-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(280px, 0.94fr) minmax(0, 1fr);
gap: 34px;
align-items: stretch;
min-height: 600px;
padding: 34px;
}
.vb-property-image {
position: relative;
min-height: 520px;
border-radius: 26px;
overflow: hidden;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
}
.vb-property-image-a {
background: linear-gradient(135deg, #0f766e, #22c55e) !important;
}
.vb-property-image-b {
background: linear-gradient(135deg, #2563eb, #0f172a) !important;
}
.vb-property-image-c {
background: linear-gradient(135deg, #0ea5e9, #0f766e) !important;
}
.vb-property-image::before {
content: "";
position: absolute;
left: 9%;
right: 9%;
bottom: 12%;
height: 44%;
border-radius: 24px 24px 8px 8px;
background: rgba(255,255,255,0.86);
clip-path: polygon(0 32%, 50% 0, 100% 32%, 100% 100%, 0 100%);
}
.vb-property-image::after {
content: "";
position: absolute;
left: 22%;
bottom: 18%;
width: 20%;
height: 22%;
border-radius: 8px;
background: rgba(15, 23, 42, 0.22);
box-shadow: 150px 0 0 rgba(15, 23, 42, 0.16);
}
.vb-property-image span {
position: absolute;
left: 26px;
top: 26px;
z-index: 3;
padding: 9px 13px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.60);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-property-info {
align-self: center;
padding: 18px 10px;
}
.vb-property-info > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: #ccfbf1;
color: #0f766e !important;
-webkit-text-fill-color: #0f766e !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-property-info h4 {
max-width: 700px;
margin: 0 0 16px !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(36px, 5vw, 66px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.075em;
}
.vb-property-info p {
max-width: 620px;
margin: 0 0 24px !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-property-price {
margin-bottom: 22px;
color: #0f766e !important;
-webkit-text-fill-color: #0f766e !important;
font-size: 48px;
line-height: 1;
font-weight: 950;
letter-spacing: -0.075em;
}
.vb-property-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 120px));
gap: 12px;
margin-bottom: 28px;
}
.vb-property-stats div {
padding: 16px;
border-radius: 18px;
background: #f8fafc;
border: 1px solid rgba(15, 118, 110, 0.12);
}
.vb-property-stats strong {
display: block;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 24px;
line-height: 1;
font-weight: 950;
}
.vb-property-stats small {
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 12px;
font-weight: 850;
}
.vb-property-info a {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 13px 18px;
border-radius: 14px;
background: #0f766e;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-property-thumbs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}
.vb-property-thumbs button {
display: flex;
align-items: center;
gap: 12px;
min-height: 70px;
padding: 14px;
border: 1px solid rgba(15, 118, 110, 0.14);
border-radius: 18px;
background: #ffffff;
text-align: left;
cursor: pointer;
}
.vb-property-thumbs button.is-active {
background: #0f172a;
}
.vb-property-thumbs strong {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 14px;
background: #ccfbf1;
color: #0f766e !important;
-webkit-text-fill-color: #0f766e !important;
font-size: 13px;
font-weight: 950;
}
.vb-property-thumbs span {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 14px;
font-weight: 850;
}
.vb-property-thumbs button.is-active strong {
background: #0f766e;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-property-thumbs button.is-active span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
@media (max-width: 900px) {
.vb-property-slider-top {
align-items: flex-start;
flex-direction: column;
}
.vb-property-slide {
grid-template-columns: 1fr;
min-height: 960px;
}
.vb-property-image {
min-height: 440px;
}
}
@media (max-width: 600px) {
.vb-property-slider {
padding: 20px;
border-radius: 24px;
}
.vb-property-slide {
padding: 22px;
min-height: 920px;
}
.vb-property-info h4 {
font-size: 38px !important;
}
.vb-property-price {
font-size: 38px;
}
.vb-property-stats,
.vb-property-thumbs {
grid-template-columns: 1fr;
}
.vb-property-image {
min-height: 360px;
}
}
This real estate property JavaScript slider is useful for real estate agencies, rental websites, property listing pages, apartment collections, investment property pages, and featured listing sections. It keeps important listing information visible while giving visitors an interactive way to browse properties.
25. Travel Destination Slider
A travel destination slider is useful for travel agencies, hotel websites, tour operators, destination guides, booking pages, and tourism landing pages. It lets visitors browse featured locations, trip ideas, seasonal offers, or travel packages without leaving the section.
This example uses a cinematic travel layout with large destination cards, location labels, trip details, CSS-generated landscape visuals, dot navigation, and arrow controls. The JavaScript moves one destination slide at a time and updates the active dot state.
- JavaScript travel destination slider
- Large destination preview with trip details
- CSS-generated landscapes without external images
- Previous, next, and dot navigation
- Good for travel agencies, hotels, tours, booking pages, and tourism websites
JavaScript
(function () {
const slider = document.querySelector("[data-vb-travel-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-travel-track]");
const dots = slider.querySelectorAll("[data-vb-travel-dot]");
const prev = slider.querySelector("[data-vb-travel-prev]");
const next = slider.querySelector("[data-vb-travel-next]");
const total = dots.length;
let index = 0;
function updateTravelSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updateTravelSlider(index - 1);
});
next.addEventListener("click", function () {
updateTravelSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateTravelSlider(Number(dot.getAttribute("data-vb-travel-dot")));
});
});
})();
HTML
<div class="vb-travel-slider" data-vb-travel-slider>
<div class="vb-travel-slider-header">
<span>Travel Slider</span>
<h3>Explore featured destinations in a cinematic carousel</h3>
<p>Use this JavaScript destination slider for tour packages, travel guides, hotels, retreats, seasonal trips, or booking website sections.</p>
</div>
<div class="vb-travel-slider-window">
<div class="vb-travel-slider-track" data-vb-travel-track>
<section class="vb-travel-slide">
<div class="vb-travel-scene vb-travel-scene-a">
<span>Mountain Escape</span>
</div>
<div class="vb-travel-copy">
<span>Destination 01</span>
<h4>Alpine retreat with peaceful mountain views</h4>
<p>Travel sliders work well when you need to highlight visual destinations, short trip descriptions, and quick booking details.</p>
<div class="vb-travel-meta">
<div>
<strong>5 days</strong>
<small>Trip length</small>
</div>
<div>
<strong>$890</strong>
<small>From price</small>
</div>
<div>
<strong>4.9</strong>
<small>Rating</small>
</div>
</div>
<a href="#javascript-slider-examples">View examples</a>
</div>
</section>
<section class="vb-travel-slide">
<div class="vb-travel-scene vb-travel-scene-b">
<span>Coastal Weekend</span>
</div>
<div class="vb-travel-copy">
<span>Destination 02</span>
<h4>Sunny coastline trip with relaxed beach days</h4>
<p>Use this layout to present beach trips, city breaks, hotel offers, guided tours, or seasonal destination campaigns.</p>
<div class="vb-travel-meta">
<div>
<strong>3 days</strong>
<small>Trip length</small>
</div>
<div>
<strong>$520</strong>
<small>From price</small>
</div>
<div>
<strong>4.8</strong>
<small>Rating</small>
</div>
</div>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
</section>
<section class="vb-travel-slide">
<div class="vb-travel-scene vb-travel-scene-c">
<span>City Lights</span>
</div>
<div class="vb-travel-copy">
<span>Destination 03</span>
<h4>Urban getaway with culture, food, and nightlife</h4>
<p>A destination slider can make travel content more interactive while keeping trip information structured and easy to scan.</p>
<div class="vb-travel-meta">
<div>
<strong>4 days</strong>
<small>Trip length</small>
</div>
<div>
<strong>$740</strong>
<small>From price</small>
</div>
<div>
<strong>4.7</strong>
<small>Rating</small>
</div>
</div>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</div>
</section>
</div>
</div>
<div class="vb-travel-slider-controls">
<button type="button" data-vb-travel-prev aria-label="Previous destination">‹</button>
<div class="vb-travel-slider-dots">
<button type="button" class="is-active" data-vb-travel-dot="0" aria-label="Go to destination 1"></button>
<button type="button" data-vb-travel-dot="1" aria-label="Go to destination 2"></button>
<button type="button" data-vb-travel-dot="2" aria-label="Go to destination 3"></button>
</div>
<button type="button" data-vb-travel-next aria-label="Next destination">›</button>
</div>
</div>
CSS
.vb-travel-slider,
.vb-travel-slider * {
box-sizing: border-box;
}
.vb-travel-slider {
margin: 28px 0;
padding: 30px;
border-radius: 38px;
background:
radial-gradient(circle at 16% 14%, rgba(14, 165, 233, 0.18), transparent 30%),
radial-gradient(circle at 86% 18%, rgba(34, 197, 94, 0.14), transparent 32%),
linear-gradient(135deg, #082f49 0%, #0f172a 100%) !important;
border: 1px solid rgba(186, 230, 253, 0.16);
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.36);
overflow: hidden;
}
.vb-travel-slider-header {
max-width: 820px;
margin-bottom: 26px;
}
.vb-travel-slider-header > span {
display: inline-flex;
margin-bottom: 13px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(186, 230, 253, 0.14);
border: 1px solid rgba(186, 230, 253, 0.22);
color: #bae6fd !important;
-webkit-text-fill-color: #bae6fd !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-travel-slider-header h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(34px, 5vw, 66px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.075em;
}
.vb-travel-slider-header p {
margin: 0 !important;
color: #dbeafe !important;
-webkit-text-fill-color: #dbeafe !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-travel-slider-window {
overflow: hidden;
border-radius: 30px;
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.12);
}
.vb-travel-slider-track {
display: flex;
transform: translateX(0);
transition: transform 0.52s ease;
}
.vb-travel-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1fr);
gap: 34px;
align-items: center;
min-height: 620px;
padding: 34px;
}
.vb-travel-scene {
position: relative;
min-height: 540px;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.30);
}
.vb-travel-scene-a {
background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 48%, #1e3a8a 100%) !important;
}
.vb-travel-scene-b {
background: linear-gradient(135deg, #f59e0b 0%, #0ea5e9 52%, #0369a1 100%) !important;
}
.vb-travel-scene-c {
background: linear-gradient(135deg, #7c3aed 0%, #db2777 52%, #111827 100%) !important;
}
.vb-travel-scene::before {
content: "";
position: absolute;
left: -8%;
right: -8%;
bottom: -2%;
height: 42%;
background:
radial-gradient(circle at 22% 40%, rgba(255,255,255,0.24), transparent 16%),
linear-gradient(135deg, rgba(255,255,255,0.52), rgba(255,255,255,0.14));
clip-path: polygon(0 74%, 16% 38%, 34% 66%, 52% 18%, 72% 62%, 100% 26%, 100% 100%, 0 100%);
}
.vb-travel-scene::after {
content: "";
position: absolute;
left: 12%;
top: 12%;
width: 170px;
height: 170px;
border-radius: 999px;
background: rgba(255,255,255,0.20);
box-shadow: 220px 120px 0 rgba(255,255,255,0.10);
}
.vb-travel-scene span {
position: absolute;
left: 28px;
top: 28px;
z-index: 3;
padding: 9px 13px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.58);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-travel-copy > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(186, 230, 253, 0.14);
color: #bae6fd !important;
-webkit-text-fill-color: #bae6fd !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-travel-copy h4 {
max-width: 720px;
margin: 0 0 16px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(38px, 5vw, 72px) !important;
line-height: 0.98 !important;
font-weight: 950 !important;
letter-spacing: -0.085em;
}
.vb-travel-copy p {
max-width: 620px;
margin: 0 0 26px !important;
color: #dbeafe !important;
-webkit-text-fill-color: #dbeafe !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-travel-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 120px));
gap: 12px;
margin-bottom: 28px;
}
.vb-travel-meta div {
padding: 16px;
border-radius: 18px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.14);
}
.vb-travel-meta strong {
display: block;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 24px;
line-height: 1;
font-weight: 950;
}
.vb-travel-meta small {
color: #bfdbfe !important;
-webkit-text-fill-color: #bfdbfe !important;
font-size: 12px;
font-weight: 850;
}
.vb-travel-copy a {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 13px 18px;
border-radius: 999px;
background: #38bdf8;
color: #082f49 !important;
-webkit-text-fill-color: #082f49 !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-travel-slider-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 20px;
}
.vb-travel-slider-controls > button {
width: 52px;
height: 52px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px;
background: rgba(255,255,255,0.10);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 28px;
font-weight: 950;
cursor: pointer;
}
.vb-travel-slider-dots {
display: flex;
gap: 9px;
}
.vb-travel-slider-dots button {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,0.30);
cursor: pointer;
}
.vb-travel-slider-dots button.is-active {
width: 38px;
background: #38bdf8;
}
@media (max-width: 900px) {
.vb-travel-slide {
grid-template-columns: 1fr;
min-height: 980px;
}
.vb-travel-scene {
min-height: 420px;
}
}
@media (max-width: 600px) {
.vb-travel-slider {
padding: 20px;
border-radius: 26px;
}
.vb-travel-slide {
padding: 22px;
min-height: 900px;
}
.vb-travel-copy h4 {
font-size: 38px !important;
}
.vb-travel-meta {
grid-template-columns: 1fr;
}
.vb-travel-scene {
min-height: 340px;
}
}
This travel destination JavaScript slider is useful for travel agencies, tour operators, hotels, destination guides, booking pages, retreat websites, and tourism landing pages. It gives destination content a stronger visual story while keeping trip details easy to read.
26. Course Lesson Slider
A course lesson slider helps online course websites, learning platforms, coaching programs, documentation pages, and tutorial libraries show lessons or modules in an interactive way. It keeps learning content organized while allowing visitors to browse one lesson preview at a time.
This example uses a learning dashboard style with lesson cards, module navigation, progress details, and a large course preview panel. The JavaScript moves the lesson track, updates active module buttons, and keeps the slider responsive for smaller screens.
- JavaScript course lesson slider
- Lesson preview with module, duration, level, and CTA
- Clickable lesson navigation
- Good for courses, learning platforms, tutorials, documentation, and coaching websites
- Works without external libraries or image files
JavaScript
(function () {
const slider = document.querySelector("[data-vb-course-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-course-track]");
const dots = slider.querySelectorAll("[data-vb-course-dot]");
const prev = slider.querySelector("[data-vb-course-prev]");
const next = slider.querySelector("[data-vb-course-next]");
const total = dots.length;
let index = 0;
function updateCourseSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updateCourseSlider(index - 1);
});
next.addEventListener("click", function () {
updateCourseSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateCourseSlider(Number(dot.getAttribute("data-vb-course-dot")));
});
});
})();
HTML
<div class="vb-course-slider" data-vb-course-slider>
<div class="vb-course-sidebar">
<span>Course Modules</span>
<h3>Browse lessons in a structured learning slider</h3>
<div class="vb-course-nav">
<button type="button" class="is-active" data-vb-course-dot="0">
<strong>01</strong>
<span>Slider Basics</span>
</button>
<button type="button" data-vb-course-dot="1">
<strong>02</strong>
<span>Responsive Logic</span>
</button>
<button type="button" data-vb-course-dot="2">
<strong>03</strong>
<span>Polished UI</span>
</button>
</div>
</div>
<div class="vb-course-main">
<div class="vb-course-window">
<div class="vb-course-track" data-vb-course-track>
<section class="vb-course-slide">
<div class="vb-course-preview vb-course-preview-a">
<div class="vb-course-screen">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="vb-course-copy">
<span>Lesson 01</span>
<h4>Understand the structure of a JavaScript slider</h4>
<p>Start with the basic idea of a wrapper, track, slides, controls, active state, and transform-based movement.</p>
<div class="vb-course-details">
<div><strong>18 min</strong><small>Duration</small></div>
<div><strong>Beginner</strong><small>Level</small></div>
</div>
<a href="#javascript-slider-examples">View examples</a>
</div>
</section>
<section class="vb-course-slide">
<div class="vb-course-preview vb-course-preview-b">
<div class="vb-course-screen">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="vb-course-copy">
<span>Lesson 02</span>
<h4>Make sliders responsive across screen sizes</h4>
<p>Learn how visible card counts, flexible widths, media queries, and resize handling keep carousels usable on mobile.</p>
<div class="vb-course-details">
<div><strong>24 min</strong><small>Duration</small></div>
<div><strong>Intermediate</strong><small>Level</small></div>
</div>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</div>
</section>
<section class="vb-course-slide">
<div class="vb-course-preview vb-course-preview-c">
<div class="vb-course-screen">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="vb-course-copy">
<span>Lesson 03</span>
<h4>Design slider sections that feel professional</h4>
<p>Improve spacing, typography, buttons, motion, content structure, and accessibility so the slider supports the page goal.</p>
<div class="vb-course-details">
<div><strong>31 min</strong><small>Duration</small></div>
<div><strong>Advanced</strong><small>Level</small></div>
</div>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
</section>
</div>
</div>
<div class="vb-course-controls">
<button type="button" data-vb-course-prev aria-label="Previous lesson">‹ Previous</button>
<button type="button" data-vb-course-next aria-label="Next lesson">Next ›</button>
</div>
</div>
</div>
CSS
.vb-course-slider,
.vb-course-slider * {
box-sizing: border-box;
}
.vb-course-slider {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 22px;
margin: 28px 0;
padding: 28px;
border-radius: 30px;
background:
radial-gradient(circle at 18% 16%, rgba(99, 102, 241, 0.18), transparent 30%),
linear-gradient(135deg, #eef2ff 0%, #ffffff 100%) !important;
border: 1px solid rgba(99, 102, 241, 0.18);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
overflow: hidden;
}
.vb-course-sidebar {
padding: 26px;
border-radius: 24px;
background: #312e81 !important;
}
.vb-course-sidebar > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
color: #c7d2fe !important;
-webkit-text-fill-color: #c7d2fe !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-course-sidebar h3 {
margin: 0 0 24px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(30px, 4vw, 46px) !important;
line-height: 1.03 !important;
font-weight: 950 !important;
letter-spacing: -0.065em;
}
.vb-course-nav {
display: grid;
gap: 12px;
}
.vb-course-nav button {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
align-items: center;
min-height: 72px;
padding: 14px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px;
background: rgba(255,255,255,0.07);
text-align: left;
cursor: pointer;
}
.vb-course-nav button.is-active {
background: #ffffff;
}
.vb-course-nav strong {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 14px;
background: rgba(129, 140, 248, 0.22);
color: #e0e7ff !important;
-webkit-text-fill-color: #e0e7ff !important;
font-size: 13px;
font-weight: 950;
}
.vb-course-nav span {
color: #e0e7ff !important;
-webkit-text-fill-color: #e0e7ff !important;
font-size: 14px;
font-weight: 850;
}
.vb-course-nav button.is-active strong {
background: #4f46e5;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-course-nav button.is-active span {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
}
.vb-course-main {
min-width: 0;
}
.vb-course-window {
overflow: hidden;
border-radius: 24px;
background: #ffffff !important;
border: 1px solid rgba(99, 102, 241, 0.16);
}
.vb-course-track {
display: flex;
transform: translateX(0);
transition: transform 0.5s ease;
}
.vb-course-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1fr);
gap: 30px;
align-items: center;
min-height: 560px;
padding: 38px;
}
.vb-course-preview {
min-height: 430px;
border-radius: 30px;
padding: 28px;
overflow: hidden;
box-shadow: 0 28px 80px rgba(49, 46, 129, 0.18);
}
.vb-course-preview-a {
background: linear-gradient(135deg, #4f46e5, #06b6d4) !important;
}
.vb-course-preview-b {
background: linear-gradient(135deg, #0f766e, #22c55e) !important;
}
.vb-course-preview-c {
background: linear-gradient(135deg, #db2777, #7c3aed) !important;
}
.vb-course-screen {
height: 100%;
min-height: 374px;
padding: 26px;
border-radius: 24px;
background: rgba(255,255,255,0.86) !important;
border: 1px solid rgba(255,255,255,0.42);
}
.vb-course-screen::before {
content: "";
display: block;
height: 138px;
margin-bottom: 24px;
border-radius: 22px;
background:
radial-gradient(circle at 28% 28%, rgba(79, 70, 229, 0.20), transparent 25%),
linear-gradient(135deg, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0.03));
}
.vb-course-screen span {
display: block;
height: 18px;
margin-bottom: 14px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.13);
}
.vb-course-screen span:nth-child(2) {
width: 78%;
}
.vb-course-screen span:nth-child(3) {
width: 56%;
}
.vb-course-copy > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: #e0e7ff;
color: #4338ca !important;
-webkit-text-fill-color: #4338ca !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-course-copy h4 {
max-width: 680px;
margin: 0 0 16px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(34px, 5vw, 64px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.07em;
}
.vb-course-copy p {
max-width: 620px;
margin: 0 0 24px !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-course-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 150px));
gap: 12px;
margin-bottom: 26px;
}
.vb-course-details div {
padding: 16px;
border-radius: 18px;
background: #f8fafc;
border: 1px solid rgba(99, 102, 241, 0.14);
}
.vb-course-details strong {
display: block;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 22px;
line-height: 1;
font-weight: 950;
}
.vb-course-details small {
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 12px;
font-weight: 850;
}
.vb-course-copy a {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 13px 18px;
border-radius: 14px;
background: #4f46e5;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-course-controls {
display: flex;
justify-content: space-between;
gap: 14px;
margin-top: 18px;
}
.vb-course-controls button {
min-height: 48px;
padding: 12px 18px;
border: 0;
border-radius: 14px;
background: #312e81;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
cursor: pointer;
}
@media (max-width: 980px) {
.vb-course-slider {
grid-template-columns: 1fr;
}
.vb-course-slide {
grid-template-columns: 1fr;
min-height: 850px;
}
}
@media (max-width: 600px) {
.vb-course-slider {
padding: 20px;
border-radius: 24px;
}
.vb-course-sidebar {
padding: 22px;
}
.vb-course-slide {
padding: 22px;
min-height: 810px;
}
.vb-course-copy h4 {
font-size: 36px !important;
}
.vb-course-preview {
min-height: 320px;
}
.vb-course-screen {
min-height: 270px;
}
.vb-course-details {
grid-template-columns: 1fr;
}
.vb-course-controls {
flex-direction: column;
}
}
This course lesson JavaScript slider is useful for online courses, coaching pages, learning platforms, tutorial hubs, documentation pages, and education websites. It keeps lessons structured, interactive, and easy to browse.
27. Portfolio Project Slider
A portfolio project slider is useful for designers, developers, agencies, freelancers, studios, photographers, and creative professionals who want to show selected work in a compact interactive section. Instead of placing every project in a long grid, this JavaScript slider highlights one project at a time with stronger visual storytelling.
This example uses a bold creative portfolio layout with a large CSS-generated project preview, project type label, short case study text, project stats, dot navigation, and arrow controls. The JavaScript updates the active slide, active dot, slide counter, and project movement.
- JavaScript portfolio project slider
- Large project preview with case study style content
- Project stats, category label, and CTA button
- Previous, next, dot navigation, and slide counter
- Good for agencies, designers, developers, studios, and freelancers
JavaScript
(function () {
const slider = document.querySelector("[data-vb-portfolio-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-portfolio-track]");
const dots = slider.querySelectorAll("[data-vb-portfolio-dot]");
const prev = slider.querySelector("[data-vb-portfolio-prev]");
const next = slider.querySelector("[data-vb-portfolio-next]");
const current = slider.querySelector("[data-vb-portfolio-current]");
const total = dots.length;
let index = 0;
function updatePortfolioSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
if (current) {
current.textContent = String(index + 1).padStart(2, "0");
}
}
prev.addEventListener("click", function () {
updatePortfolioSlider(index - 1);
});
next.addEventListener("click", function () {
updatePortfolioSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updatePortfolioSlider(Number(dot.getAttribute("data-vb-portfolio-dot")));
});
});
})();
HTML
<div class="vb-portfolio-slider" data-vb-portfolio-slider>
<div class="vb-portfolio-slider-top">
<div>
<span>Portfolio Slider</span>
<h3>Show selected projects with a bold creative carousel</h3>
<p>Use this JavaScript portfolio slider to present case studies, website projects, design work, campaigns, or creative services.</p>
</div>
<div class="vb-portfolio-counter">
<strong data-vb-portfolio-current>01</strong>
<small>/ 03</small>
</div>
</div>
<div class="vb-portfolio-window">
<div class="vb-portfolio-track" data-vb-portfolio-track>
<section class="vb-portfolio-slide">
<div class="vb-portfolio-preview vb-portfolio-preview-a">
<div class="vb-portfolio-browser">
<div class="vb-portfolio-browser-bar"></div>
<div class="vb-portfolio-browser-hero"></div>
<div class="vb-portfolio-browser-grid">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="vb-portfolio-copy">
<span>Website Design</span>
<h4>Modern landing page concept for a digital product</h4>
<p>Portfolio sliders help visitors focus on one project at a time while still giving them a quick way to browse more work.</p>
<div class="vb-portfolio-stats">
<div><strong>12</strong><small>Pages</small></div>
<div><strong>4 wk</strong><small>Timeline</small></div>
<div><strong>UI</strong><small>Focus</small></div>
</div>
<a href="#javascript-slider-examples">View examples</a>
</div>
</section>
<section class="vb-portfolio-slide">
<div class="vb-portfolio-preview vb-portfolio-preview-b">
<div class="vb-portfolio-browser">
<div class="vb-portfolio-browser-bar"></div>
<div class="vb-portfolio-browser-hero"></div>
<div class="vb-portfolio-browser-grid">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="vb-portfolio-copy">
<span>Brand System</span>
<h4>Visual identity layout with reusable website sections</h4>
<p>Use this layout for agency case studies, branding projects, UX work, client results, or featured creative campaigns.</p>
<div class="vb-portfolio-stats">
<div><strong>18</strong><small>Assets</small></div>
<div><strong>6 wk</strong><small>Timeline</small></div>
<div><strong>Brand</strong><small>Focus</small></div>
</div>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
</section>
<section class="vb-portfolio-slide">
<div class="vb-portfolio-preview vb-portfolio-preview-c">
<div class="vb-portfolio-browser">
<div class="vb-portfolio-browser-bar"></div>
<div class="vb-portfolio-browser-hero"></div>
<div class="vb-portfolio-browser-grid">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="vb-portfolio-copy">
<span>Frontend Build</span>
<h4>Responsive component system for a content website</h4>
<p>A portfolio slider can show project previews, design direction, deliverables, and outcomes without making the page too long.</p>
<div class="vb-portfolio-stats">
<div><strong>30</strong><small>Blocks</small></div>
<div><strong>8 wk</strong><small>Timeline</small></div>
<div><strong>Code</strong><small>Focus</small></div>
</div>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</div>
</section>
</div>
</div>
<div class="vb-portfolio-bottom">
<div class="vb-portfolio-dots">
<button type="button" class="is-active" data-vb-portfolio-dot="0" aria-label="Go to portfolio project 1"></button>
<button type="button" data-vb-portfolio-dot="1" aria-label="Go to portfolio project 2"></button>
<button type="button" data-vb-portfolio-dot="2" aria-label="Go to portfolio project 3"></button>
</div>
<div class="vb-portfolio-controls">
<button type="button" data-vb-portfolio-prev aria-label="Previous portfolio project">←</button>
<button type="button" data-vb-portfolio-next aria-label="Next portfolio project">→</button>
</div>
</div>
</div>
CSS
.vb-portfolio-slider,
.vb-portfolio-slider * {
box-sizing: border-box;
}
.vb-portfolio-slider {
margin: 28px 0;
padding: 30px;
border-radius: 12px 44px 12px 44px;
background:
radial-gradient(circle at 16% 14%, rgba(236, 72, 153, 0.18), transparent 30%),
radial-gradient(circle at 88% 18%, rgba(14, 165, 233, 0.16), transparent 34%),
linear-gradient(135deg, #111827 0%, #020617 100%) !important;
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.36);
overflow: hidden;
}
.vb-portfolio-slider-top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: end;
margin-bottom: 26px;
}
.vb-portfolio-slider-top span {
display: inline-flex;
margin-bottom: 13px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(236, 72, 153, 0.14);
border: 1px solid rgba(236, 72, 153, 0.22);
color: #fbcfe8 !important;
-webkit-text-fill-color: #fbcfe8 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-portfolio-slider-top h3 {
max-width: 820px;
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(34px, 5vw, 66px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.075em;
}
.vb-portfolio-slider-top p {
max-width: 760px;
margin: 0 !important;
color: #d1d5db !important;
-webkit-text-fill-color: #d1d5db !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-portfolio-counter {
display: grid;
justify-items: end;
}
.vb-portfolio-counter strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 54px;
line-height: 0.9;
font-weight: 950;
letter-spacing: -0.08em;
}
.vb-portfolio-counter small {
color: #9ca3af !important;
-webkit-text-fill-color: #9ca3af !important;
font-size: 14px;
font-weight: 850;
}
.vb-portfolio-window {
overflow: hidden;
border-radius: 8px 34px 8px 34px;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.10);
}
.vb-portfolio-track {
display: flex;
transform: translateX(0);
transition: transform 0.52s ease;
}
.vb-portfolio-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1fr);
gap: 34px;
align-items: center;
min-height: 620px;
padding: 34px;
}
.vb-portfolio-preview {
min-height: 520px;
padding: 28px;
border-radius: 8px 32px 8px 32px;
overflow: hidden;
box-shadow: 0 30px 90px rgba(0,0,0,0.30);
}
.vb-portfolio-preview-a {
background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
}
.vb-portfolio-preview-b {
background: linear-gradient(135deg, #db2777, #f97316) !important;
}
.vb-portfolio-preview-c {
background: linear-gradient(135deg, #0f766e, #06b6d4) !important;
}
.vb-portfolio-browser {
height: 100%;
min-height: 464px;
padding: 22px;
border-radius: 8px 24px 8px 24px;
background: rgba(255,255,255,0.88) !important;
border: 1px solid rgba(255,255,255,0.42);
}
.vb-portfolio-browser-bar {
height: 46px;
margin-bottom: 18px;
border-radius: 999px;
background:
radial-gradient(circle at 22px 50%, #ef4444 0 5px, transparent 6px),
radial-gradient(circle at 42px 50%, #f59e0b 0 5px, transparent 6px),
radial-gradient(circle at 62px 50%, #22c55e 0 5px, transparent 6px),
rgba(15, 23, 42, 0.10);
}
.vb-portfolio-browser-hero {
height: 210px;
margin-bottom: 18px;
border-radius: 8px 22px 8px 22px;
background:
radial-gradient(circle at 26% 28%, rgba(15, 23, 42, 0.16), transparent 26%),
linear-gradient(135deg, rgba(15,23,42,0.12), rgba(15,23,42,0.04));
}
.vb-portfolio-browser-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.vb-portfolio-browser-grid span {
min-height: 138px;
border-radius: 18px;
background: rgba(15, 23, 42, 0.10);
}
.vb-portfolio-copy > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
color: #fbcfe8 !important;
-webkit-text-fill-color: #fbcfe8 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-portfolio-copy h4 {
max-width: 720px;
margin: 0 0 16px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(38px, 5vw, 72px) !important;
line-height: 0.98 !important;
font-weight: 950 !important;
letter-spacing: -0.085em;
}
.vb-portfolio-copy p {
max-width: 620px;
margin: 0 0 26px !important;
color: #d1d5db !important;
-webkit-text-fill-color: #d1d5db !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-portfolio-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 120px));
gap: 12px;
margin-bottom: 28px;
}
.vb-portfolio-stats div {
padding: 16px;
border-radius: 18px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
}
.vb-portfolio-stats strong {
display: block;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 24px;
line-height: 1;
font-weight: 950;
}
.vb-portfolio-stats small {
color: #9ca3af !important;
-webkit-text-fill-color: #9ca3af !important;
font-size: 12px;
font-weight: 850;
}
.vb-portfolio-copy a {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 13px 18px;
border-radius: 999px;
background: #ec4899;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-portfolio-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-top: 20px;
}
.vb-portfolio-dots {
display: flex;
gap: 9px;
}
.vb-portfolio-dots button {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,0.30);
cursor: pointer;
}
.vb-portfolio-dots button.is-active {
width: 38px;
background: #ec4899;
}
.vb-portfolio-controls {
display: flex;
gap: 10px;
}
.vb-portfolio-controls button {
width: 50px;
height: 50px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 999px;
background: rgba(255,255,255,0.08);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 18px;
font-weight: 950;
cursor: pointer;
}
@media (max-width: 900px) {
.vb-portfolio-slider-top {
grid-template-columns: 1fr;
}
.vb-portfolio-counter {
justify-items: start;
}
.vb-portfolio-slide {
grid-template-columns: 1fr;
min-height: 980px;
}
.vb-portfolio-preview {
min-height: 420px;
}
.vb-portfolio-browser {
min-height: 364px;
}
}
@media (max-width: 600px) {
.vb-portfolio-slider {
padding: 20px;
border-radius: 10px 30px 10px 30px;
}
.vb-portfolio-slide {
padding: 22px;
min-height: 900px;
}
.vb-portfolio-copy h4 {
font-size: 38px !important;
}
.vb-portfolio-stats {
grid-template-columns: 1fr;
}
.vb-portfolio-bottom {
flex-direction: column;
align-items: flex-start;
}
}
This portfolio project JavaScript slider is useful for agency websites, freelancer portfolios, design studios, developer portfolios, case study pages, and creative service websites. It lets each project feel important while keeping the portfolio section compact and interactive.
28. Step-by-Step Process Slider
A step-by-step process slider is useful for explaining workflows, onboarding sequences, service processes, setup guides, checkout steps, product tutorials, or project phases. It helps visitors move through a sequence without reading a long static instruction list.
This example uses a clean process layout with numbered step navigation, a large explanation panel, progress bar, arrow controls, and CSS-generated workflow visuals. The JavaScript updates the active step, slide position, progress width, and numbered tabs.
- JavaScript step-by-step process slider
- Numbered navigation for workflow steps
- Progress bar and active state updates
- Good for onboarding, service processes, tutorials, setup guides, and project phases
- Works without external images or libraries
JavaScript
(function () {
const slider = document.querySelector("[data-vb-process-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-process-track]");
const dots = slider.querySelectorAll("[data-vb-process-dot]");
const prev = slider.querySelector("[data-vb-process-prev]");
const next = slider.querySelector("[data-vb-process-next]");
const progress = slider.querySelector("[data-vb-process-progress]");
const total = dots.length;
let index = 0;
function updateProcessSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
if (progress) {
progress.style.width = ((index + 1) / total) * 100 + "%";
}
}
prev.addEventListener("click", function () {
updateProcessSlider(index - 1);
});
next.addEventListener("click", function () {
updateProcessSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateProcessSlider(Number(dot.getAttribute("data-vb-process-dot")));
});
});
})();
HTML
<div class="vb-process-slider" data-vb-process-slider>
<div class="vb-process-header">
<span>Process Slider</span>
<h3>Explain a workflow with a guided step-by-step slider</h3>
<p>Use this JavaScript process slider for onboarding, service steps, setup guides, checkout flows, or product tutorials.</p>
</div>
<div class="vb-process-steps">
<button type="button" class="is-active" data-vb-process-dot="0">
<strong>01</strong>
<span>Plan</span>
</button>
<button type="button" data-vb-process-dot="1">
<strong>02</strong>
<span>Build</span>
</button>
<button type="button" data-vb-process-dot="2">
<strong>03</strong>
<span>Launch</span>
</button>
<button type="button" data-vb-process-dot="3">
<strong>04</strong>
<span>Improve</span>
</button>
</div>
<div class="vb-process-window">
<div class="vb-process-track" data-vb-process-track>
<section class="vb-process-slide">
<div class="vb-process-copy">
<span>Step 01</span>
<h4>Plan the content, goal, and slider structure</h4>
<p>Start by deciding what the slider should explain. A good process slider needs clear steps, short copy, and visible controls.</p>
<a href="#javascript-slider-examples">View examples</a>
</div>
<div class="vb-process-visual vb-process-visual-a">
<div class="vb-process-flow">
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
<section class="vb-process-slide">
<div class="vb-process-copy">
<span>Step 02</span>
<h4>Build the layout with flexible slide sections</h4>
<p>Create a wrapper, track, slides, navigation buttons, and active states. Then use CSS transitions for smooth movement.</p>
<a href="#what-should-a-good-javascript-slider-include">Slider checklist</a>
</div>
<div class="vb-process-visual vb-process-visual-b">
<div class="vb-process-flow">
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
<section class="vb-process-slide">
<div class="vb-process-copy">
<span>Step 03</span>
<h4>Launch the slider with clear controls and responsive behavior</h4>
<p>Make sure arrows, dots, progress bars, and content layouts work on desktop, tablet, and mobile screens.</p>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</div>
<div class="vb-process-visual vb-process-visual-c">
<div class="vb-process-flow">
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
<section class="vb-process-slide">
<div class="vb-process-copy">
<span>Step 04</span>
<h4>Improve usability with better spacing, text, and interaction</h4>
<p>Review readability, button placement, keyboard access, animation speed, and whether the slider supports the page goal.</p>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
<div class="vb-process-visual vb-process-visual-d">
<div class="vb-process-flow">
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
</div>
</div>
<div class="vb-process-bottom">
<button type="button" data-vb-process-prev aria-label="Previous process step">‹ Previous</button>
<div class="vb-process-progress">
<span data-vb-process-progress></span>
</div>
<button type="button" data-vb-process-next aria-label="Next process step">Next ›</button>
</div>
</div>
CSS
.vb-process-slider,
.vb-process-slider * {
box-sizing: border-box;
}
.vb-process-slider {
margin: 28px 0;
padding: 30px;
border-radius: 34px;
background:
radial-gradient(circle at 14% 16%, rgba(16, 185, 129, 0.16), transparent 30%),
linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
border: 1px solid rgba(16, 185, 129, 0.18);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
overflow: hidden;
}
.vb-process-header {
max-width: 820px;
margin-bottom: 24px;
}
.vb-process-header > span {
display: inline-flex;
margin-bottom: 13px;
padding: 8px 12px;
border-radius: 999px;
background: #047857;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-process-header h3 {
margin: 0 0 14px !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(34px, 5vw, 64px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.075em;
}
.vb-process-header p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-process-steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.vb-process-steps button {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 12px;
align-items: center;
min-height: 76px;
padding: 14px;
border: 1px solid rgba(16, 185, 129, 0.16);
border-radius: 18px;
background: #ffffff;
text-align: left;
cursor: pointer;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.vb-process-steps button.is-active {
background: #064e3b;
}
.vb-process-steps strong {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: #d1fae5;
color: #047857 !important;
-webkit-text-fill-color: #047857 !important;
font-size: 13px;
font-weight: 950;
}
.vb-process-steps span {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 14px;
font-weight: 850;
}
.vb-process-steps button.is-active strong {
background: #10b981;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-process-steps button.is-active span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-process-window {
overflow: hidden;
border-radius: 26px;
background: #ecfdf5 !important;
border: 1px solid rgba(16, 185, 129, 0.14);
}
.vb-process-track {
display: flex;
transform: translateX(0);
transition: transform 0.5s ease;
}
.vb-process-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
gap: 30px;
align-items: center;
min-height: 560px;
padding: 42px;
}
.vb-process-copy > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: #d1fae5;
color: #047857 !important;
-webkit-text-fill-color: #047857 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-process-copy h4 {
max-width: 700px;
margin: 0 0 16px !important;
color: #064e3b !important;
-webkit-text-fill-color: #064e3b !important;
font-size: clamp(34px, 5vw, 64px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.075em;
}
.vb-process-copy p {
max-width: 620px;
margin: 0 0 26px !important;
color: #166534 !important;
-webkit-text-fill-color: #166534 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-process-copy a {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 13px 18px;
border-radius: 14px;
background: #047857;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-process-visual {
min-height: 410px;
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
border-radius: 32px;
overflow: hidden;
box-shadow: 0 28px 80px rgba(6, 78, 59, 0.18);
}
.vb-process-visual-a {
background: linear-gradient(135deg, #10b981, #0f766e) !important;
}
.vb-process-visual-b {
background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
}
.vb-process-visual-c {
background: linear-gradient(135deg, #f97316, #db2777) !important;
}
.vb-process-visual-d {
background: linear-gradient(135deg, #7c3aed, #312e81) !important;
}
.vb-process-flow {
position: relative;
display: grid;
gap: 18px;
width: min(100%, 360px);
}
.vb-process-flow::before {
content: "";
position: absolute;
left: 34px;
top: 34px;
bottom: 34px;
width: 4px;
border-radius: 999px;
background: rgba(255,255,255,0.42);
}
.vb-process-flow span {
position: relative;
z-index: 2;
min-height: 86px;
border-radius: 24px;
background: rgba(255,255,255,0.86);
border: 1px solid rgba(255,255,255,0.42);
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
}
.vb-process-flow span::before {
content: "";
position: absolute;
left: 22px;
top: 50%;
width: 28px;
height: 28px;
border-radius: 999px;
background: #064e3b;
transform: translateY(-50%);
}
.vb-process-flow span::after {
content: "";
position: absolute;
left: 68px;
right: 24px;
top: 50%;
height: 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.14);
transform: translateY(-50%);
}
.vb-process-bottom {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
margin-top: 18px;
}
.vb-process-bottom button {
min-height: 48px;
padding: 12px 18px;
border: 0;
border-radius: 14px;
background: #064e3b;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
cursor: pointer;
}
.vb-process-progress {
height: 8px;
border-radius: 999px;
background: #d1fae5;
overflow: hidden;
}
.vb-process-progress span {
display: block;
width: 25%;
height: 100%;
border-radius: 999px;
background: #047857;
transition: width 0.3s ease;
}
@media (max-width: 900px) {
.vb-process-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vb-process-slide {
grid-template-columns: 1fr;
min-height: 820px;
}
}
@media (max-width: 600px) {
.vb-process-slider {
padding: 20px;
border-radius: 24px;
}
.vb-process-steps {
grid-template-columns: 1fr;
}
.vb-process-slide {
padding: 24px;
min-height: 800px;
}
.vb-process-copy h4 {
font-size: 36px !important;
}
.vb-process-visual {
min-height: 330px;
}
.vb-process-bottom {
grid-template-columns: 1fr;
}
}
This step-by-step process JavaScript slider is useful for onboarding sections, agency workflows, service pages, setup tutorials, product guides, checkout explanations, and project timeline sections. It keeps sequential content clear, interactive, and easier to scan.
29. Vertical Slider
A vertical slider moves content up and down instead of left and right. This JavaScript slider pattern is useful for hero sections, product stories, feature highlights, editorial layouts, app screens, onboarding steps, and modern landing pages where the page should feel more dynamic than a standard horizontal carousel.
This example uses a vertical track with stacked slides, large typography, numbered navigation, and a tall visual panel. The JavaScript changes the vertical transform value, updates the active number button, and keeps the slider fully functional without external libraries.
- JavaScript vertical slider with up and down movement
- Numbered navigation and arrow controls
- Large editorial-style slide layout
- Good for hero sections, product stories, and feature highlights
- Works without external images or slider libraries
JavaScript
(function () {
const slider = document.querySelector("[data-vb-vertical-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-vertical-track]");
const dots = slider.querySelectorAll("[data-vb-vertical-dot]");
const prev = slider.querySelector("[data-vb-vertical-prev]");
const next = slider.querySelector("[data-vb-vertical-next]");
const total = dots.length;
let index = 0;
function updateVerticalSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateY(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
}
prev.addEventListener("click", function () {
updateVerticalSlider(index - 1);
});
next.addEventListener("click", function () {
updateVerticalSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateVerticalSlider(Number(dot.getAttribute("data-vb-vertical-dot")));
});
});
})();
HTML
<div class="vb-vertical-slider" data-vb-vertical-slider>
<div class="vb-vertical-sidebar">
<span>Vertical Slider</span>
<h3>Move content vertically instead of horizontally</h3>
<div class="vb-vertical-numbers">
<button type="button" class="is-active" data-vb-vertical-dot="0">01</button>
<button type="button" data-vb-vertical-dot="1">02</button>
<button type="button" data-vb-vertical-dot="2">03</button>
</div>
</div>
<div class="vb-vertical-main">
<div class="vb-vertical-window">
<div class="vb-vertical-track" data-vb-vertical-track>
<section class="vb-vertical-slide">
<div class="vb-vertical-copy">
<span>Slide 01</span>
<h4>Build a vertical product story with smooth movement</h4>
<p>Vertical sliders are useful when a section should feel like a guided story. Each slide can present one message, one visual idea, and one action.</p>
<a href="#javascript-slider-examples">View examples</a>
</div>
<div class="vb-vertical-visual vb-vertical-visual-a">
<div class="vb-vertical-panel">
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
<section class="vb-vertical-slide">
<div class="vb-vertical-copy">
<span>Slide 02</span>
<h4>Use vertical motion for landing page feature highlights</h4>
<p>This layout can work for SaaS features, app screens, service steps, product benefits, and modern homepage sections.</p>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
<div class="vb-vertical-visual vb-vertical-visual-b">
<div class="vb-vertical-panel">
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
<section class="vb-vertical-slide">
<div class="vb-vertical-copy">
<span>Slide 03</span>
<h4>Keep controls visible so users understand the interaction</h4>
<p>Vertical sliders should still have simple controls, clear active states, readable content, and a layout that works on smaller screens.</p>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</div>
<div class="vb-vertical-visual vb-vertical-visual-c">
<div class="vb-vertical-panel">
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
</div>
</div>
<div class="vb-vertical-controls">
<button type="button" data-vb-vertical-prev aria-label="Previous vertical slide">↑ Previous</button>
<button type="button" data-vb-vertical-next aria-label="Next vertical slide">Next ↓</button>
</div>
</div>
</div>
CSS
.vb-vertical-slider,
.vb-vertical-slider * {
box-sizing: border-box;
}
.vb-vertical-slider {
display: grid;
grid-template-columns: 310px minmax(0, 1fr);
gap: 24px;
margin: 28px 0;
padding: 30px;
border-radius: 42px;
background:
radial-gradient(circle at 14% 16%, rgba(59, 130, 246, 0.18), transparent 30%),
radial-gradient(circle at 88% 20%, rgba(168, 85, 247, 0.16), transparent 32%),
linear-gradient(135deg, #020617 0%, #111827 100%) !important;
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.36);
overflow: hidden;
}
.vb-vertical-sidebar {
padding: 28px;
border-radius: 30px;
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.12);
}
.vb-vertical-sidebar > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(147, 197, 253, 0.14);
color: #bfdbfe !important;
-webkit-text-fill-color: #bfdbfe !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-vertical-sidebar h3 {
margin: 0 0 26px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(30px, 4vw, 48px) !important;
line-height: 1.03 !important;
font-weight: 950 !important;
letter-spacing: -0.07em;
}
.vb-vertical-numbers {
display: grid;
gap: 12px;
}
.vb-vertical-numbers button {
min-height: 64px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 18px;
background: rgba(255,255,255,0.07);
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 18px;
font-weight: 950;
cursor: pointer;
}
.vb-vertical-numbers button.is-active {
background: #ffffff;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
}
.vb-vertical-main {
min-width: 0;
}
.vb-vertical-window {
height: 650px;
overflow: hidden;
border-radius: 32px;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.10);
}
.vb-vertical-track {
height: 100%;
transform: translateY(0);
transition: transform 0.56s ease;
}
.vb-vertical-slide {
height: 650px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
gap: 34px;
align-items: center;
padding: 42px;
}
.vb-vertical-copy > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
color: #bfdbfe !important;
-webkit-text-fill-color: #bfdbfe !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-vertical-copy h4 {
max-width: 720px;
margin: 0 0 16px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(38px, 5vw, 72px) !important;
line-height: 0.98 !important;
font-weight: 950 !important;
letter-spacing: -0.085em;
}
.vb-vertical-copy p {
max-width: 620px;
margin: 0 0 26px !important;
color: #d1d5db !important;
-webkit-text-fill-color: #d1d5db !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-vertical-copy a {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 13px 18px;
border-radius: 999px;
background: #60a5fa;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-vertical-visual {
min-height: 460px;
padding: 28px;
border-radius: 34px;
overflow: hidden;
box-shadow: 0 30px 90px rgba(0,0,0,0.28);
}
.vb-vertical-visual-a {
background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
}
.vb-vertical-visual-b {
background: linear-gradient(135deg, #7c3aed, #db2777) !important;
}
.vb-vertical-visual-c {
background: linear-gradient(135deg, #10b981, #0f766e) !important;
}
.vb-vertical-panel {
height: 100%;
min-height: 404px;
padding: 26px;
border-radius: 28px;
background: rgba(255,255,255,0.86) !important;
border: 1px solid rgba(255,255,255,0.42);
}
.vb-vertical-panel::before {
content: "";
display: block;
height: 180px;
margin-bottom: 24px;
border-radius: 24px;
background:
radial-gradient(circle at 24% 26%, rgba(15, 23, 42, 0.18), transparent 26%),
linear-gradient(135deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.04));
}
.vb-vertical-panel span {
display: block;
height: 18px;
margin-bottom: 14px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.13);
}
.vb-vertical-panel span:nth-child(2) {
width: 78%;
}
.vb-vertical-panel span:nth-child(3) {
width: 54%;
}
.vb-vertical-controls {
display: flex;
justify-content: space-between;
gap: 14px;
margin-top: 18px;
}
.vb-vertical-controls button {
min-height: 48px;
padding: 12px 18px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 999px;
background: rgba(255,255,255,0.08);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
cursor: pointer;
}
@media (max-width: 980px) {
.vb-vertical-slider {
grid-template-columns: 1fr;
}
.vb-vertical-window {
height: 850px;
}
.vb-vertical-slide {
height: 850px;
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.vb-vertical-slider {
padding: 20px;
border-radius: 28px;
}
.vb-vertical-sidebar {
padding: 22px;
}
.vb-vertical-window {
height: 820px;
}
.vb-vertical-slide {
height: 820px;
padding: 24px;
}
.vb-vertical-copy h4 {
font-size: 36px !important;
}
.vb-vertical-visual {
min-height: 330px;
}
.vb-vertical-panel {
min-height: 274px;
}
.vb-vertical-controls {
flex-direction: column;
}
}
This vertical JavaScript slider is useful for hero sections, product stories, onboarding sequences, app previews, feature highlights, and modern landing page sections. It gives the page a different interaction style while still using simple, understandable JavaScript.
30. Complete Responsive Slider Section
A complete responsive slider section combines the most important parts of a practical website carousel: strong heading text, multiple slides, clear controls, dot navigation, active state updates, responsive layout, and copy-paste friendly JavaScript. This final example is a reusable starting point for many real website sections.
This example uses a polished modern landing page layout with large feature slides, visual cards, counters, dots, previous and next controls, and a mobile-friendly structure. You can adapt it for image sliders, product sliders, content carousels, feature sliders, service sections, SaaS layouts, and homepage hero sections.
- Complete responsive JavaScript slider section
- Large slide layout with text, visual card, counter, arrows, and dots
- Responsive desktop and mobile behavior
- Reusable for images, products, features, services, and content
- Full JavaScript, HTML, and CSS code included
JavaScript
(function () {
const slider = document.querySelector("[data-vb-complete-slider]");
if (!slider) return;
const track = slider.querySelector("[data-vb-complete-track]");
const dots = slider.querySelectorAll("[data-vb-complete-dot]");
const prev = slider.querySelector("[data-vb-complete-prev]");
const next = slider.querySelector("[data-vb-complete-next]");
const current = slider.querySelector("[data-vb-complete-current]");
const total = dots.length;
let index = 0;
function updateCompleteSlider(newIndex) {
if (newIndex < 0) {
index = total - 1;
} else if (newIndex >= total) {
index = 0;
} else {
index = newIndex;
}
track.style.transform = "translateX(-" + (index * 100) + "%)";
dots.forEach(function (dot, dotIndex) {
dot.classList.toggle("is-active", dotIndex === index);
});
if (current) {
current.textContent = String(index + 1).padStart(2, "0");
}
}
prev.addEventListener("click", function () {
updateCompleteSlider(index - 1);
});
next.addEventListener("click", function () {
updateCompleteSlider(index + 1);
});
dots.forEach(function (dot) {
dot.addEventListener("click", function () {
updateCompleteSlider(Number(dot.getAttribute("data-vb-complete-dot")));
});
});
})();
HTML
<div class="vb-complete-slider" data-vb-complete-slider>
<div class="vb-complete-header">
<div>
<span>Complete Slider</span>
<h3>Build a responsive JavaScript slider section for modern websites</h3>
<p>This complete example combines a flexible slide track, active dots, arrows, counter updates, responsive spacing, and polished UI styling.</p>
</div>
<div class="vb-complete-count">
<strong data-vb-complete-current>01</strong>
<small>/ 04</small>
</div>
</div>
<div class="vb-complete-window">
<div class="vb-complete-track" data-vb-complete-track>
<section class="vb-complete-slide">
<div class="vb-complete-copy">
<span>Feature Slider</span>
<h4>Explain one important benefit per slide</h4>
<p>Use this complete slider layout for homepage sections, SaaS features, digital products, app screens, or service highlights.</p>
<a href="#javascript-slider-examples">View examples</a>
</div>
<div class="vb-complete-visual vb-complete-visual-a">
<div class="vb-complete-card">
<div class="vb-complete-card-top"></div>
<div class="vb-complete-card-grid">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</section>
<section class="vb-complete-slide">
<div class="vb-complete-copy">
<span>Image Slider</span>
<h4>Replace the visual card with real images</h4>
<p>The same structure can become an image slider, product gallery, portfolio showcase, property slider, or travel destination carousel.</p>
<a href="#responsive-slider-design-tips">Responsive tips</a>
</div>
<div class="vb-complete-visual vb-complete-visual-b">
<div class="vb-complete-card">
<div class="vb-complete-card-top"></div>
<div class="vb-complete-card-grid">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</section>
<section class="vb-complete-slide">
<div class="vb-complete-copy">
<span>Content Carousel</span>
<h4>Use the layout for content, cards, and resources</h4>
<p>You can adapt this section for blog cards, course lessons, pricing cards, testimonials, team members, or resource previews.</p>
<a href="#what-should-a-good-javascript-slider-include">Slider checklist</a>
</div>
<div class="vb-complete-visual vb-complete-visual-c">
<div class="vb-complete-card">
<div class="vb-complete-card-top"></div>
<div class="vb-complete-card-grid">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</section>
<section class="vb-complete-slide">
<div class="vb-complete-copy">
<span>Production Ready</span>
<h4>Keep controls clear, responsive, and easy to customize</h4>
<p>Good sliders are readable, lightweight, accessible, and useful. Use manual controls and avoid hiding important content.</p>
<a href="#javascript-slider-best-practices">Best practices</a>
</div>
<div class="vb-complete-visual vb-complete-visual-d">
<div class="vb-complete-card">
<div class="vb-complete-card-top"></div>
<div class="vb-complete-card-grid">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="vb-complete-bottom">
<div class="vb-complete-dots">
<button type="button" class="is-active" data-vb-complete-dot="0" aria-label="Go to complete slider slide 1"></button>
<button type="button" data-vb-complete-dot="1" aria-label="Go to complete slider slide 2"></button>
<button type="button" data-vb-complete-dot="2" aria-label="Go to complete slider slide 3"></button>
<button type="button" data-vb-complete-dot="3" aria-label="Go to complete slider slide 4"></button>
</div>
<div class="vb-complete-controls">
<button type="button" data-vb-complete-prev aria-label="Previous complete slider slide">←</button>
<button type="button" data-vb-complete-next aria-label="Next complete slider slide">→</button>
</div>
</div>
</div>
CSS
.vb-complete-slider,
.vb-complete-slider * {
box-sizing: border-box;
}
.vb-complete-slider {
margin: 28px 0;
padding: 30px;
border-radius: 38px;
background:
radial-gradient(circle at 14% 16%, rgba(14, 165, 233, 0.18), transparent 30%),
radial-gradient(circle at 86% 18%, rgba(168, 85, 247, 0.18), transparent 32%),
linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
overflow: hidden;
}
.vb-complete-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: end;
margin-bottom: 26px;
}
.vb-complete-header span {
display: inline-flex;
margin-bottom: 13px;
padding: 8px 12px;
border-radius: 999px;
background: #0f172a;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-complete-header h3 {
max-width: 860px;
margin: 0 0 14px !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(34px, 5vw, 66px) !important;
line-height: 1.02 !important;
font-weight: 950 !important;
letter-spacing: -0.075em;
}
.vb-complete-header p {
max-width: 760px;
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.72;
font-weight: 650;
}
.vb-complete-count {
display: grid;
justify-items: end;
}
.vb-complete-count strong {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 54px;
line-height: 0.9;
font-weight: 950;
letter-spacing: -0.08em;
}
.vb-complete-count small {
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 14px;
font-weight: 850;
}
.vb-complete-window {
overflow: hidden;
border-radius: 30px;
background: #0f172a !important;
}
.vb-complete-track {
display: flex;
transform: translateX(0);
transition: transform 0.54s ease;
}
.vb-complete-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
gap: 34px;
align-items: center;
min-height: 620px;
padding: 44px;
}
.vb-complete-copy > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
color: #bfdbfe !important;
-webkit-text-fill-color: #bfdbfe !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vb-complete-copy h4 {
max-width: 720px;
margin: 0 0 16px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(38px, 5vw, 72px) !important;
line-height: 0.98 !important;
font-weight: 950 !important;
letter-spacing: -0.085em;
}
.vb-complete-copy p {
max-width: 620px;
margin: 0 0 26px !important;
color: #d1d5db !important;
-webkit-text-fill-color: #d1d5db !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-complete-copy a {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 13px 18px;
border-radius: 999px;
background: #38bdf8;
color: #082f49 !important;
-webkit-text-fill-color: #082f49 !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-complete-visual {
min-height: 450px;
padding: 28px;
border-radius: 34px;
overflow: hidden;
box-shadow: 0 30px 90px rgba(0,0,0,0.30);
}
.vb-complete-visual-a {
background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
}
.vb-complete-visual-b {
background: linear-gradient(135deg, #f97316, #db2777) !important;
}
.vb-complete-visual-c {
background: linear-gradient(135deg, #10b981, #0f766e) !important;
}
.vb-complete-visual-d {
background: linear-gradient(135deg, #7c3aed, #312e81) !important;
}
.vb-complete-card {
height: 100%;
min-height: 394px;
padding: 26px;
border-radius: 28px;
background: rgba(255,255,255,0.86) !important;
border: 1px solid rgba(255,255,255,0.42);
}
.vb-complete-card-top {
height: 160px;
margin-bottom: 18px;
border-radius: 24px;
background:
radial-gradient(circle at 24% 26%, rgba(15, 23, 42, 0.18), transparent 26%),
linear-gradient(135deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.04));
}
.vb-complete-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.vb-complete-card-grid span {
min-height: 92px;
border-radius: 18px;
background: rgba(15, 23, 42, 0.11);
}
.vb-complete-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-top: 20px;
}
.vb-complete-dots {
display: flex;
gap: 9px;
}
.vb-complete-dots button {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
background: #cbd5e1;
cursor: pointer;
}
.vb-complete-dots button.is-active {
width: 38px;
background: #0f172a;
}
.vb-complete-controls {
display: flex;
gap: 10px;
}
.vb-complete-controls button {
width: 50px;
height: 50px;
border: 0;
border-radius: 999px;
background: #0f172a;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 18px;
font-weight: 950;
cursor: pointer;
}
@media (max-width: 900px) {
.vb-complete-header {
grid-template-columns: 1fr;
}
.vb-complete-count {
justify-items: start;
}
.vb-complete-slide {
grid-template-columns: 1fr;
min-height: 900px;
}
}
@media (max-width: 600px) {
.vb-complete-slider {
padding: 20px;
border-radius: 26px;
}
.vb-complete-slide {
padding: 24px;
min-height: 860px;
}
.vb-complete-copy h4 {
font-size: 36px !important;
}
.vb-complete-visual {
min-height: 330px;
}
.vb-complete-card {
min-height: 274px;
}
.vb-complete-card-top {
height: 110px;
}
.vb-complete-bottom {
flex-direction: column;
align-items: flex-start;
}
}
This complete responsive JavaScript slider section is a flexible starting point for image sliders, product showcases, content carousels, feature sections, portfolio sliders, service blocks, and modern homepage layouts. It includes the essential structure most practical website sliders need: slides, track movement, active dots, counter updates, arrow controls, and responsive styling.
JavaScript Slider Best Practices
JavaScript sliders are powerful, but they should be used with purpose. A slider should help visitors discover important content, compare items, browse visuals, or move through a sequence. It should not hide critical information, make navigation confusing, or slow down the page. The best JavaScript slider examples use simple logic, clear controls, readable content, and responsive layouts that work well on desktop and mobile screens.
When you build a slider, think about the user first. A visitor should immediately understand what the slider shows, how many slides are available, how to move forward or backward, and what action they can take. This is especially important for product sliders, hero sliders, content carousels, testimonial sliders, and image galleries where hidden content can easily be missed.
For accessibility, every slider button should use a real <button> element instead of a clickable <div>. Buttons should have useful aria-label text, especially when they only contain an arrow icon. If your slider uses autoplay, give users a way to pause it or avoid autoplay completely when the content contains longer text.
- Use unique class names for every slider example or reusable component to prevent CSS and JavaScript conflicts.
- Keep slide logic simple by tracking the current index and updating the transform value.
- Use semantic HTML where possible, such as
<section>,<article>, headings, paragraphs, buttons, and links. - Make buttons touch-friendly with enough width, height, spacing, and contrast for mobile users.
- Optimize real images before using them in image sliders, hero sliders, travel sliders, portfolio sliders, or product galleries.
- Do not hide essential content only inside later slides if it is important for SEO, accessibility, or conversions.
- Test several screen sizes because slider layouts often break when long headings or large images are used.
A strong slider should support the page goal. For example, a product slider should help users compare items, a testimonial slider should build trust, a hero slider should guide attention to important campaigns, and an image slider should make visual browsing easier. If the slider does not improve the user experience, a static section may be a better choice.
Responsive Slider Design Tips
Responsive design is one of the most important parts of any JavaScript slider. A desktop carousel may look impressive with large cards, wide images, and multi-column layouts, but the same structure can become difficult to use on mobile if the slide width, text size, buttons, or spacing are not adjusted correctly.
Most responsive JavaScript sliders need different layout decisions for desktop, tablet, and mobile. A desktop slider can show large visuals beside text, while a mobile slider may need to stack content vertically. A card carousel can show three or four cards on desktop, but one card at a time on mobile. A fullscreen slider may need shorter text and stronger button placement on smaller screens.
- Use flexible widths such as percentages,
minmax(),clamp(), and responsive grid columns. - Reduce slide height on smaller screens when visual cards or image panels become too tall.
- Stack text and visuals when a two-column desktop slider becomes too narrow.
- Keep controls outside crowded content so arrows and dots do not cover important text or images.
- Use readable text sizes instead of shrinking headings too much on mobile.
- Test long content because real product names, article titles, testimonials, and service descriptions may be longer than demo text.
- Give previews enough height so image sliders, portfolio sliders, and product sliders still look intentional on mobile.
When you add real images to these JavaScript slider examples, use optimized WebP or compressed images whenever possible. A slider with several large unoptimized images can quickly become one of the heaviest parts of the page. For WordPress websites, make sure your images have proper dimensions, descriptive alt text, lazy loading where appropriate, and enough contrast if text is placed over images.
Common JavaScript Slider Mistakes
Many website sliders look good in a demo but fail in real projects because the content is too long, controls are unclear, images are too heavy, autoplay is too fast, or the mobile layout is not tested. These mistakes can hurt usability, conversions, page speed, and accessibility.
- Do not use a slider when a static grid is clearer. Product cards, blog posts, and pricing options sometimes work better when all items are visible.
- Do not remove manual controls. Even if autoplay is enabled, users should be able to move forward and backward themselves.
- Do not rely only on color for active states. Use size, shape, text, counters, or other visual cues when possible.
- Do not let slides jump in height. Sudden layout shifts can make the page feel unstable.
- Do not use generic class names. Names like
.slider,.slide, and.buttoncan conflict with WordPress themes or other plugins. - Do not forget accessibility labels. Arrow buttons should have meaningful labels for screen readers.
- Do not test only the first slide. Every slide needs to work with real content, links, buttons, and responsive behavior.
The safest approach is to start with a simple slider, test it carefully, and add advanced features only when they improve the experience. In many cases, a lightweight vanilla JavaScript slider is easier to maintain than a heavy slider library, especially for small website sections.
JavaScript Slider FAQ
Here are common questions about JavaScript sliders, image sliders, content carousels, responsive sliders, and slider UI patterns for modern websites.
Conclusion
JavaScript sliders are still one of the most useful interactive UI patterns for modern websites when they are designed carefully. They can help you build image sliders, product carousels, testimonial sliders, content sliders, portfolio showcases, app screenshot sliders, travel destination sliders, course lesson sliders, real estate sliders, process sliders, and complete responsive website sections.
The key is to use sliders where they improve the experience. A good JavaScript slider should be readable, responsive, easy to control, lightweight, accessible, and visually connected to the rest of the website. It should not hide important content or force visitors to wait for autoplay. The examples in this guide give you a practical starting point for many real projects, from simple image sliders to complete responsive slider sections.
If you are building a WordPress website, landing page, SaaS homepage, ecommerce product section, blog layout, portfolio, or service page, you can start with one of these examples and customize the content, colors, images, buttons, and JavaScript logic for your own design. For more frontend inspiration, continue with the related guides below.
Related JavaScript and CSS Guides
These related guides can help you continue building modern website sections with JavaScript, CSS, responsive layouts, animations, cards, buttons, heroes, and UI components.
Next, you can adapt these JavaScript slider examples into real website sections by replacing the demo text with your own content, adding real images, connecting product links, or reusing the slider logic inside WordPress templates, Gutenberg blocks, landing pages, or custom frontend components.
