Не работают кнопки слайдера

Не работают кнопки слайдера Bootstrap Carousel

Мой слайд карусели Bootstrap не работает, хотя я пробовал здесь другие ответы (один из них — это.

Но почти все они не работают и устарели, хотя они решают большинство других проблем (что, кажется, не работает на мне)

Большая часть кода взята из пакета сниппетов Bootstrap из Visual Studio 2017 (расширение)

JS: (скопировал код здесь)

Я также пробовал другой код на некоторых веб-сайтах, и, похоже, я не могу найти ответ или решение своей проблемы.

2 ответа

В вашей разметке есть несколько ошибок. Ссылка Bootstrap CSS CDN отсутствует. Каждый слайд в вашей разметке имеет идентификатор id=»#my-carousel» . Идентификаторы должны быть уникальными.

Вот два рабочих примера слайдеров Bootstrap. Один использует атрибуты данных, а другой — инициализацию JavaScript и внешние элементы управления.

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

• В опубликованном вами коде не было загрузочного css. Не уверен, что вы пропустили это в своем собственном проекте, но я добавил ссылку на CDN.
• Ссылка на bootstrap js выдает ошибку (ищется объект Popper ?). Я переключился с бета-версии на стабильную версию бутстрапа, и все заработало.
• Я полностью исключил ваш пользовательский jquery: bootstrap css может использовать разметку html, чтобы знать, когда переходить дальше, назад и т. Д.

Последнее замечание: я не менял его, но почему в каждом элементе есть id=»#my-carousel» ? Я думаю, что только внешний div (с классом carousel ) нуждается в id=»my-carousel» (без символа решетки), а остальные можно удалить.

Источник

Как и какими средствами находить ошибки в Javascript коде?

Иногда код не работает так, как задумано или вообще не работает. Часами гадаю что и где не так. Или иду на проф. ресурсы, например Stack Overflow и публикую вопрос «Где здесь ошибка?» или «Почему не работает?»

В итоге часто проблема мелкая: дурацкая опечатка, ошибка в синтаксисе и прочее. Если по каждой ерунде бегать по ресурсам, а не разбираться самому — профессионалом так не стать.

Вопрос: какие есть способы, чтобы найти ошибки в Javascript коде? Какие инструменты, методы, плагины, пути и пр.?

UPD (16.10.2021): список действенных способов в текущем топике (чтобы не листать все):

4 ответа 4

Вчера всё работало, а сегодня не работает / Код не работает как задумано

Debugging (Отладка)

В чем заключается процесс отладки? Что это такое?

Процесс отладки состоит в том, что мы останавливаем выполнения скрипта в любом месте, смотрим, что находится в переменных, в функциях, анализируем и переходим в другие места; ищем те места, где поведение отклоняется от правильного.

Будет рассмотрен пример с Сhrome, но отладить код можно и в любом другом браузере и даже в IDE.

Открываем инструменты разработчика. Обычно они открывается по кнопке F12 или в меню Инструменты → Инструменты Разработчика . Выбираем вкладку Sources

1. Иерархия файлов, подключенных к странице (js, css и другие). Здесь можно выбрать любой скрипт для отладки.
2. Сам код.
3. Дополнительные функции для контроля.

В секции №2 в левой части на любой строке можно кликнуть ЛКМ , тем самым поставив точку останова (breakpoint — брейкпойнт). Это то место, где отладчик автоматически остановит выполнение JavaScript, как только до него дойдёт. Количество breakpoint’ов не ограничено. Можно ставить везде и много. На изображении выше отмечен зеленым цветом.

В остановленном коде можно посмотреть текущие значения переменных, выполнять различные команды и др.

А во вкладке Breakpoints можно:

• На время выключить брейкпойнт(ы)
• Удалить брейкпойнт(ы), если не нужен
• Быстро перейти на место кода, где стоит брейкпойнт кликнув на текст.

Запускаем отладку

В данном случае, т.к. функция выполняется сразу при загрузке страницы, то для активации отладчика достаточно её перезагрузить. В ином случае, для активации требуется исполнить действие, при котором произойдет исполнение нужного участка кода (клик на кнопку, заполнение инпута данными, движение мыши и другие действия)

В данном случае после перезагрузки страницы выполнение «заморозится» на 4 строке:

Вкладка Watch — показывает текущие значения любых переменных и выражений. В любой момент здесь можно нажать на + , вписать имя любой переменной и посмотреть её значение в реальном времени. Например data или nums[0] , а можно и nums[i] и item.test.data.name[5].infoНе работают кнопки слайдера] и т.д.

