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

Не работают кнопки слайдера 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» (без символа решетки), а остальные можно удалить.

Источник

Слайдеры-“карусели” не работают. Какие еще доказательства вам нужны?

Компьютер не должен тратить впустую ваше время или вынуждать вас выполнять действия сверх необходимых. Джеф Раскин, «Интерфейсы: новые направления в проектировании компьютерных систем»

Иногда мы спасаем коллег в сложных ситуациях. Недавно к нам обратились ребята с уже готовым дизайном. Мы делали программную часть сайта для крупной российской оконной фирмы. Отругали дизайнера, который делал макет, рассказали об основных проблемах сайта, исправили то, что могли исправить.

Нам не понравилось использование сложного функционала и предложенные дизайнером решения. С первого взгляда макет выглядел вполне симпатично, со второго — обнаружились и постоянный капслок, и слайдеры, и много того, что не работает и мешает. Яркий и бессмысленный дизайн, от которого нашему артдиру физически плохеет. Ошибки в размерах шрифтов, отступы на глаз. При этом дизайнер работает в очень крупной фирме из второго эшелона. А получившийся дизайн — просто боль перфекциониста.

Сайт содержал 4 разных слайдера — с фотографиями, предложениями, отзывами, и блок со сложным функционалом. К нашим коллегам клиент пришел уже с заблуждениями и настаивал на этом функционале. (Вот почему мы стремимся сеять принципы простоты и минимализма и работать на LTV. Для нас бюджет и имя не играют роли, мы всегда стараемся убедить и сделать круто или отказываем.)

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

Вчера разработчики пустили трафик на сайт, проанализировали данные в вебвизоре и ужаснулись. Гипотеза их клиента не оправдалась, а наша полностью подтвердилась.

Люди вообще не взаимодействуют с интерактивом на сайте — слайдер не крутят, кнопки не нажимают, анкета не собирает контакты. Ничего не работает, как планировалось.

В итоге владелец маркетингового агентства написал нам примерно следующее:

“В который раз убедился: сайт должен быть максимально простым и отвечать на главный вопрос — что и за сколько.”

И тут мы полностью согласны. Но просто = дорого.

Все спецэффекты — говно, особенно на мобильных версиях. Что параллакс, что слайдеры. Выглядят эффектно на десктопе, но пользоваться неудобно в 90% случаев. Если всю информацию из интерактивных элементов вывести потоком без слайдеров, станет очевидно, сколько там ненужного. Если избавиться от всего ненужного, сайт будет работать лучше, а в реализации станет дешевле.

Чаще всего в слайдерах размещается дешёвейшая реклама, и доверия к ним у людей нет. Кроме того, они просто неудобны. Только 1 клиент из 100 будет смотреть слайдер и мотать влево-вправо.

Иногда, очень редко, слайдер приемлем — как на сайте Нootch.ru , когда основной инструмент продажи — это внутренние страницы сайта. Доверие к слайдерам годами формируется в интернет-магазинах — разрабатываются хорошие баннеры с интересными скидками, и только тогда это эффективный маркетинговый инструмент.

Мало живого примера? Применим логику. Для того, чтобы перематывать фотографии, уже есть удобный инструмент — скролл . Человек крутит колесо мышки или свайпает по экрану вверх. Слайдер же — это неудобное дублирование этого интерфейса.

Чтобы перемотать фотографии в слайдере, нужно нацелиться на кнопку справа, которая не всегда достаточно хорошо выделена, и сделать клик. В отличие от привычного скролла, здесь есть лишнее действие, которое человек не хочет совершать. Плюс неочевидно, когда вы начинаете смотреть фото по второму кругу. На любой странице человек стремится сделать как можно меньше действий. Исходя из этого, надо разрабатывать весь интерфейс.

Мало логики? С нами согласны создатели Tilda :

“Карусели и слайдеры картинок оказались недостаточно эффективными инструментами для конвертации посетителей, но это не останавливало многих дизайнеров.”

Мы уже писали, что дизайнер часто идет на поводу у клиента, потому что это прокатит. Надеемся, что читатели этого блога станут понимать в дизайне больше дизайнеров. От работы дизайнера страдает не он, а вы сами! Поэтому вы должны знать больше для того, чтобы получать качественный продукт и зарабатывать на нем.

Небольшой лайфхак на закуску. Слайдеры используются для СЕО, а не для интерфейса. Если ваша цель — впихнуть на страницу побольше для поисковиков и избежать бана за скрытую информацию, сделать малозаметный слайдер внизу страницы — хорошая идея. Информация как бы открыта, но на самом деле нет.

P.S. Наш редактор не успевает обрабатывать наши статьи, превращать их из технических в читаемые. Накопилось уже больше 20 новых статей, а я знаю, что вы очень ждете новую информацию. Если вам интересно и вы хотите читать больше, предлагаю немного поторопить контент-мэйкера тегом в любых соцсетях #АнастасияДайКонтента.

Отзыв о работе с нами, это всегда приятно, спасибо!

Друзья! Хочу поделиться важными для меня лично новостями! Не так давно, возникла проблема — нужно было оперативно сделать верстку лендинга, дизайн +/- был готов, дедлайн горел, а мои программисты оказались загружены по полной. В общем, окольными путями перепробовав всех и все)) Я написал Дмитрию Абрамову и он согласился мне помочь!
В общем, скажу коротко (а то подумаете что покупной от) Дима — это Профессионал с БОЛЬШОЙ БУКВЫ (пусть он и не рекомендует писать капсом — но здесь это применимо). Все было выполнено четко, оперативно. Были произведены улучшения и доработки той, концепции которая была изначально. Теперь я стал больше разбираться в особенностях производства сайтов. Как в итоге выяснилось в ходе работ — задача поставленная, оказалась на много сложнее, чем рассчитывали, но не смотря на это, все было готово в лучшем виде и в срок! Дмитрий, огромное спасибо за помощь! Надеюсь, будет больше проектов, по которым сможем посотрудничать!

Источник

Как и какими средствами находить ошибки в 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 там нет.

Источник