Форум

l_mke · #1 (**permalink**) 22.08.2019, 12:36

Доброго времени суток, помогите доработать слайдер.

Существует проблема, что если не запускать функцию draw два раза подряд, то выводиться будет только одна картинка, как можно решить эту проблему.

Код слайдера - https://jsfiddle.net/l_mke/duqmjbfy/

Как можно реализовать хлебные крошки для такого слайдера?

рони · #2 (**permalink**) 22.08.2019, 13:42

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>

рони · #3 (**permalink**) 22.08.2019, 13:43

Сообщение от l_mke

Как можно реализовать хлебные крошки для такого слайдера?

???

l_mke · #4 (**permalink**) 23.08.2019, 11:23

Ну знаете под слайдерами бывает делают навигацию по слайдам, по типу точек

рони · #5 (**permalink**) 23.08.2019, 13:36

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>

laimas · #6 (**permalink**) 23.08.2019, 13:40

l_mke,
"хлебные крошки", это путь ветки дерева.

Форум

Справочник

Discord чат

Курсы javascript