A Pen by Julia Tokarevskaya on CodePen.
Created
July 6, 2023 22:39
-
-
Save vayser/8df003444a3bb5b7d4163913bec6c5f6 to your computer and use it in GitHub Desktop.
Вебинар. Практика: слайдер c фото
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>Практическое задание: слайдер с фото</title> | |
</head> | |
<body> | |
<main> | |
<section class="slider"> | |
<div class="slider__images"></div> | |
<div class="slider__arrows"> | |
<div class="slider__arrow left">◄</div> | |
<div class="slider__arrow right">►</div> | |
</div> | |
<div class="slider__dots"></div> | |
</section> | |
</main> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let images = [{ | |
url: "https://img.favcars.com/mini/hatch/mini_hatch_2010_wallpapers_14_1280x960.jpg", | |
title: "Mini Cooper черный" | |
}, { | |
url: "https://img.favcars.com/mini/cabrio/mini_cabrio_2009_pictures_5_1280x960.jpg", | |
title: "Mini Cooper красный" | |
}, { | |
url: "https://www.t-r-n.ru/files/modification-images/cb/a8/5c/f9/40061_tmb940.jpg", | |
title: "Mini Cooper синий" | |
}, { | |
url: "https://a.d-cd.net/af41e8cs-960.jpg", | |
title: "Mini Cooper бордовый" | |
}, { | |
url: "https://i1.7fon.org/thumb/m604508.jpg", | |
title: "Mini Cooper белый" | |
}]; | |
function initSlider(options) { | |
if (!images || !images.length) return; | |
options = options || { | |
titles: false, | |
dots: true, | |
autoplay: false | |
}; | |
let sliderImages = document.querySelector(".slider__images"); | |
let sliderArrows = document.querySelector(".slider__arrows"); | |
let sliderDots = document.querySelector(".slider__dots"); | |
initImages(); | |
initArrows(); | |
if (options.dots) { | |
initDots(); | |
} | |
if (options.titles) { | |
initTitles(); | |
} | |
if (options.autoplay) { | |
initAutoplay(); | |
} | |
function initImages() { | |
images.forEach((image, index) => { | |
let imageDiv = `<div class="image n${index} ${index === 0? "active" : ""}" style="background-image:url(${images[index].url});" data-index="${index}"></div>`; | |
sliderImages.innerHTML += imageDiv; | |
}); | |
} | |
function initArrows() { | |
sliderArrows.querySelectorAll(".slider__arrow").forEach(arrow => { | |
arrow.addEventListener("click", function() { | |
let curNumber = +sliderImages.querySelector(".active").dataset.index; | |
let nextNumber; | |
if (arrow.classList.contains("left")) { | |
nextNumber = curNumber === 0? images.length - 1 : curNumber - 1; | |
} else { | |
nextNumber = curNumber === images.length - 1? 0 : curNumber + 1; | |
} | |
moveSlider(nextNumber); | |
}); | |
}); | |
} | |
function initDots() { | |
images.forEach((image, index) => { | |
let dot = `<div class="slider__dots-item n${index} ${index === 0? "active" : ""}" data-index="${index}"></div>`; | |
sliderDots.innerHTML += dot; | |
}); | |
sliderDots.querySelectorAll(".slider__dots-item").forEach(dot => { | |
dot.addEventListener("click", function() { | |
moveSlider(this.dataset.index); | |
}) | |
}) | |
} | |
function moveSlider(num) { | |
sliderImages.querySelector(".active").classList.remove("active"); | |
sliderImages.querySelector(".n" + num).classList.add("active"); | |
if (options.dots) { | |
sliderDots.querySelector(".active").classList.remove("active"); | |
sliderDots.querySelector(".n" + num).classList.add("active"); | |
} | |
if (options.titles) changeTitle(num); | |
} | |
function initTitles() { | |
let titleDiv = `<div class="slider__images-title">${images[0].title}</div>`; | |
sliderImages.innerHTML += cropTitle(titleDiv, 50); | |
} | |
function changeTitle(num) { | |
if (!images[num].title) return; | |
let sliderTitle = sliderImages.querySelector(".slider__images-title"); | |
sliderTitle.innerText = cropTitle(images[num].title, 50); | |
} | |
function cropTitle(title, size) { | |
if (title.length <= size) { | |
return title; | |
} else { | |
return title.substr(0, size) + "..."; | |
} | |
} | |
function initAutoplay() { | |
setInterval(() => { | |
let curNumber = +sliderImages.querySelector(".active").dataset.index; | |
let nextNumber = curNumber === images.length - 1? 0 : curNumber + 1; | |
moveSlider(nextNumber); | |
}, options.autoplayInterval); | |
} | |
} | |
let sliderOptions = { | |
dots: true, | |
titles: true, | |
autoplay: true, | |
autoplayInterval: 5000 | |
}; | |
document.addEventListener("DOMContentLoaded", function() { | |
initSlider(sliderOptions); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
main { | |
display: flex; | |
justify-content: center; | |
} | |
.slider { | |
position: relative; | |
margin: 20px 0; | |
} | |
.slider__images { | |
position: relative; | |
width: 500px; | |
height: 250px; | |
} | |
.slider__images-title { | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
width: 100%; | |
background: rgba(0,0,0,0.5); | |
color: #fff; | |
text-align: center; | |
z-index: 1; | |
padding: 7px 0; | |
} | |
.slider__images .image { | |
background-size: cover; | |
background-position: center center; | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
left: 0; | |
top: 0; | |
opacity: 0; | |
transition: opacity 800ms ease; | |
} | |
.slider__images .image.active { | |
opacity: 1; | |
} | |
.slider__arrows { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
color: #fff; | |
} | |
.slider__arrow { | |
position: absolute; | |
width: 15%; | |
height: 100%; | |
font-size: 20px; | |
text-align: center; | |
cursor: pointer; | |
opacity: 0; | |
background: rgba(0, 0, 0, 0.4); | |
transition: opacity 0.4s ease; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.slider__arrow:hover { | |
opacity: 1; | |
} | |
.slider__arrow.left { | |
left: 0; | |
} | |
.slider__arrow.right { | |
right: 0; | |
} | |
.slider__dots { | |
display: flex; | |
justify-content: center; | |
position: absolute; | |
left: 0; | |
bottom: -20px; | |
width: 100%; | |
} | |
.slider__dots-item { | |
width: 10px; | |
height: 10px; | |
background: #ccc; | |
border-radius: 50%; | |
margin: 0 5px; | |
cursor: pointer; | |
transition: background 0.4s ease; | |
} | |
.slider__dots-item:hover, .slider__dots-item.active { | |
background: #000; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment