Помогите доделать слайдер
Доброго времени суток, помогите доработать слайдер.
Существует проблема, что если не запускать функцию draw два раза подряд, то выводиться будет только одна картинка, как можно решить эту проблему. Код слайдера - https://jsfiddle.net/l_mke/duqmjbfy/ Как можно реализовать хлебные крошки для такого слайдера? |
бесконечная карусель
l_mke,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#slider{
width: 80vw;
height: 80vh;
margin: 0px auto;
position: relative;
border: 3px solid #c0c0c0;
overflow: hidden;
}
.slide_item{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top:0;
transition: all ease-in-out 2s;
float: left;
}
</style>
</head>
<body>
<h1 style="text-align: center;font-size: 40px; margin: 20px 0;">Слайдер</h1>
<div id="slider">
<img src="https://picsum.photos/id/1002/4312/2868" alt="" class="slide_item">
<img src="https://picsum.photos/id/100/2500/1656" alt="" class="slide_item">
<img src="https://picsum.photos/id/1000/5626/3635" alt="" class="slide_item">
</div>
<script>
let slider = document.querySelector('#slider'),
slides = slider.querySelectorAll('.slide_item'),
len = slides.length, index = len - 1, dir = -1;//dir = 1 направление
(function move()
{
slides[index].style.left = ""
index = (index + dir + len) % len;
slider.appendChild(slides[index]);
slides[index].style.left = dir == -1 ? "100%" : "-100%"
window.setTimeout(move, 5000)
})()
</script>
</body>
</html>
|
Цитата:
|
Ну знаете под слайдерами бывает делают навигацию по слайдам, по типу точек
|
слайдер, добавление точечной навигации
l_mke,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<style type="text/css">
#slider {
width: 80vw;
height: 80vh;
margin: 0px auto;
position: relative;
border: 3px solid #c0c0c0;
overflow: hidden;
}
.slide_item {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
transition: all ease-in-out 2s;
float: left;
}
.slider-pagination {
display: flex;
justify-content: center;
}
[data-id] {
background-color: hsl(236, 77%, 45%);
height: 18px;
width: 18px;
border-radius: 50%;
margin: 12px;
line-height: 18px;
text-align: center;
color: hsl(0, 0%, 100%);
}
[data-id]:hover:after,
[data-id].active:after {
content: attr(data-id);
font-size: 12px;
}
</style>
</head>
<body>
<h1 style="text-align: center;font-size: 40px; margin: 20px 0;">Слайдер</h1>
<div id="slider">
<img
src="https://picsum.photos/id/1002/4312/2868"
alt=""
class="slide_item"
/>
<img
src="https://picsum.photos/id/100/2500/1656"
alt=""
class="slide_item"
/>
<img
src="https://picsum.photos/id/1000/5626/3635"
alt=""
class="slide_item"
/>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const slider = document.querySelector('#slider'),
slides = slider.querySelectorAll('.slide_item'),
length = slides.length,
html = Array.from(
{ length },
(v, k) => `<div class="slider-point" data-id="${++k}"></div>`
);
let index = length - 1;
slider.insertAdjacentHTML(
'afterEnd',
`<div class="slider-pagination">${html.join('')}</div>`
);
const points = document.querySelectorAll('.slider-point');
function anim() {
slides[index].style.left = '';
}
document
.querySelector('.slider-pagination')
.addEventListener('click', ({ target }) => {
let id = target.dataset.id;
if (id) {
id -= 1;
if (index == id) return;
points[index].classList.remove('active');
slides[id].style.left = id > index ? '100%' : '-100%';
index = id;
points[index].classList.add('active');
slider.appendChild(slides[index]);
window.setTimeout(anim, 30);
}
});
points[0].click()
});
</script>
</body>
</html>
|
l_mke,
"хлебные крошки", это путь ветки дерева. |
| Часовой пояс GMT +3, время: 10:39. |