D4mations.com

Уроки JavaScript Практика #8 Как сделать слайдер (Carousel)



В этом уроке мы рассмотрим как сделать собственноручно самому слайдер ( Carousel) на языке программирования JavaScript

Изображения которые я использовал в уроке: https://vk.com/developblog?w=wall-110872645_201

========================================================
ПОДПИШИСЬ на канал “Web Developer Blog” – https://goo.gl/Ai4OGa
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика – https://goo.gl/rxsyeX
Основы JavaScript – https://goo.gl/Cw7Vqv
Уроки Bootstrap 4 – https://goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 – https://goo.gl/Yi2jfc
Рубрика “Основы за 10 минут” – https://goo.gl/QIvpDD
Верстка сайта на Foundation 6 – https://goo.gl/gVS45o
Основы препроцессора SASS – https://goo.gl/f4BDww
Уроки по Sublime text 3 – https://goo.gl/SjiKM2
Видео про заработок на YouTube – https://goo.gl/VxdirI
Создаем интернет магазин на PrestaShop – https://goo.gl/jop7M4
Уроки jQuery – https://goo.gl/xPnZE9
========================================================

ПОДПИШИСЬ на Группу Вконтакте “Web Developer Blog” – https://goo.gl/6mO5GL
========================================================
Мой заработок на YOUTUBE – ►https://goo.gl/C8Jzpv

Original source

d4mer

, , , , , , , , , , ,

48 responses to “Уроки JavaScript Практика #8 Как сделать слайдер (Carousel)”

  1. Вот ты Лох не пробуйте Не работает я учусь в курсе уже 1.5 года я знаю: HTML5 , CSS3 , BOOTSTRAP , JS … А он Даже Не может нормально Здесь Bootstrap Carousel ( Slider ) Сделать… Короче Говоря, Ты Лошара …

  2. С addEventListener и remove
    let prev = document.querySelector('.prev');
    let next = document.querySelector('.next');
    let slides = document.querySelectorAll('.mySlides');
    let dots = document.querySelectorAll('.dot');
    let slideIndex = 1;

    prev.addEventListener('click', () => showSlides(slideIndex += -1));
    next.addEventListener('click', () => showSlides(slideIndex += 1));

    showSlides();

    function currentSlide(index) {
    choiseIndex(index);
    }

    function showSlides() {
    if (slideIndex > slides.length) {
    slideIndex = 1;
    }
    if (slideIndex < 1) {
    slideIndex = slides.length
    }
    choiseIndex(slideIndex);
    }

    function choiseIndex(inx) {
    for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none';
    }
    for (let i = 0; i < dots.length; i++) {
    dots[i].classList.remove('active');
    }
    dots[inx – 1].classList.add('active')
    slides[inx – 1].style.display = 'block';
    }
    for (let i = 0; i < dots.length; i++) {
    dots[i].addEventListener('click', () => currentSlide(i + 1))
    }

  3. У тебя во всех видосах ошибок over 1000, because ты не шаришь в этих языках как следует, чтобы их обозревать! Пока кодил одновременно исправлял ошибки прям по твоим пятам. А те ошибки, которые ты нашёл в js в конце видео – это лишь их малая часть! Итог: дизлайк! И да, путем многих собственных усилий, я все-таки смог сделать этот сука слайдер!

  6. "Урок" – просто пиздец, нихуя не понятно, что к чему, так автор ещё и сам с ошибками написал, а исправив их не то что не рассказал где они были, даже не включил css например чтобы их можно было хотябы увидеть и сравнить…
    Вот готовые коды:
    html:
    <div class="slideshow-container">

    <!– Full-width images with number and caption text –>

    <div class="mySlides fade">

    <div class="numbertext">1 / 3</div>

    <img src="image/1.jpg" style="width:100%">

    <div class="text">Caption Text</div>

    </div>

    <div class="mySlides fade">

    <div class="numbertext">2 / 3</div>

    <img src="image/2.jpg" style="width:100%">

    <div class="text">Caption Two</div>

    </div>

    <div class="mySlides fade">

    <div class="numbertext">3 / 3</div>

    <img src="image/3.jpg" style="width:100%">

    <div class="text">Caption Three</div>

    </div>

    <!– Next and previous buttons –>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    </div>

    <br>

    <!– The dots/circles –>

    <div style="text-align:center">

    <span class="dot" onclick="currentSlide(1)"></span>

    <span class="dot" onclick="currentSlide(2)"></span>

    <span class="dot" onclick="currentSlide(3)"></span>

    </div>

    </div>

    css:&

    * {box-sizing:border-box}

    /* Slideshow container */

    .slideshow-container {

    max-width: 1000px;

    position: relative;

    margin: auto;

    }

    /* Hide the images by default */

    .mySlides {

    display: none;

    }

    /* Next & previous buttons */

    .prev, .next {

    cursor: pointer;

    position: absolute;

    top: 50%;

    width: auto;

    margin-top: -22px;

    padding: 16px;

    color: white;

    font-weight: bold;

    font-size: 18px;

    transition: 0.6s ease;

    border-radius: 0 3px 3px 0;

    user-select: none;

    }

    /* Position the "next button" to the right */

    .next {

    right: 0;

    border-radius: 3px 0 0 3px;

    }

    /* On hover, add a black background color with a little bit see-through */

    .prev:hover, .next:hover {

    background-color: rgba(0,0,0,0.8);

    }

    /* Caption text */

    .text {

    color: #f2f2f2;

    font-size: 15px;

    padding: 8px 12px;

    position: absolute;

    bottom: 8px;

    width: 100%;

    text-align: center;

    }

    /* Number text (1/3 etc) */

    .numbertext {

    color: #f2f2f2;

    font-size: 12px;

    padding: 8px 12px;

    position: absolute;

    top: 0;

    }

    /* The dots/bullets/indicators */

    .dot {

    cursor: pointer;

    height: 15px;

    width: 15px;

    margin: 0 2px;

    background-color: #bbb;

    border-radius: 50%;

    display: inline-block;

    transition: background-color 0.6s ease;

    }

    .active, .dot:hover {

    background-color: #717171;

    }

    /* Fading animation */

    .fade {

    -webkit-animation-name: fade;

    -webkit-animation-duration: 1.5s;

    animation-name: fade;

    animation-duration: 1.5s;

    }

    @-webkit-keyframes fade {

    from {opacity: .4}

    to {opacity: 1}

    }

    @keyframes fade {

    from {opacity: .4}

    to {opacity: 1}

    }

    JS:

    $(document).ready(function(){

    var slideIndex = 1;

    showSlides(slideIndex);

    // Next/previous controls

    function plusSlides(n) {

    showSlides(slideIndex += n);

    }

    // Thumbnail image controls

    function currentSlide(n) {

    showSlides(slideIndex = n);

    }

    function showSlides(n) {

    var i;

    var slides = document.getElementsByClassName("mySlides");

    var dots = document.getElementsByClassName("dot");

    if (n > slides.length) {slideIndex = 1}

    if (n < 1) {slideIndex = slides.length}

    for (i = 0; i < slides.length; i++) {

    slides[i].style.display = "none";

    }

    for (i = 0; i < dots.length; i++) {

    dots[i].className = dots[i].className.replace(" active", "");

    }

    slides[slideIndex-1].style.display = "block";

    dots[slideIndex-1].className += " active";

    }

  7. Шо за дичь.

    1.Почему бы просто не пронумеровать названия картинок?
    2.Почему бы не сделать счетчик при помощи JS?
    3.Почему бы вместо ссылок не сделать инпуты?
    4.Почему бы не убрать эту дичь с plusSlides(-1),(1) и просто не сделать 2 функции?
    4.2 Ну,это не совсем недостаток, но ощущение, что ты просто списываешь с листочка, не понимая, что тут творится.
    4.3 ИИЗИИ , ***
    4.4 26 строка – забыл точку :d
    5. ЭТО ЧТО, КОПИПАСТ С W3? Даже до скриптов не добрался, это рекорд, уважаемый!

  22. Мало того, что ты ничего не объясняешь, так еще и заебывает выскакивающая реклама через КАЖДЫЕ ДВЕ минуты. Это наглость какая-то. Из-за отсутствия объяснения приходится самому вникать, концентрироваться, а твоя реклама все портит. Дизлайк. Ты охуел.

  23. У кого еще не работает,поменяйте:
    for (i=0; i <slides.length ; i++){
    slides[i].style.display= "none";
    }

    У него неправильно было написано Style

  24. Бля, в CSS автор пропустил кусок кода и текст просто убегал неизвестно куда, а сам автор даже не указал на свой косяк, в тихую исправил либо просто взял полный текст с того сайта откуда содран весь урок. ЕСЛИ что то исправляете или находите ошибки почему не показываете это, аж бесит по 40 минут строчка за строчкой проверять где же косяк!!!

  25. Вопрос:
    1) Зачем мы создали здесь цикл? Какое отношение имеет .display = "none" вообще ко всему этому ролику и нашей задачи??
    2) "dots[i].className = dots[i].className.replace(" active", "");" – поясни. В твоих дебильных уроках ничего нет. Основы твои смотрел. Тоже не ахти. всё с книги learn.javascript.
    3) slides[slideIndex-1].style.display = "block";

    dots[slideIndex-1].className += " active";
    Вопрос: что это? Почему в dots мы применяем +=? Для чего оно тут? Я знаю что это такое. Я не понимаю зачем оно здесь.
    4) Почему всё скопировано с сатйа? https://www.w3schools.com/howto/howto_js_slideshow.asp
    м?
    5) 8:21 – "плюс, либо же равно" – Вы дебил? Это не "плюс, либо же равно" это называется присваивание со сложением. Я уверен вы и понятия сами не знаете зачем туда поставили в 1 функцию.
    6) И вообще, на 7:54 ты уже объявил вызов функции не создав её, при этом не без никаких объяснений что ты хочешь сделать. Как это всё будет работать и т.п.
    7) Если уж ты просто скопировал, почему ты мучаешь остальную аудиторию и не можешь выслать код? Ты нас за идиотов держишь? Тут большинство знает основы, они не тупые чтобы сразу к практике переходить, но не могут понять толком зачем они именно ЗДЕСЬ надо. Тот же самый пример я указал в пункте 3). Да и объяснять надо всегда, хотя бы что-то – ты же в свою очередь просто пишешь код и говоришь "Надо сделать следующие, надо сделать следующие, надо сделать следующие" – Спасибо вам в шляпу! Всего наилучшего!

  27. БЛИН ЭТО ЖЕ МОЙ САМЫЙ ПЕРВЫЙ СЛАЙДЕР ) ТОЖЕ С W3 ВЗЯЛ ЕГО ГОД НАЗАД КОГДА ДУМАЛ ГДЕ ВЗЯТЬ ДЛЯ ЗАКАЗЧИКА _))))

  31. Гайс, будьте добры, объясните вот полностью механизм всего что тут творится в этой строчке.

    for (i = 0; i < dots.length; i++ ) {
    dots[i].className = dots[i].className.replace("active"," ");
    }

    Я так то всё понял, что мы с помощью этого цикла очищаем весь массив dots от класса active.

    Но просто сама вот эта строчка оч тяжкая мне для понимания.
    dots[i].className = dots[i].className.replace("active"," ");

    ну у меня просто мысль в голове, что dots[i].className.replace("active"," "); должно делать тоже самое, а нет нефига не выходит и я не оч понимаю почему. Особо не ругайтесь, я просто парнишка который постигает науку, заранее спасибо

  32. бред какойто а не урок пойти себе шоль такие уроки делать как будто пересмотрел чужое видио или с листка прочитал сам того незная как обяснить свой урок сложно оч нету никакого понимания учитель тут канешн не очень

  33. Дружище, это классно что ты проматываешь свои запинки, но мне слух режет от таких обрезок – либо не делай обрезки(лучше воспринимается) либо делай, но с паузами

  34. хотел узнать, – а что это за значения <a class="prev" onclick="plusSlides(-1)">&#10094</a> – вот самое &#10094 что такое – что это значит? пока что не как не понял и не где не могу найти
    спасибо!

  36. Сделал один раз – нихуя, сделал второй раз, все просто 1 в 1 – нихуя. Охуенный урок … Пойду на другой канал

  37. Чувак, если ты объясняешь JavaScript, то зачем на половину видео растягивать то, как ты стилизуешь точки под картинкой? Тогда название поменяй на CSS+JavaScript. Все круто, но люди хотят-то JavaScript увидеть в деталях, а не то, как ты CSS код прописываешь.

  39. Подскажите почему когда обновляю страницу все картинки в один столбец расположены, а когда кликаю на кнопки все стает как положено и слайдер начинает работать??

  40. Перепечатать чужой код можно было и без ошибок. Этот не работает. Исправление ошибок, обязательно нужно показывать. Люди время тратят. Выход, срочно добавлять урок 8.1 с исправлениями. Пока минус.

  46. сначала посчитал автора мудаком,
    затем нашёл ошибку в слове Sthyle, должно быть Style
    ну и то что автор нашёл про скобки , должны быть ""

  47. а как можно реализовать в ручную переходы между слайдами только не fade а скажем распад кубиков и так далее ? таких слайдеров валом … wowslider у них много вариантов переходов , но как сделать такие переходы в ручную ?

Leave a Reply