Вкладка Call Stack — стэк вызовов, все вложенные вызовы, которые привели к текущему месту кода. На данный момент отладчик стоит в функции getSum , 4 строка.

Вкладка Scope Variables — переменные. На текущий момент строки ниже номера 4 ещё не выполнилась, поэтому sum и output равны undefined .

В Local показываются переменные функции: объявленные через var и параметры. В Global – глобальные переменные и функции.

Процесс

Для самого процесса используются элементы управления (см. изображение выше, выделено зеленым прямоугольником)

( F8 ) — продолжить выполнение. Продолжает выполнения скрипта с текущего момента. Если больше нет других точек останова, то отладка заканчивается и скрипт продолжает работу. В ином случае работа прерывается на следующей точке останова.

( F10 ) — делает один шаг не заходя внутрь функции. Т.е. если на текущей линии есть какая-то функция, а не просто переменная со значением, то при клике данной кнопки, отладчик не будет заходить внутрь неё.

( F11 ) — делает шаг. Но в отличие от предыдущей, если есть вложенный вызов (например функция), то заходит внутрь неё.

( Shift+F11 ) — выполняет команды до завершения текущей функции. Удобна, если случайно вошли во вложенный вызов и нужно быстро из него выйти, не завершая при этом отладку.

— отключить/включить все точки останова

— включить/отключить автоматическую остановку при ошибке. Если включена, то при ошибке в коде он скрипт остановится автоматически и можно посмотреть в отладчике текущие значения переменных, проанализировать и принять меры по устранению.

Итак, в текущем коде видно значение входного параметра:

• data = «23 24 11 18» — строка с данными через пробел
• nums = (4) [«23», «24», «11», «18»] — массив, который получился из входной переменной.

Если нажмем F10 2 раза, то окажемся на строке 7; во вкладках Watch , Scope > Local и в самой странице с кодом увидим, что переменная sum была инициализирована и значение равно 0.

Если теперь нажмем F11 , то попадем внутрь функции-замыкания nums.forEach

Нажимая теперь F10 пока не окончится цикл, можно будет наблюдать, как на каждой итерации цикла постоянно изменяются значения num и sum . Тем самым мы можем проследить шаг за шагом весь процесс изменения любых переменных и значений на любом этапе, который интересует.

Дальнейшие нажатия F10 переместит линию кода на строки 11, 12 и, наконец, 15.

Дополнительно

Остановку можно инициировать принудительно без всяких точек останова, если непосредственно в коде написать ключевое слово debugger :

Если нажать ПКМ на строке с брейкпойнтом, то это позволит еще более тонко настроить условие, при котором на данной отметке надо остановиться. В функции выше, например, нужно остановиться только когда sum превысит значение 20.

Это удобно, если останов нужен только при определённом значении, а не всегда (особенно в случае с циклами).

Больше информации о возможностях инструментов например Chrome — можно прочитать здесь

Дополнительно 2

Принудительную отладку можно инициировать событием, происходящим на странице/элементах. Это полезно, если не знаешь где обрабатывающая функция находится.

Пример для Chrome:

Нажимаем F12 , заходим на вкладку Sources и в функциях контроля видим вкладку Event Listener Breakpoints , в которой можно назначить в качестве триггера любые события, при которых исполнение скрипта будет остановлено. На изображении ниже выбран пункт на событие onchange элементов.

Для Firefox:

Если функция инлайновая, например

то можно зайти в Инспектор, найти тот самый элемент, в котором прописано событие и обнаружить рядом значок em :

Кликнув на него, как утверждает developer.mozilla.org/ru/docs можно увидеть строчки:

где можно увидеть события, навешанные на элемент, скрипт, строку, возможность нажать на паузу и т.д.

