<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slick Carousel Demo</title>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Slick CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<!-- Slick JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f7fa;
color: #333;
}
h1, h2 {
text-align: center;
color: #2c3e50;
}
.demo-section {
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 20px;
margin-bottom: 30px;
}
.carousel-item {
height: 200px;
margin: 0 10px;
display: flex !important;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
font-weight: bold;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.carousel-item span {
position: relative;
z-index: 2;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
border-radius: 4px;
}
.custom-arrows .slick-prev:before,
.custom-arrows .slick-next:before {
color: #8e44ad;
}
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 4px;
margin: 15px 0;
overflow-x: auto;
font-family: monospace;
color: #333;
font-size: 14px;
}
.controls {
margin: 15px 0;
text-align: center;
}
button {
background: #3498db;
color: white;
border: none;
padding: 8px 15px;
margin: 0 5px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #2980b9;
}
.slider-nav .item {
cursor: pointer;
padding: 10px;
text-align: center;
}
.slider-nav .item.slick-current {
font-weight: bold;
background: #e0e0e0;
}
</style>
</head>
<body>
<h1>Slick Carousel Demo</h1>
<p style="text-align: center;">Explore different configurations and features of the Slick carousel with Unsplash images</p>
<div class="demo-section">
<h2>Implementation Note</h2>
<p>This demo uses random images from Picsum Photos. Each time you refresh the page, you'll get different images.</p>
<p>The URL format includes a random parameter to ensure unique images for each slide:</p>
<div class="code-block">
https://picsum.photos/800/400?random=1
</div>
</div>
<!-- Basic Carousel -->
<div class="demo-section">
<h2>Basic Carousel</h2>
<div class="basic-carousel basic">
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=1" alt="Random Image 1" />
<span>Slide 1</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=2" alt="Random Image 2" />
<span>Slide 2</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=3" alt="Random Image 3" />
<span>Slide 3</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=4" alt="Random Image 4" />
<span>Slide 4</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=5" alt="Random Image 5" />
<span>Slide 5</span>
</div>
</div>
<div class="code-block">
$('.basic-carousel').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
</div>
</div>
<!-- Multiple Items -->
<div class="demo-section">
<h2>Multiple Items</h2>
<div class="multiple-carousel multiple">
<div class="carousel-item">
<img src="https://picsum.photos/400/300?random=6" alt="Random Image 6" />
<span>Slide 1</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/400/300?random=7" alt="Random Image 7" />
<span>Slide 2</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/400/300?random=8" alt="Random Image 8" />
<span>Slide 3</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/400/300?random=9" alt="Random Image 9" />
<span>Slide 4</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/400/300?random=10" alt="Random Image 10" />
<span>Slide 5</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/400/300?random=11" alt="Random Image 11" />
<span>Slide 6</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/400/300?random=12" alt="Random Image 12" />
<span>Slide 7</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/400/300?random=13" alt="Random Image 13" />
<span>Slide 8</span>
</div>
</div>
<div class="code-block">
$('.multiple-carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
</div>
</div>
<!-- Responsive Display -->
<div class="demo-section">
<h2>Responsive Display</h2>
<div class="responsive-carousel responsive">
<div class="carousel-item">
<img src="https://picsum.photos/300/200?random=14" alt="Random Image 14" />
<span>Slide 1</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/300/200?random=15" alt="Random Image 15" />
<span>Slide 2</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/300/200?random=16" alt="Random Image 16" />
<span>Slide 3</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/300/200?random=17" alt="Random Image 17" />
<span>Slide 4</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/300/200?random=18" alt="Random Image 18" />
<span>Slide 5</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/300/200?random=19" alt="Random Image 19" />
<span>Slide 6</span>
</div>
</div>
<div class="code-block">
$('.responsive-carousel').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 2,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 2,
infinite: true,
dots: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</div>
</div>
<!-- Custom Navigation -->
<div class="demo-section">
<h2>Custom Navigation</h2>
<div class="custom-arrows-carousel custom-arrows">
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=20" alt="Random Image 20" />
<span>Slide 1</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=21" alt="Random Image 21" />
<span>Slide 2</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=22" alt="Random Image 22" />
<span>Slide 3</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=23" alt="Random Image 23" />
<span>Slide 4</span>
</div>
</div>
<div class="controls">
<button class="prev-button">Previous</button>
<button class="next-button">Next</button>
</div>
<div class="code-block">
$('.custom-arrows-carousel').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
});
$('.prev-button').click(function() {
$('.custom-arrows-carousel').slick('slickPrev');
});
$('.next-button').click(function() {
$('.custom-arrows-carousel').slick('slickNext');
});
</div>
</div>
<!-- Autoplay -->
<div class="demo-section">
<h2>Autoplay</h2>
<div class="autoplay-carousel autoplay">
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=24" alt="Random Image 24" />
<span>Slide 1</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=25" alt="Random Image 25" />
<span>Slide 2</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=26" alt="Random Image 26" />
<span>Slide 3</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=27" alt="Random Image 27" />
<span>Slide 4</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=28" alt="Random Image 28" />
<span>Slide 5</span>
</div>
</div>
<div class="controls">
<button class="play-button">Play</button>
<button class="pause-button">Pause</button>
</div>
<div class="code-block">
$('.autoplay-carousel').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
});
$('.pause-button').click(function() {
$('.autoplay-carousel').slick('slickPause');
});
$('.play-button').click(function() {
$('.autoplay-carousel').slick('slickPlay');
});
</div>
</div>
<!-- Synced Sliders -->
<div class="demo-section">
<h2>Synced Sliders</h2>
<div class="slider-for">
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=29" alt="Random Image 29" />
<span>Slide 1</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=30" alt="Random Image 30" />
<span>Slide 2</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=31" alt="Random Image 31" />
<span>Slide 3</span>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=32" alt="Random Image 32" />
<span>Slide 4</span>
</div>
</div>
<div class="slider-nav" style="margin-top: 10px;">
<div class="item">
<img src="https://picsum.photos/100/60?random=33" alt="Thumbnail 1" style="width: 100%; height: 60px; object-fit: cover;" />
</div>
<div class="item">
<img src="https://picsum.photos/100/60?random=34" alt="Thumbnail 2" style="width: 100%; height: 60px; object-fit: cover;" />
</div>
<div class="item">
<img src="https://picsum.photos/100/60?random=35" alt="Thumbnail 3" style="width: 100%; height: 60px; object-fit: cover;" />
</div>
<div class="item">
<img src="https://picsum.photos/100/60?random=36" alt="Thumbnail 4" style="width: 100%; height: 60px; object-fit: cover;" />
</div>
</div>
<div class="code-block">
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
</div>
</div>
<script>
$(document).ready(function(){
// Initialize Basic Carousel
$('.basic-carousel').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
// Initialize Multiple Items Carousel
$('.multiple-carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
// Initialize Responsive Carousel
$('.responsive-carousel').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 2,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 2,
infinite: true,
dots: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
// Initialize Custom Arrows Carousel
$('.custom-arrows-carousel').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
});
// Custom arrows functionality
$('.prev-button').click(function() {
$('.custom-arrows-carousel').slick('slickPrev');
});
$('.next-button').click(function() {
$('.custom-arrows-carousel').slick('slickNext');
});
// Initialize Autoplay Carousel
$('.autoplay-carousel').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
});
// Autoplay controls
$('.pause-button').click(function() {
$('.autoplay-carousel').slick('slickPause');
});
$('.play-button').click(function() {
$('.autoplay-carousel').slick('slickPlay');
});
// Initialize Synced Sliders
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
});
</script>
</body>
</html>
Image
