Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.05.2021, 19:22
Интересующийся
Отправить личное сообщение для Angelinasen Посмотреть профиль Найти все сообщения от Angelinasen
 
Регистрация: 22.04.2021
Сообщений: 20

Слайдер на Jquery
Добрый день! у меня есть слайдер. каждый слайд это картинка и абсолютно позиционированные текст и кнопка на ней. Я могу использовать слик слайдер? И как мне вернуть текст, так как после подключения слик слайдера он не отображается(( или какой лучше слайдер использовать (именно Jquery)
Ответить с цитированием
  #2 (permalink)  
Старый 08.05.2021, 19:43
Интересующийся
Отправить личное сообщение для Angelinasen Посмотреть профиль Найти все сообщения от Angelinasen
 
Регистрация: 22.04.2021
Сообщений: 20

jquery слайдер
Текст нашелся. Подскажите чтобы активная точка (dot) меняла свой цвет? Если активен слайд 1, тогда первая точка меняет цвет и тд?
Ответить с цитированием
  #3 (permalink)  
Старый 08.05.2021, 19:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Angelinasen,
Ответить с цитированием
  #4 (permalink)  
Старый 09.05.2021, 20:38
Интересующийся
Отправить личное сообщение для Angelinasen Посмотреть профиль Найти все сообщения от Angelinasen
 
Регистрация: 22.04.2021
Сообщений: 20

jquery слайдер
и я поместила слайдер в контейнер....можно ли как-то сделать чтобы он выходил за пределы контейнера но только с правой стороны....
Ответить с цитированием
  #5 (permalink)  
Старый 09.05.2021, 20:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Angelinasen,
из письма на деревню дедушке ... а код будет? или там ссылки ... песочница ... или тут
например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 09.05.2021, 23:56
Интересующийся
Отправить личное сообщение для Angelinasen Посмотреть профиль Найти все сообщения от Angelinasen
 
Регистрация: 22.04.2021
Сообщений: 20

jquery слайдер
НЕ..разобралась спасибо))
Ответить с цитированием
  #7 (permalink)  
Старый 12.05.2021, 02:45
Интересующийся
Отправить личное сообщение для Angelinasen Посмотреть профиль Найти все сообщения от Angelinasen
 
Регистрация: 22.04.2021
Сообщений: 20

jquery слайдер
Здравствуйте!
Мне нужно написать небольшой плагин слайдера на JQuery, я сделала переключение слайдов, но есть пагинация. Я сделала чтобы активная точка менялась вместе со слайдом (активная синего, остальные черного). Но, по-моему, это как-то покрасивее можно записать)) перебирать может или как, пока не могу сообразить...)) И как мне сделать чтоб нажимая на точки можно было переключать слайды?)

HTML такого вида

<div class="mySlider__container">
<div class="mySlider__wrapper">
<div class="mySlider__slide">IMAGE</div>
<div class="mySlider__slide">IMAGE</div>
<div class="mySlider__slide">IMAGE</div>
<div class="mySlider__slide">IMAGE</div>
</div>
<ul class="mySlider__dots">
<li><a>DOT</a></li>
<li><a>DOT</a></li>
<li><a>DOT</a></li>
<li><a>DOT</a></li>
</ul>
</div>



(function ($) {

  $.fn.mySlider = function (interval) {

    let container = $('.mySlider__container');
    let slides = $('.mySlider__wrapper').children();
    let dots = container.find('.mySlider__dots li');
    let amount = slides.length;
    let index = 0;

    function changeSlides() {
      $(slides[index]).fadeOut(1000);
      index++;
      if (index >= amount) index = 0;
      $(slides[index]).fadeIn(1000);

      $(dots[index]).addClass('active');
      $(dots[index - 1]).removeClass('active');
      if (index == 0) {
        $(dots[3]).removeClass('active');
      }

      setTimeout(changeSlides, interval);
    }
    setTimeout(changeSlides, interval);
  };
})(jQuery);

Последний раз редактировалось Angelinasen, 12.05.2021 в 02:58.
Ответить с цитированием
  #8 (permalink)  
Старый 12.05.2021, 13:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Angelinasen,
посмотрите пока
https://javascript.ru/forum/events/7...tml#post518270
Ответить с цитированием
  #9 (permalink)  
Старый 12.05.2021, 14:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .mySlider__container {
            display: flex;
            flex-direction: column;
            border: 1px solid #0000FF;
            width: 680px;
            margin: 0px auto;
        }
        .mySlider__wrapper {
            position: relative;
            width: 640px;
            height: 320px;
            overflow: hidden;
            margin: 20px auto;
        }
        .mySlider__wrapper>div {
            display: none;
            position: absolute;
        }
        .mySlider__dots {
            display: flex;
            justify-content: space-between;
            width: 70px;
            margin: 0px auto 15px;
        }
        .mySlider__dots li {
            background-color: #000000;
            border-radius: 50px;
            ;
            width: 10px;
            height: 10px;
            overflow: hidden;
            cursor: default;
            list-style: none;
        }
        .mySlider__dots li.active {
            background-color: #0000FF;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        (function($) {
            $.fn.mySlider = function(interval) {
                let container = $('.mySlider__container');
                let slides = $('.mySlider__wrapper > div');
                let dots = container.find('.mySlider__dots li');
                let amount = slides.length;
                let index = amount - 1;
                let timer;
                let auto = true;
                dots.each((i, el) => $(el).on('click', _ => {
                    auto = false;
                    changeSlides(i - index);
                }))
                function changeSlides(i = 1) {
                    window.clearTimeout(timer);
                    $(slides[index]).fadeOut(300);
                    $(dots[index]).removeClass('active');
                    index = (amount + index + i) % amount;
                    $(slides[index]).delay(100).fadeIn(1000);
                    $(dots[index]).addClass('active');
                    if (auto) timer = setTimeout(changeSlides, interval);
                }
                container.mouseleave(function() {
                    if (!auto) {
                        auto = true;
                        changeSlides();
                    }
                })
                changeSlides()
            };
        })(jQuery);
        $(function() {
            $.fn.mySlider(3000)
        });
    </script>
</head>
<body>
    <div class="mySlider__container">
        <div class="mySlider__wrapper">
            <div class="mySlider__slide"><img src="https://picsum.photos/640/320?1"></div>
            <div class="mySlider__slide"><img src="https://picsum.photos/640/320?2"></div>
            <div class="mySlider__slide"><img src="https://picsum.photos/640/320?3"></div>
            <div class="mySlider__slide"><img src="https://picsum.photos/640/320?4"></div>
        </div>
        <ul class="mySlider__dots">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

Последний раз редактировалось рони, 12.05.2021 в 14:08.
Ответить с цитированием
  #10 (permalink)  
Старый 13.05.2021, 21:52
Интересующийся
Отправить личное сообщение для Angelinasen Посмотреть профиль Найти все сообщения от Angelinasen
 
Регистрация: 22.04.2021
Сообщений: 20

jquery слайдер
Очень классно! СПасибо большое
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Просмотрела исходик jQuery Откорректируйте где не верно taksebe jQuery 5 23.11.2018 22:42
GSAP слайдер без jquery возможно ли? Aleksanderj Библиотеки/Тулкиты/Фреймворки 5 19.09.2015 03:05
Jquery ui-slider & Jquery selectbox, Слайдер срабатывает всего 1 раз Micher jQuery 4 31.01.2014 13:07
Слайдер с помощью CSS и jQuery - 1000 р. stixia007 jQuery 21 27.03.2013 22:44
jQuery UI Slider - как синхронизировать слайдер со значнием? frightened jQuery 0 24.07.2011 00:19