В других случаях, а также если кнопка паузы не обнаружена, то на вкладке Debugger (отладчик) надо найти стрелку, при наведении на которую будет написано «Events». Там должно быть событие выделенного элемента.

А вот таких полезных вкладок как у Chrome к сожалению у Firefox там нет.

Источник

В слайдере не работают кнопки с 5 по 8

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Кнопки регулировки громкости на клавиатуре иногда не работают и/или работают некорректно
Здравствуйте, у меня возникает некая неполадка/баг со звуком. Пользуюсь я данной клавиатурой, как.

Почему не работают кнопки сдвига графика не работают.
Мне нужно чтоы при нажатии клавиш «вверх,вниз,вправо,влево» график двигался, тоесть перерисовывался.

Не работают кнопки Fn+
Здравствуйте ! Ноутбук: SAMSUNG rv508\408 ОС: WinXP SP3 Не могу найти нигде драйвер для.

Не работают кнопки
Сделал в интернет-магазине выпадающую корзину при наведении (в правом верхнем углу). Корзина.

Кнопки не работают
Создала формы для отображения и ввода данных из таблицы. При нажатии кнопок должны сохраняться.

Не работают кнопки
Подскажите что делать — не работают кнопки регистрации формы каталога в AllSubmitter и SMILE SEO.

не работают кнопки
Здрасти всем, писал программу автоматизация парка маршрутных такси, когда дошёл до кнопки.

Не работают кнопки
Всем доброе время суток. Проблема у меня следующая: создал я сайт, выложил его на сервак, да вот.

Источник

Не работают кнопки на сайте

На сайте есть слайдер, которые позволяет перемещаться вверх/вниз по странице, но из-за ошибок в js скрипте этого слайдера, не работают все кнопки на сайте, просто не перемещают на другие страницы. Как можно исправить проблему? Проеблмый файл называется jquery-1.10.2.min.js

1 ответ 1

Проблем в данном файле быть не может, если конечно Вы сами туда залезли.

По этому, проблема скорее всего кроется в том, что вы сделали где-то ошибку в JQ коде и\или коде слайдера.

По-этому предоставьте ссылку на сайт\страницу, где замечается данная проблема.
Или добавьте код страницы в вопрос.

Ошибка с блоком «DOWNLOAD WHITEPAPPER»

По какой-то причине, при нажатии на блок

Вот так выглядит блок:

Консоль указывает на ошибку в этой строке:

var offset_top = ( dataslide == 1 ) ? ‘0px’ : $(‘.slide[data-slide=»‘ + dataslide + ‘»]’).offset().top;

Полностью функция выглядит так:

Посмотрев код, понятно, что данная функция вызывается при нажатии на блок с классом .navigation-slide , именно он находится в том самом блоке.

РЕШЕНИЕ: Удалить класс navigation-slide из блока ниже:

И так, попробуем разобраться.

Ошибка с навигацией (вверх — вниз)

Есть открыть код, то мы увидим, что «слайды» — это блоки с идентификатором data-slide=»N» (Где N — ПОРЯДКОВЫЙ НОМЕР слайда).

Сам слайдер работает по принципу определения текущего слайда и при нажатии вниз к идентификатору прибавляет 1.
При нажатие отнимает 1.

У вас, код блоков выглядит так:

Ошибка заключается в том, что 3 слайд закомментированы и порядок сбивается (1, 2, 4, 5)
P.s. Почему я указал только 3й слайд? Потому что 6й последний, из-за того, что он закоментирован, последним считается 5ый.

РЕШЕНИЕ: изменить код на вот такой:

Источник

Почему не работает слайдер?

Я понимаю, что какие-то проблемы с подключением, а именно с порядком. Но никак не могу поставить, чтобы работало все нормально.

вот такие подключения внизу. а это код для слайдера:

3 ответа 3

Браузеры читают код как люди текст, с лева на право, с верху в низ. Для работы Swiper нужен Jquery а поскольку Swiper в html стоит выше чем Jquery то при инициализации слайдера он не смог найти функции и методы jquery.

А вы точно подключили swiper css?

Если свайпер работает на jquery, то jquery нужно поднять. Ну а вообще круто было бы полностью ошибку почитать.

С начала квери потом слайдер потом все остальное

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.18.40487

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник