сделал как у вас и консоль выдает такое. Uncaught ReferenceError: Cannot access 'timer' before initialization at autoSlider. Я переставил вызов функции autoSlider(); после определения переменной timer и все заработало. Переставил обратно перед переменной как у вас - не работает. Почему так?
Спасибо за урок. можете ли сделать урок со слайдером, в котором при прокрутке картинки не возвращались бы к первой а менялись постоянно по кругу и с рабочими кнопками влево вправо, чтобы после нажатия слайдер останавливался?
Спасибо за урок. Вместо setTimeout использовал setInterval. А также удалил clearTimeout и autoslider из функции sliderLeft. И вроде работает аналогично. Еще раз спасибо.
Да, на первый взгляд так и есть. Но если повторить вызов таймера (допустим повторным нажатием на кнопку) то произойдет ускорение таймера и будет явное нарушение работы. Поэтому мы по необходимости останавливаем таймер, и запускаем его снова.
А можно сделать так чтобы он не прокручивал все картинки и опять с первой начинает. А убрать прокрутку чтобы плавно переходил на первую. чтобы не было видно что прокрутилось
Если я в начале размещаю autoSlider(); код выдает пару ошибок типа Не удается получить доступ ... до инициализации... Поставил в конце, все заработало.
Добрый день. Подскажите, пожалуйста. Если не удалять код кнопки left, то при ее нажатии событие как бы прописывается в цикл и начинает повторяться постоянно. То есть каждый цикл таймера вызывает как бы нажатие кнопки. Если кликнуть два раза, то будет срабатывать два раза. Почему так происходит? И как этого избежать, что бы функция кнопки осталась (например пользователь может наблюдать за слайдером в автоматическом режиме, а при желании может кнопкой "проклацать"). Благодарю.
При нажатии происходит событие. Событие вызывает функцию, функция ставиться в очередь. Сколько раз нажали, столько раз поставили в очередь. Чтобы такого не было, нужно отключать событие после клика. Потом, после выполнения функции - включать обратно.
Возможно это глупый вопрос. Но все же. Если поместить глобальные переменные внутрь основной функции, то код уже корректно не работает. Если это долго объяснять, то подскажите, что почитать. Заранее спасибо. Переменную "timer" можно и перенести, но не вторую с начальным положением.
Здравствуйте, подскажите пожалуйста, как можно данный слайдер сделать фоном блока, и чтобы вверху у него было навигационное меню, якобы фиксированным, и слайдер работал под ним как фон? Я пробовал делать менюшке position: fixed; но потом понял что идея не самая лучшая, так как менюшка будет фиксироваться по экрану а не по блоку. Абсолютное позиционирование тоже не хочется применять, чтобы не вырвать менюшку из потока. Посоветуйте пожалуйста как можно поступить? Заранее спасибо Вам за Ваш ответ!
Здравствуйте, спасибо Вам за Ваш ответ! Я перед тем как посоветоваться с Вами, примерно так и делал - общему блоку задавал relative, а менюшке absolute, с z-index:10; и небольшим позиционированием через top и left. Всё работало прекрасно!!! Единственное, что меня смущает, я слышал что нельзя вырывать меню и логотип из потока позиционированием. Правильно ли это? А саму структуру сайта я делаю через bootstrap 4, не даст ли такой подход сбой в работе bootsrap 4, при дальнейшем взаимодействии с сайтом? Заранее спасибо Вам за Ваш ответ и поддержку!
@@itgid Если я посмотрел 20 уроков, если хорошо подумаю, я смогу это сделать сам. Что спрашиваю что-бы время зря не терять. Буду гуглить, перебирать все возможные варианты, а в итоге что - ничего.
что-то не так делаю опять =) row.onmouseover = clearTimeout(timer); row - это полоса из урока. остальное как в уроке. Неверно назначил событие? после toTop = 0; row.onmouseover = clearTimeout(timer);
var slider = document.getElementById('slider'); // если наведёшь на слайдер, то он остановится slider.onmouseover = function() { clearTimeout(timer); }; // если уберешь мышку со слайдера, он вновь запуститься slider.onmouseout = function() { autoSlider(); };
@@romashka7519 я так и прописал в код, то, что вы выше сбросили.) Но у меня теперь появилась проблема: всего 7 картинок загружено (как и в видео), а слайдер двигает картинки до 5-й только, а потом снова к началу. Не подскажете, с чем это связано, в чём причина?
Здравствуйте. Я хочу сделать чтобы слайдер работал как обычно, с помощью кнопок "влево", "вправо" но при нажатии на кнопку "старт" запускался автоматически. у меня всё получилось кроме одного. Я хочу чтобы когда нажимал ещё раз на кнопку старт, слайдер прекратил автоматическое движение. Вот мой код, что посоветуете? document.getElementById('slider-left').onclick = sliderLeft; document.getElementById("slider-right").onclick = sliderRight; document.getElementById("slider-start").onclick = Autoslider; var left = 0; var timer = 0; function sliderLeft() { var polosa = document.getElementById("polosa") left = left - 128; if (left 0) left = -768; polosa.style.left = left + "px"; } // Эта функция полностью не дописана тк я не знаю как её закончить function Autoslider() { timer = 1; function () { if (timer = 1) { timer = setInterval(sliderLeft, 1000); }else {} } }
Alexander Tarasenko в процентах, одна картинка это 100%, width контейнера для картинок 500% к примеру, при прокрутке слайдера контейнер сдвигай на -100%
все это очень круто конечно) мне нравится очень то что вы делаете. и вопросы. почему не сделали чтобы они все кругом ходили? и почему не пользуетесь let?
1. Почему я должен делать чтобы они кругом ходили? Здесь видео для начинающих. А здесь ua-cam.com/video/gBgD9ieCJpE/v-deo.html - более продвинутый уровень и картинки ходят кругом. Второе - как ни странно, но это видео для детей изучающих js. На тот момент детям не преподавали ES6. И babel давать детям как-то странно, если задача "познакомить" с языком. Более того, в данном плейлисте нет ES6 - поскольку другие задачи, да и год 2016.
Переход очень бистро получилось, там объясняете var очень тщательно, а тут сразу зацикливание функции, в принципе интересно но с помощью предыдущих уроков очень трудно понять.
подсказать не проблема. Вычисляем позицию изображения - если оно ушло влево на 2 позиции переносим вправо, если в право - то влево. Удобнее это сделать в виде массива.
Попробовал сделать слайдер снизу вверх. Не могу найти ошибку, ругается консоль, посмотрите пожалуйста. codepen.io/vic4884/pen/oqwGWN?editors=0010 По идее, там ничего особо менять не надо, только направление, не left а top, но не работает. Ошибка оказалась в слове top, js почему-то не дает его использовать в качестве переменной, заменил на toTop, заработало
Извините, никто случаем не сталкивался с проблемой, если брать несколько картинок и чтобы они двигались по очереди, и из за этого обтекание не работает, картинки стоят друг над другом и движется только одна первая, остальные невидимы и находятся под ней. вот код: imgur.com/a/cAQrs6q
взял идею, чуть подправил на флексе и марджинах ибо posr перекрывает тень от меню которая над ним нужна) codepen.io/r1co/pen/EmmyRr вышло очень минимально. до этого думал на jquery делать, но, поскольку делаю для себя а не заказ, то можно не закольцованный слайдер. зато опыт, а не просто плагин) upd: немного танцев с переменной и, возможно, костылей = готовый слайдер с обраткой не зависящий от кол-ва картинок и их размеров, вроде как)) думаю я что-то не знаю и он сломается при каких-то условиях, но как первый норм.
спасибо за классный и интересный код! я вот только не понял почему у функциях slide и slideRev slides.style.marginLeft=-pos+"00"+"%" точней, почему pos в двоих случаях с унарным минусом?
Вот мой полностью Js файл! c двух кнопками + autoSlider autoSlider один круг делает и останавливается дальше по кнопкам. document.getElementById('slider-left').onclick = sliderLeft; autoSlider(); var a; a = 0; var timer; var timer1 = 0; function autoSlider() { timer = setInterval(sliderRight, 350); } function sliderLeft() { var polosa = document.getElementById('polosa'); a = a +128; if (a>0) { a = -512; } polosa.style.left = a+'px'; } document.getElementById('slider-right').onclick = sliderRight; function sliderRight() { var polosa = document.getElementById('polosa') a = a -128; if (a
сделал как у вас и консоль выдает такое. Uncaught ReferenceError: Cannot access 'timer' before initialization
at autoSlider. Я переставил вызов функции autoSlider(); после определения переменной timer и все заработало. Переставил обратно перед переменной как у вас - не работает. Почему так?
Классный лектор. Просто, доступно, приятно на слух.
Ваши уроки мне очень помогают, спасибо !!
Спасибо!
Спасибо за урок. можете ли сделать урок со слайдером, в котором при прокрутке картинки не возвращались бы к первой а менялись постоянно по кругу и с рабочими кнопками влево вправо, чтобы после нажатия слайдер останавливался?
ua-cam.com/video/gBgD9ieCJpE/v-deo.html
Спасибо за урок.
Вместо setTimeout использовал setInterval. А также удалил clearTimeout и autoslider из функции sliderLeft. И вроде работает аналогично.
Еще раз спасибо.
А я немножко не понял про обнуление таймера. Зачем это? Потому что я не заметил изменений до и после его применения...
Обнуление нужно для функции sliderLeft(то есть в autoSlider она вовсе не нужна), для того, чтобы остановить зацикливание и начать прокрутку вручную.
@@Писательназаборе так она есть в sliderLeft() но зацикливание не прекращается
я сделала свой ПЕРВЫЙ СЛАЙДЕР!!!!! Я так РАДА!!!!! Спасибо)))))
Извините, может вопрос покажется глупым. Не пойму какую роль играет функция clearTimeout? мне показалось что с ней и без нее все работает одинаково..
Да, на первый взгляд так и есть. Но если повторить вызов таймера (допустим повторным нажатием на кнопку) то произойдет ускорение таймера и будет явное нарушение работы. Поэтому мы по необходимости останавливаем таймер, и запускаем его снова.
А если кнопки убрать (влево вправо)? То и clearTimeout не нужен?
нужен - ведь он и обрабатывает процесс - вам не надо нажимать на кнопки, а он сам запускает функции
Sergey Styrov, Точно, переместил autoSlider выше, и сработала остановка слайдера после прокрутки..
@@ВячеславКоростин-у2ч I have the same logo xD
Спасибо вам огромное за ваш искренний труд.
А можно сделать так чтобы он не прокручивал все картинки и опять с первой начинает. А убрать прокрутку чтобы плавно переходил на первую. чтобы не было видно что прокрутилось
Если я в начале размещаю autoSlider(); код выдает пару ошибок типа Не удается получить доступ ... до инициализации... Поставил в конце, все заработало.
как сделать смешение в право
Спасибо большое за урок.
все вроде понятно, а вроде нет..Можно как то разбить по блокам какое действие первое выполняется и последующая ...схематично нарисовать?
Круто, спасибо большое за видео
спс большое ти мне и многим людям помог делай видео дальше,у тебя хорошо виходит
Спасибо. Стараюсь!
Вау, ты сделал то что я думал сделать будет очень сложно
нет :)
Всем привет! Благодарю за урок!
Не понял для чего нужен метод clearTimeout..
Я его закоментил, разницы при выводе не заметил.
Добрый день. Подскажите, пожалуйста. Если не удалять код кнопки left, то при ее нажатии событие как бы прописывается в цикл и начинает повторяться постоянно. То есть каждый цикл таймера вызывает как бы нажатие кнопки. Если кликнуть два раза, то будет срабатывать два раза. Почему так происходит? И как этого избежать, что бы функция кнопки осталась (например пользователь может наблюдать за слайдером в автоматическом режиме, а при желании может кнопкой "проклацать"). Благодарю.
При нажатии происходит событие. Событие вызывает функцию, функция ставиться в очередь. Сколько раз нажали, столько раз поставили в очередь. Чтобы такого не было, нужно отключать событие после клика. Потом, после выполнения функции - включать обратно.
спасибо за урок
очень красиво и понятно спасибо лайк.
Возможно это глупый вопрос. Но все же. Если поместить глобальные переменные внутрь основной функции, то код уже корректно не работает. Если это долго объяснять, то подскажите, что почитать. Заранее спасибо. Переменную "timer" можно и перенести, но не вторую с начальным положением.
Почитать области видимости переменных в JavaScript
@@itgid Читал и даже показалось, что понимаю. Я догадался, что в этом дело, но точного понимания не приходит. Спасибо. Буду перечитывать.
при добавлении переменной в функцию выдаст не очень верный результат, так как при вызове функции переменная будет пересоздоваться
Здравствуйте, подскажите пожалуйста, как можно данный слайдер сделать фоном блока, и чтобы вверху у него было навигационное меню, якобы фиксированным, и слайдер работал под ним как фон? Я пробовал делать менюшке position: fixed; но потом понял что идея не самая лучшая, так как менюшка будет фиксироваться по экрану а не по блоку. Абсолютное позиционирование тоже не хочется применять, чтобы не вырвать менюшку из потока. Посоветуйте пожалуйста как можно поступить?
Заранее спасибо Вам за Ваш ответ!
делаете общий блок. В него кладете слайдер а сверху ваше меню. Меню делаете absolute или relative, и задаете z-index больше чем у слайдера.
Здравствуйте, спасибо Вам за Ваш ответ! Я перед тем как посоветоваться с Вами, примерно так и делал - общему блоку задавал relative, а менюшке absolute, с z-index:10; и небольшим позиционированием через top и left. Всё работало прекрасно!!! Единственное, что меня смущает, я слышал что нельзя вырывать меню и логотип из потока позиционированием. Правильно ли это? А саму структуру сайта я делаю через bootstrap 4, не даст ли такой подход сбой в работе bootsrap 4, при дальнейшем взаимодействии с сайтом?
Заранее спасибо Вам за Ваш ответ и поддержку!
Тяжело ответить не видя самого кода верстки. Думаю не вызовет, но без кода 100% сказать сложно.
Спасибо Вам! Сейчас досконально освою слайдер по двум Вашим урокам и буду доделывать код!
Здравствуйте. Могу быть не прав, но разве не легче все это сделать через setInterval ? И не нужно никаких сбросов и тд, одна строчка кода.
Спасибо за урок, но осталось непонятным зачем нужен clearTimeout(timer), на функционал не влияет
....timer = setTimeout(function () { ..... почему перед function Открывается скобка и нигде потом не закрывается? не понял фишку
закрывается, но позже.
замість setTimeout можна було покласти setInterval і не потрібно два рази писати autoSlider()....чи це буде правельний варіант??
А можно ли сделать что-бы было намного плавнее и без остановок?. Я пробовал увеличивать задержки но получается лажа какая-то
Можно, просто подходы другие - код нужно переделывать.
@@itgid Если я посмотрел 20 уроков, если хорошо подумаю, я смогу это сделать сам. Что спрашиваю что-бы время зря не терять. Буду гуглить, перебирать все возможные варианты, а в итоге что - ничего.
Спс за хорошие видео
а как сделать так, чтобы время самого скролла было больше?
это transition который ты указываешь в стилях. Вместо 1s укажи 2s и так далее. s - секунда
а где код css,.,?????????????/
Вопрос: как остановить слайдер при наведении?
Добавьте событие onmouseover которая делает clearTimeout.
что-то не так делаю опять =)
row.onmouseover = clearTimeout(timer); row - это полоса из урока. остальное как в уроке. Неверно назначил событие?
после
toTop = 0;
row.onmouseover = clearTimeout(timer);
var slider = document.getElementById('slider');
// если наведёшь на слайдер, то он остановится
slider.onmouseover = function() {
clearTimeout(timer);
};
// если уберешь мышку со слайдера, он вновь запуститься
slider.onmouseout = function() {
autoSlider();
};
@@romashka7519 Разбирался сам но запутался. Спасибо за код , очень помог !!!
@@romashka7519 я так и прописал в код, то, что вы выше сбросили.) Но у меня теперь появилась проблема: всего 7 картинок загружено (как и в видео), а слайдер двигает картинки до 5-й только, а потом снова к началу. Не подскажете, с чем это связано, в чём причина?
Здравствуйте. Я хочу сделать чтобы слайдер работал как обычно, с помощью кнопок "влево", "вправо" но при нажатии на кнопку "старт" запускался автоматически. у меня всё получилось кроме одного. Я хочу чтобы когда нажимал ещё раз на кнопку старт, слайдер прекратил автоматическое движение. Вот мой код, что посоветуете?
document.getElementById('slider-left').onclick = sliderLeft;
document.getElementById("slider-right").onclick = sliderRight;
document.getElementById("slider-start").onclick = Autoslider;
var left = 0;
var timer = 0;
function sliderLeft() {
var polosa = document.getElementById("polosa")
left = left - 128;
if (left 0) left = -768;
polosa.style.left = left + "px";
}
// Эта функция полностью не дописана тк я не знаю как её закончить
function Autoslider() {
timer = 1;
function () {
if (timer = 1) {
timer = setInterval(sliderLeft, 1000);
}else {}
}
}
Тяжело понять что и где по одному коду. Я вас попрошу, если можно, выложить полностью код (html, css, js) на сервис типа codepen или fiddle.
у меня почему то через раз ускоряется, потом в норму и так по циклу
а всё, после метода очистки всё стабилизировалось ( clearTimeout(); )
вам после нажати кнопки нужно останавливать таймер и начинать заново. Иначе - ускорение!
JavaScript решает спасибо за ответ
5:59 вы говорите что и с большой бы Out отработало,ноо я напоролся) с большой cleatTimeOut = не работает) clearTimeout = работает, а так спасибо вам!
Окей. Но как быть если изображения, скажем размером 1000 на 600? И нужно чтоб была одна картинка, затем она бы сменялась другой и т.д.?
Alexander Tarasenko в процентах, одна картинка это 100%, width контейнера для картинок 500% к примеру, при прокрутке слайдера контейнер сдвигай на -100%
Спасибо
все это очень круто конечно) мне нравится очень то что вы делаете. и вопросы. почему не сделали чтобы они все кругом ходили? и почему не пользуетесь let?
1. Почему я должен делать чтобы они кругом ходили? Здесь видео для начинающих. А здесь ua-cam.com/video/gBgD9ieCJpE/v-deo.html - более продвинутый уровень и картинки ходят кругом. Второе - как ни странно, но это видео для детей изучающих js. На тот момент детям не преподавали ES6. И babel давать детям как-то странно, если задача "познакомить" с языком. Более того, в данном плейлисте нет ES6 - поскольку другие задачи, да и год 2016.
Переход очень бистро получилось, там объясняете var очень тщательно, а тут сразу зацикливание функции, в принципе интересно но с помощью предыдущих уроков очень трудно понять.
ну, я эти видео писал для курсов, где все предыдущие уроки мы проходили.
Ну что, так никто и не смог сделать слайдер по кругу? Может автор подскажет, м? Как же сделать так, чтоб картинки крутились по кругу?
подсказать не проблема. Вычисляем позицию изображения - если оно ушло влево на 2 позиции переносим вправо, если в право - то влево. Удобнее это сделать в виде массива.
@@itgid Спасибо, буду пробовать
мне кажется нужно использовать 3д пространство посмотри как делать 3д куб в css и думаю это много что расскажет
@@itgid Не могли бы вы более подробно рассказать как сделать чтобы слайды двигались только вперед? Кусок кода например сюда вставить. Для новичков.
сделал все точно так же,но не работает,никаких ошибок не выдает и с синтаксисом все в порядке
Скидывайте код в архиве и дамп базы данных = попробую помочь.
ребутнул комп,и все заработало)
классно часы тикают в комнате
Попробовал сделать слайдер снизу вверх. Не могу найти ошибку, ругается консоль, посмотрите пожалуйста.
codepen.io/vic4884/pen/oqwGWN?editors=0010 По идее, там ничего особо менять не надо, только направление, не left а top, но не работает. Ошибка оказалась в слове top, js почему-то не дает его использовать в качестве переменной, заменил на toTop, заработало
служебное слово. Нужно в этом быть осторожнее.
Извините, никто случаем не сталкивался с проблемой, если брать несколько картинок и чтобы они двигались по очереди, и из за этого обтекание не работает, картинки стоят друг над другом и движется только одна первая, остальные невидимы и находятся под ней.
вот код:
imgur.com/a/cAQrs6q
не просто так ведь кнопку убрали )))
Что за кнопку?
влево)
Оставьте какие нибудь реквизиты, благодарные юзеры закинут вам монету за труды.
Под этим видео все реквизиты ua-cam.com/video/0FAOtEzigeM/v-deo.html
взял идею, чуть подправил на флексе и марджинах ибо posr перекрывает тень от меню которая над ним нужна) codepen.io/r1co/pen/EmmyRr
вышло очень минимально. до этого думал на jquery делать, но, поскольку делаю для себя а не заказ, то можно не закольцованный слайдер. зато опыт, а не просто плагин)
upd: немного танцев с переменной и, возможно, костылей = готовый слайдер с обраткой не зависящий от кол-ва картинок и их размеров, вроде как)) думаю я что-то не знаю и он сломается при каких-то условиях, но как первый норм.
спасибо за классный и интересный код!
я вот только не понял почему у функциях slide и slideRev slides.style.marginLeft=-pos+"00"+"%"
точней, почему pos в двоих случаях с унарным минусом?
немного сложна для моих мозгов :(
скорее всего из-за анонимной функции. Когда функция вист отдельно -это легче для понимания, конечно если код не большой.
У кого получилось сделать кнопку "на право"? поделитесь ,я голову сломал
Вот мой полностью Js файл! c двух кнопками + autoSlider
autoSlider один круг делает и останавливается дальше по кнопкам.
document.getElementById('slider-left').onclick = sliderLeft;
autoSlider();
var a;
a = 0;
var timer;
var timer1 = 0;
function autoSlider()
{
timer = setInterval(sliderRight, 350);
}
function sliderLeft() {
var polosa = document.getElementById('polosa');
a = a +128;
if (a>0)
{
a = -512;
}
polosa.style.left = a+'px';
}
document.getElementById('slider-right').onclick = sliderRight;
function sliderRight() {
var polosa = document.getElementById('polosa')
a = a -128;
if (a
а где код css,.,?????????????/
а где код css,.,?????????????/
а где код css,.,?????????????/
а где код css,.,?????????????/
а где код css,.,?????????????/
а где код css,.,?????????????/
а где код css,.,?????????????/
а где код css,.,?????????????/