Image Slider
jQuery
21 October 2023
Learn to create beautiful image slider using only HTML, CSS and jQuery
DEMO
Setup
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
HTML
<div class="image-slider-container">
<div class="image-slider-container-backdrop">
<div class="container-fluid h-100">
<div class="image-slider-container-wrapper">
<div class="image-slider-container-wrapper-left"></div>
<div class="prev-place-btn-container">
<div class="prev-place-btn">
<span
class="iconify"
data-icon="ic:round-navigate-next"
data-flip="horizontal"
></span>
</div>
</div>
<div class="image-slider-container-wrapper-right"></div>
<div class="auto-play">
<div class="auto-play-item main">Play</div>
</div>
<div class="next-place-btn-container">
<div class="next-place-btn">
<span class="iconify" data-icon="ic:round-navigate-next"></span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.image-slider-container {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
transition: background-image .2s;
position: relative;
scroll-snap-type: y mandatory;
}
.image-slider-container:after {
position: absolute;
content: attr(data-content);
right: 15px;
bottom: 0;
top: 0;
left: 0;
color: #FFFFFF;
z-index: 0;
font-family: 'Londrina Outline', cursive;
font-size: 100px;
line-height: 120px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.image-slider-container-backdrop {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.582);
color: #FFFFFF;
position: relative;
z-index: 1;
}
.image-slider-container-wrapper {
display: flex;
height: 100%;
padding: 6px 0;
}
.image-slider-container-wrapper-left {
width: 50%;
height: 100%;
}
.image-slider-container-wrapper-right {
width: 50%;
height: 100%;
}
.image-slider-container-wrapper-right {
display: flex;
align-items: center;
overflow: hidden;
transition: all .3s ease-in;
padding: 0 0 0 20px;
}
.image-slider-container-wrapper-right-item {
min-width: 250px;
margin: 0 8px;
transition: all .3s ease-in-out, .3s opacity, .3s width;
}
.image-slider-container-wrapper-right-item.active {
min-width: 0;
margin: 0;
}
.image-slider-container-wrapper-right-item.next {
min-width: 300px;
cursor: pointer;
}
.image-slider-container-wrapper-right-item.next .image-slider-container-wrapper-right-item-img {
height: 450px;
}
.image-slider-container-wrapper-right-item-img {
width: 100%;
height: 350px;
border-radius: 3px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: all .3s ease-in-out;
}
.image-slider-container-wrapper-right-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
.prev-place-btn-container {
display: none;
}
.next-place-btn-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 20px;
bottom: 0;
top: 0;
}
.next-place-btn {
border-radius: 6px;
cursor: pointer;
user-select: none;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #FFFFFF;
color: #000000;
}
.next-place-btn .iconify {
width: 40px;
height: 40px;
border-radius: 50%;
}
.next-place-btn:hover {
background-color: var(--theme_color);
transition: .3s background-color;
color: #FFFFFF;
}
.prev-place-btn-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
bottom: 0;
top: 0;
}
.prev-place-btn {
border-radius: 6px;
cursor: pointer;
user-select: none;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #FFFFFF;
color: #000000;
}
.prev-place-btn .iconify {
width: 40px;
height: 40px;
border-radius: 50%;
}
.prev-place-btn:hover {
background-color: var(--theme_color);
transition: .3s background-color;
color: #FFFFFF;
}
.image-slider-container-position {
position: absolute;
right: 15px;
top: 0;
font-family: 'Londrina Outline', cursive;
font-size: 24px;
user-select: none;
}
.image-slider-container-position .current {
font-size: 42px;
}
.auto-play {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
position: fixed;
z-index: 1;
top: 10px;
right: 10px;
user-select: none;
}
.auto-play-item {
cursor: pointer;
}
.auto-play-item.main {
border: 1px solid #FFFFFF;
border-radius: 15px;
padding: 2px 10px;
}
@media (max-width: 991px) {
.image-slider-container-wrapper {
flex-direction: column;
justify-content: space-between;
}
.image-slider-container-wrapper-left {
width: 100%;
height: auto;
padding-top: 50px;
}
.image-slider-container-wrapper-right {
width: 100%;
height: auto;
}
.image-slider-container-details-title {
font-size: 60px;
line-height: 70px;
}
.image-slider-container-wrapper-right {
padding: 0 0 10px 0;
}
.image-slider-container-wrapper-right-item {
min-width: 200px;
}
.image-slider-container-wrapper-right-item-img {
width: 100%;
height: 300px;
}
.image-slider-container-wrapper-right-item.next {
min-width: 200px;
cursor: pointer;
margin-left: 0;
}
.image-slider-container-wrapper-right-item.next .image-slider-container-wrapper-right-item-img {
height: 300px;
}
.next-place-btn-container {
top: 67%;
right: 30px;
}
.prev-place-btn-container {
top: 67%;
left: 30px;
right: initial;
}
.image-slider-container:after {
right: 0;
top: 0;
left: 15px;
line-height: 110px;
justify-content: flex-start;
align-items: flex-start;
}
}
@media (max-width: 679px) {
.image-slider-container-wrapper-right {
padding-bottom: 8vh;
}
.image-slider-container-wrapper-right-item {
min-width: 150px;
}
.image-slider-container-wrapper-right-item-img {
width: 100%;
height: 200px;
}
.image-slider-container-wrapper-right-item.next {
min-width: 150px;
}
.image-slider-container-wrapper-right-item.next .image-slider-container-wrapper-right-item-img {
height: 200px;
}
.next-place-btn-container {
top: 63%;
}
.prev-place-btn-container {
top: 63%;
}
}
Javascript
const images = [
"https://images.unsplash.com/photo-1697469994783-b12bbd9c4cff?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1697451964285-efa976c9178b?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1697230188928-fb36c4964bf7?auto=format&fit=crop&q=80&w=3387&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1685350767266-a0fc514fb41e?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1697581886387-a8b3af94ef0b?auto=format&fit=crop&q=80&w=3451&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1697487957555-5f8df6a965f6?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1697638332749-da3ba4046082?auto=format&fit=crop&q=80&w=3542&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1694250990115-ca7d9d991b24?auto=format&fit=crop&q=80&w=3395&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1697386576502-812fce23b209?auto=format&fit=crop&q=80&w=3328&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1697716080597-be01c4946985?auto=format&fit=crop&q=80&w=3475&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1697554521121-3a3cda83105a?auto=format&fit=crop&q=80&w=3264&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1697485538022-766751333c4f?auto=format&fit=crop&q=80&w=3432&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1619807811096-7d0584eedecf?auto=format&fit=crop&q=80&w=3008&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
]
const imageList = $('.image-slider-container-wrapper-right')
let interval = ''
$(function () {
$(imageList).html(
images.map((img) => {
return `<div class="image-slider-container-wrapper-right-item" data-image="${img}">
<div class="image-slider-container-wrapper-right-item-img">
<img src="${img}">
</div>
</div>`
}).join('')
)
$('body').on('click', '.image-slider-container-wrapper-right-item.next', function () {
changePlaces($(this), 'next');
});
let explores = $('.image-slider-container');
changePlaces($(explores).find('.image-slider-container-wrapper-right-item')[0], 'next');
$('body').on('click', '.next-place-btn', function () {
let exploreContainer = $(this).parent().parent();
changePlaces($(exploreContainer).find('.image-slider-container-wrapper-right-item.next'), 'next');
});
$('body').on('click', '.prev-place-btn', function () {
let exploreContainer = $(this).parent().parent();
changePlaces($(exploreContainer).find('.image-slider-container-wrapper-right-item:nth-last-child(2)'), 'prev');
});
$('body').on('click', '.auto-play-item.main', function () {
autoPlay($(this).text())
})
})
function changePlaces(place, dir) {
let image = $(place).data('image');
let placeWrapper = $(place).parent();
let exploreContainer = $(placeWrapper).parent().parent().parent().parent();
if (dir == 'next') {
$(placeWrapper).find('.image-slider-container-wrapper-right-item').removeClass('next');
$(place).next().addClass('next');
$(place).addClass('active');
setTimeout(() => {
$(placeWrapper).append($(place));
$(place).removeClass('active');
}, 300);
}
if (dir == 'prev') {
$(placeWrapper).prepend($(place).next());
$(placeWrapper).find('.image-slider-container-wrapper-right-item').first().addClass('active');
setTimeout(() => {
$(placeWrapper).find('.image-slider-container-wrapper-right-item').removeClass('next');
$(placeWrapper).find('.image-slider-container-wrapper-right-item').first().removeClass('active').addClass('next');
});
}
$(exploreContainer).css('background-image', `url(${image})`);
}
function autoPlay(type, speed = 2000) {
const container = $('.auto-play-item.main')
if (type === 'Play') {
$(container).text('Pause')
interval = setInterval(() => {
$('.image-slider-container-wrapper-right-item.next').click()
}, speed);
}
if (type === 'Pause') {
$(container).text('Play')
clearInterval(interval)
}
}
Comments
Leave a Comment
Your email address will not be published.
Categories
You May Also Like
Javascript
Clock
16 August 2024
HTML & CSS
Responsive lightbox
16 August 2024
Javascript
Display pdf as image
16 August 2024
Javascript
Circular Progress Bar
16 August 2024
Javascript
Custom Calendar
16 August 2024
HTML & CSS
Adaptive Navbar
16 August 2024
Javascript
JavaScript Currying
9 March 2024
Javascript
Google reCAPTCHA
24 May 2024
Javascript
Braintree
24 March 2024
jQuery
Image Slider
16 February 2024