Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2019, 12:36
Интересующийся
Отправить личное сообщение для l_mke Посмотреть профиль Найти все сообщения от l_mke
 
Регистрация: 30.06.2019
Сообщений: 18

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

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

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

Как можно реализовать хлебные крошки для такого слайдера?
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2019, 13:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

бесконечная карусель
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от l_mke
Как можно реализовать хлебные крошки для такого слайдера?
???
Ответить с цитированием
  #4 (permalink)  
Старый 23.08.2019, 11:23
Интересующийся
Отправить личное сообщение для l_mke Посмотреть профиль Найти все сообщения от l_mke
 
Регистрация: 30.06.2019
Сообщений: 18

Ну знаете под слайдерами бывает делают навигацию по слайдам, по типу точек
Ответить с цитированием
  #5 (permalink)  
Старый 23.08.2019, 13:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

слайдер, добавление точечной навигации
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>
Ответить с цитированием
  #6 (permalink)  
Старый 23.08.2019, 13:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите подружить слайдер с input Alex57B Элементы интерфейса 17 19.10.2016 12:28
Помогите пожалуйста сделать мне такой слайдер на страничке Misha Vigdarov Элементы интерфейса 0 18.09.2016 17:45
Помогите доделать слайдер malevi4 Общие вопросы Javascript 3 23.05.2015 23:18
Слайдер - карусель блоков (помогите пожалуйста) Viktor.Poberezhniy Общие вопросы Javascript 3 22.07.2014 12:46
Помогите плизз доделать слайдер olehpdatu Элементы интерфейса 2 02.07.2013 23:01