Skip to content

Instantly share code, notes, and snippets.

@kkasaei

kkasaei/Version 2

Last active December 7, 2023 20:58
Show Gist options
  • Save kkasaei/c014f519cae4d0f7a40a82cadb317c35 to your computer and use it in GitHub Desktop.
Save kkasaei/c014f519cae4d0f7a40a82cadb317c35 to your computer and use it in GitHub Desktop.
Download ZIP
css-slider
Raw
css-slider
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slideshow</title>
<style>
.card {
height: 200px;
background-color: rgba(0, 0, 0, 0.4);
color: white;
font-size: 40px;
margin: 10px;
flex: 33% 0 0;
}
.cards img {
width: 100%;
object-fit: cover;
}
.cards-wrapper {
display: flex;
transition: ease 0.5s;
}
.display-area {
width: 100%;
overflow-x: hidden;
margin: auto;
position: relative;
}
.dots-wrapper {
display: flex;
justify-content: center;
margin: auto;
}
.dot {
border: none;
background: rgba(0, 0, 0, 0.2);
width: 20px;
height: 20px;
margin: 5px;
border-radius: 50%;
outline: none;
}
.dot:hover {
background: rgba(0, 0, 0, 0.3);
}
.dot.active {
background: rgba(0, 0, 0, 0.5);
}
.arrows {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
z-index: 1;
}
.arrow {
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: ease 0.5s;
border-radius: 50%;
}
.arrow:hover {
background: rgba(0, 0, 0, 0.3);
}
.arrow-left {
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
left: -10px;
}
.arrow-right {
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
right: -5px;
}
</style>
</head>
<body>
<div class="display-area">
<div class="arrows">
<div class="arrow arrow-left">PREV</div>
<div class="arrow arrow-right">NEXT</div>
</div>
<div class="cards-wrapper">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
</div>
</div>
<div class="dots-wrapper">
<button class="dot active"></button>
<button class="dot"></button>
</div>
<script>
// Reviews Slider
document.addEventListener('DOMContentLoaded', () => {
const sliderWrapper = document.querySelector('.cards-wrapper');
const dots = document.querySelectorAll('.dot');
let activeDotNum = 0;
const shiftSlide = (num) => {
let displayArea = sliderWrapper.parentElement.clientWidth;
sliderWrapper.style.transform = `translateX(${-displayArea * num}px)`;
dots[activeDotNum].classList.remove('active');
dots[num].classList.add('active');
activeDotNum = num;
};
dots.forEach((dot, idx) => {
dot.addEventListener('click', () => {
if (idx !== activeDotNum) {
shiftSlide(idx);
}
});
});
document.querySelectorAll('.arrow').forEach(arrow => {
arrow.addEventListener('click', (e) => {
let isPrevArrow = e.target.classList.contains('arrow-left');
if (isPrevArrow && activeDotNum > 0) {
shiftSlide(activeDotNum - 1);
} else if (!isPrevArrow && activeDotNum < dots.length - 1) {
shiftSlide(activeDotNum + 1);
}
});
});
});
</script>
</body>
</html>
Raw
Version 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slideshow</title>
<style>
.card {
height: 200px;
background-color: rgba(0, 0, 0, 0.4);
color: white;
font-size: 40px;
margin: 0;
flex: 33% 0 0;
}
.cards img {
width: 100%;
object-fit: cover;
}
.cards-wrapper {
display: flex;
transition: ease 0.5s;
}
.display-area {
width: 100%;
overflow-x: hidden;
margin: auto;
position: relative;
}
.dots-wrapper {
visibility: hidden;
display: none;
}
.dot {
border: none;
background: rgba(0, 0, 0, 0.2);
width: 20px;
height: 20px;
margin: 5px;
border-radius: 50%;
outline: none;
}
.dot:hover {
background: rgba(0, 0, 0, 0.3);
}
.dot.active {
background: rgba(0, 0, 0, 0.5);
}
.arrows {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
z-index: 1;
}
.arrow {
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: ease 0.5s;
border-radius: 50%;
}
.arrow:hover {
background: rgba(0, 0, 0, 0.3);
}
.arrow-left {
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
left: -10px;
}
.arrow-right {
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
right: -5px;
}
@media (max-width: 768px) {
.card {
flex: 100% 0 0;
}
.arrows {
display: none;
visibility: hidden;
}
.dots-wrapper {
display: flex;
justify-content: center;
margin: auto;
visibility: visible;
}
}
</style>
</head>
<body>
<div class="display-area">
<div class="arrows">
<div class="arrow arrow-left">PREV</div>
<div class="arrow arrow-right">NEXT</div>
</div>
<div class="cards-wrapper">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
</div>
</div>
<div class="dots-wrapper">
<button class="dot active"></button>
<button class="dot"></button>
<button class="dot"></button>
<button class="dot"></button>
<button class="dot"></button>
<button class="dot"></button>
</div>
<script>
// Reviews Slider
document.addEventListener('DOMContentLoaded', () => {
const sliderWrapper = document.querySelector('.cards-wrapper');
const dots = document.querySelectorAll('.dot');
let activeDotNum = 0;
const shiftSlide = (num) => {
console.log(num)
let displayArea = sliderWrapper.parentElement.clientWidth;
console.log(displayArea)
sliderWrapper.style.transform = `translateX(${-displayArea * num}px)`;
console.log(-displayArea * num)
dots[activeDotNum].classList.remove('active');
dots[num].classList.add('active');
activeDotNum = num;
};
dots.forEach((dot, idx) => {
dot.addEventListener('click', () => {
if (idx !== activeDotNum) {
shiftSlide(idx);
}
});
});
document.querySelectorAll('.arrow').forEach(arrow => {
arrow.addEventListener('click', (e) => {
let isPrevArrow = e.target.classList.contains('arrow-left');
if (isPrevArrow && activeDotNum > 0) {
shiftSlide(activeDotNum - 1);
} else if (!isPrevArrow && activeDotNum < dots.length - 1) {
shiftSlide(activeDotNum + 1);
}
});
});
});
</script>
</body>
</html>
Raw
Version 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slideshow</title>
<style>
.card {
height: 200px;
background-color: rgba(0, 0, 0, 0.4);
color: white;
font-size: 40px;
margin: 0;
flex: 33% 0 0;
}
.cards img {
width: 100%;
object-fit: cover;
}
.cards-wrapper {
display: flex;
transition: ease 0.5s;
}
.display-area {
width: 100%;
overflow-x: hidden;
margin: auto;
position: relative;
}
.dots-wrapper {
visibility: hidden;
display: none;
}
.dot {
border: none;
background: rgba(0, 0, 0, 0.2);
width: 20px;
height: 20px;
margin: 5px;
border-radius: 50%;
outline: none;
}
.dot:hover {
background: rgba(0, 0, 0, 0.3);
}
.dot.active {
background: rgba(0, 0, 0, 0.5);
}
.arrows {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
z-index: 1;
}
.arrow {
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: ease 0.5s;
border-radius: 50%;
}
.arrow:hover {
background: rgba(0, 0, 0, 0.3);
}
.arrow-left {
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
left: -10px;
}
.arrow-right {
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
right: -5px;
}
@media (max-width: 768px) {
.card {
flex: 100% 0 0;
}
.arrows {
display: none;
visibility: hidden;
}
.dots-wrapper {
display: flex;
justify-content: center;
margin: auto;
visibility: visible;
}
}
</style>
</head>
<body>
<div class="display-area">
<div class="arrows">
<div class="arrow arrow-left">PREV</div>
<div class="arrow arrow-right">NEXT</div>
</div>
<div class="cards-wrapper">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
</div>
</div>
<div class="dots-wrapper">
<button class="dot active"></button>
<button class="dot"></button>
<button class="dot"></button>
<button class="dot"></button>
<button class="dot"></button>
<button class="dot"></button>
</div>
<script>
function getDotsLength(dots) {
let dotsLength = dots.length;
if (window.innerWidth > 994) {
dotsLength = 2;
} else {
dotsLength = dots.length
}
return dotsLength;
}
// Reviews Slider
document.addEventListener('DOMContentLoaded', () => {
const sliderWrapper = document.querySelector('.cards-wrapper');
const dots = document.querySelectorAll('.dot');
let dotsLength = getDotsLength(dots);
let activeDotNum = 0;
window.addEventListener('resize', () => {
dotsLength = getDotsLength(dots);
});
const shiftSlide = (num) => {
let displayArea = sliderWrapper.parentElement.clientWidth;
sliderWrapper.style.transform = `translateX(${-displayArea * num}px)`;
dots[activeDotNum].classList.remove('active');
dots[num].classList.add('active');
activeDotNum = num;
};
dots.forEach((dot, idx) => {
dot.addEventListener('click', () => {
if (idx !== activeDotNum) {
shiftSlide(idx);
}
});
});
document.querySelectorAll('.arrow').forEach(arrow => {
arrow.addEventListener('click', (e) => {
let isPrevArrow = e.target.classList.contains('arrow-left');
if (isPrevArrow && activeDotNum > 0) {
shiftSlide(activeDotNum - 1);
} else if (!isPrevArrow && activeDotNum < dotsLength - 1) {
shiftSlide(activeDotNum + 1);
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment