-
Notifications
You must be signed in to change notification settings - Fork 630
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Добавляет рецепт слайдера,исправленный * Update recipes/slider/demos/slider-demo/index.html Co-authored-by: Svetlana Korobtseva <wizzzjer@gmail.com> * Update recipes/slider/demos/slider-demo/index.html Co-authored-by: Svetlana Korobtseva <wizzzjer@gmail.com> * Update recipes/slider/demos/slider-demo/index.html Co-authored-by: Svetlana Korobtseva <wizzzjer@gmail.com> * Update recipes/slider/demos/slider-demo/index.html Co-authored-by: Svetlana Korobtseva <wizzzjer@gmail.com> * добавляет размеры слайдов, убирает rotate * Первый заход с редактированием * Форматирует демку * Я сказала ФОРМАТИРУЕТ демку * Форматирует пример кода * Чинит разметку * Сжимает картинки * Твикает стили * Приносит исправленную демку * Находит упущенное * Добавляет описание картинок, выносит const * Начинает актуализировать примеры * Продолжает актуализировать примеры * Доредачивает вступление, HTML и семантику * Удаляет пробел в конце строки * Чинит * Принимает правки от Алёны Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com> * Вносит новые правки в текст * Добавляет тип к кнопкам в демке * Обновляет индекс раздела * Форматирует JS в демке * Удаляет лишние пробелы * Форматирует JS в тексте * меняет стили на логические * Актуализирует примеры в тексте * Принимает правки от Алёны Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com> * Убирает ненужное `user-select` * Убирает `user-select` из примера * Избавляется от мигания * Актуализирует примеры --------- Co-authored-by: Svetlana Korobtseva <wizzzjer@gmail.com> Co-authored-by: Tatiana Fokina <fokinatatian@gmail.com> Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com>
- Loading branch information
1 parent
87616b2
commit b6832ac
Showing
8 changed files
with
1,020 additions
and
0 deletions.
There are no files selected for viewing
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,270 @@ | ||
<!DOCTYPE html> | ||
<html lang="ru"> | ||
|
||
<head> | ||
<title>Пример слайдера — Слайдер — Дока</title> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link rel="preconnect" href="https://fonts.googleapis.com"> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"> | ||
<style> | ||
*, | ||
*::before, | ||
*::after { | ||
margin: 0; | ||
padding: 0; | ||
box-sizing: border-box; | ||
} | ||
|
||
html { | ||
color-scheme: dark; | ||
} | ||
|
||
body { | ||
min-height: 100vh; | ||
padding: 50px; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
background-color: #18191C; | ||
color: #FFFFFF; | ||
font-family: "Roboto", sans-serif; | ||
} | ||
|
||
h2 { | ||
margin: 20px auto 0; | ||
font-size: 22px; | ||
font-weight: 500; | ||
line-height: 26px; | ||
} | ||
|
||
.controls { | ||
margin-block-end: 20px; | ||
} | ||
|
||
.button { | ||
cursor: pointer; | ||
user-select: none; | ||
} | ||
|
||
.button-radio { | ||
background-color: transparent; | ||
margin: 0; | ||
padding: 0; | ||
inline-size: 15px; | ||
block-size: 15px; | ||
border-radius: 50%; | ||
border: 1px solid #FFFFFF; | ||
} | ||
|
||
.button-radio + .button-radio { | ||
margin-inline-start: 12px; | ||
} | ||
|
||
.button-radio.active { | ||
background-color: #C56FFF; | ||
pointer-events: none; | ||
} | ||
|
||
.button-radio:focus-visible { | ||
outline: 3px solid white; | ||
outline-offset: -1px; | ||
} | ||
|
||
.button-prev, | ||
.button-next { | ||
position: absolute; | ||
top: 50%; | ||
transform: translateY(-50%); | ||
border: none; | ||
inline-size: 30px; | ||
block-size: 42px; | ||
background-color: transparent; | ||
background-image: url(./images/arrow.svg); | ||
background-repeat: no-repeat; | ||
background-size: contain; | ||
} | ||
|
||
.button-prev[aria-disabled="true"], | ||
.button-next[aria-disabled="true"] { | ||
opacity: 0.5; | ||
pointer-events: none; | ||
} | ||
|
||
.button-prev { | ||
inset-inline-start: -50px; | ||
} | ||
|
||
.button-next { | ||
inset-inline-end: -50px; | ||
transform: translateY(-50%) rotateY(180deg); | ||
transform-origin: center; | ||
} | ||
|
||
.slide-img { | ||
display: block; | ||
inline-size: 100%; | ||
block-size: 225px; | ||
max-block-size: 225px; | ||
object-fit: cover; | ||
} | ||
|
||
.slider { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
max-inline-size: 600px; | ||
inline-size: 100%; | ||
position: relative; | ||
} | ||
|
||
.slides { | ||
inline-size: 100%; | ||
} | ||
|
||
.slide { | ||
display: none; | ||
text-align: center; | ||
} | ||
|
||
.slide--active { | ||
display: block; | ||
} | ||
|
||
@media (max-width: 768px) { | ||
body { | ||
padding: 30px; | ||
} | ||
|
||
.slider { | ||
max-inline-size: 260px; | ||
} | ||
|
||
.slide-img { | ||
block-size: 400px; | ||
} | ||
|
||
.button-prev { | ||
inset-inline-start: -40px; | ||
} | ||
|
||
.button-next { | ||
inset-inline-end: -40px; | ||
} | ||
} | ||
</style> | ||
</head> | ||
|
||
<body> | ||
<div class="slider" role="region" aria-label="Паттерны"> | ||
<div class="controls" role="group" aria-label="Управление слайдами"> | ||
<button class="button button-radio" type="button" aria-current="true" aria-label="Показать 1 из 4"> | ||
</button> | ||
<button class="button button-radio" type="button" aria-label="Показать 2 из 4"> | ||
</button> | ||
<button class="button button-radio" type="button" aria-label="Показать 3 из 4"> | ||
</button> | ||
<button class="button button-radio" type="button" aria-label="Показать 4 из 4"> | ||
</button> | ||
|
||
<button aria-label="Предыдущий" class="button button-prev" type="button"></button> | ||
<button aria-label="Следующий" class="button button-next" type="button"></button> | ||
</div> | ||
|
||
<div class="slides" aria-live="polite"> | ||
<div class="slide" role="group" aria-labelledby="item-1-label" id="carousel-item-1"> | ||
<img class="slide-img" src="./images/summer.jpg" alt="Абстрактные цветы розовых, синих, малиновых и оранжевых оттенков на зелёном фоне."> | ||
<h2 id="item-1-label">Паттерн «Лето»</h2> | ||
</div> | ||
<div class="slide" role="group" aria-labelledby="item-2-label" id="carousel-item-2"> | ||
<img class="slide-img" src="./images/flowers.jpg" alt="Цветы с расплывчатыми контурами, похожие на маки. Преобладает розовый, тёмно-зелёный, красный и фиолетовый цвет."> | ||
<h2 id="item-2-label">Паттерн «Цветочное поле»</h2> | ||
</div> | ||
<div class="slide" role="group" aria-labelledby="item-3-label" id="carousel-item-3"> | ||
<img class="slide-img" src="./images/lilac.jpg" alt="Несколько пятен розовых оттенков в форме цветов. На их фоне салатовые, тёмно-зелёные и фисташковые брызги."> | ||
<h2 id="item-3-label">Паттерн «Лиловый»</h2> | ||
</div> | ||
<div class="slide" role="group" aria-labelledby="item-4-label" id="carousel-item-4"> | ||
<img class="slide-img" src="./images/scarlet.jpg" alt="Несколько абстрактных роз в виде пятен алого цвета."> | ||
<h2 id="item-4-label">Паттерн «Алый»</h2> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<script> | ||
document.addEventListener('DOMContentLoaded', function () { | ||
const slider = document.querySelector('.slider') | ||
const slides = slider.querySelectorAll('.slide') | ||
const activeSlides = 'slide--active' | ||
const slideCount = slides.length | ||
const controlButtons = slider.querySelectorAll('.button-radio') | ||
const prevButton = slider.querySelector('.button-prev') | ||
const nextButton = slider.querySelector('.button-next') | ||
const activeButton = 'active' | ||
const inactiveButton = 'aria-disabled' | ||
const currentButton = 'aria-current' | ||
let currentSlide = 0 | ||
|
||
function updateSlider() { | ||
slides.forEach((slide, index) => { | ||
if(index === currentSlide) { | ||
slide.classList.add(activeSlides) | ||
} else { | ||
slide.classList.remove(activeSlides) | ||
} | ||
}) | ||
|
||
controlButtons.forEach((button, index) => { | ||
if (index === currentSlide) { | ||
button.classList.add(activeButton) | ||
button.setAttribute(currentButton, true) | ||
} else { | ||
button.classList.remove(activeButton) | ||
button.removeAttribute(currentButton, true) | ||
} | ||
|
||
prevButton.setAttribute(inactiveButton, currentSlide === 0) | ||
nextButton.setAttribute(inactiveButton, currentSlide === slideCount - 1) | ||
}) | ||
} | ||
|
||
controlButtons.forEach((button, index) => { | ||
button.addEventListener('click', () => { | ||
if (index < slideCount) { | ||
currentSlide = index | ||
updateSlider() | ||
} | ||
}) | ||
}) | ||
|
||
prevButton.addEventListener('click', () => { | ||
if (currentSlide > 0) { | ||
currentSlide-- | ||
updateSlider() | ||
} | ||
}) | ||
|
||
nextButton.addEventListener('click', () => { | ||
if (currentSlide < slideCount - 1) { | ||
currentSlide++ | ||
updateSlider() | ||
} | ||
}) | ||
|
||
slider.addEventListener('keydown', function (event) { | ||
if (event.key === 'ArrowLeft' && currentSlide > 0) { | ||
currentSlide-- | ||
updateSlider() | ||
} else if (event.key === 'ArrowRight' && currentSlide < slideCount - 1) { | ||
currentSlide++ | ||
updateSlider() | ||
} | ||
}) | ||
|
||
updateSlider() | ||
}) | ||
</script> | ||
</body> | ||
|
||
</html> |
Oops, something went wrong.