Silvanassss
@Silvanassss
Front-end

Slick slider is not a function как исправить?

Добрый день! Подскажите пожалуйста ошибку, не понимаю в чем проблема. Мне надо сделать слайдер для страницы, на локальной машине все работает отлично, как только пытаюсь перенести код на страницу на которой он нужен, то ломается и выдает такую ошибку:
L7w5zSysZ
Делаю все правильно, сначала подключаю библиотеку jQuery и стили slick'а, затем пишу div с нужными классами и контентом, а затем подключаю библиотеку slick и вставляю код слайдера
пробовала уже в разном порядке, не помогает, нонконфликт мод тоже не работает
собственно сам сайт, на нем два слайдера, один рабочий(не сликовский), а второй не рабочий
подскажите пожалуйста, что не так? https://simplechopper.net/product/lushful-lash-mas...
  • Вопрос задан
  • 361 просмотр
Решения вопроса 1
Silvanassss
@Silvanassss Автор вопроса
Front-end
Ошибку решила! Самое простое решение, если у Вас не работает так же как и у меня, хоть у Вас лишь одна версия jQuery подключена, то включайте скрипт в нон конфликт моде. На самом деле я видела, такое решение, но тот скрипт почему-то мне не подошел.
Вот допустим у меня обычный код слайдера вставлен
$(document).ready(function(){
		$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});
		});


и просто добавляем вместо (document).ready(function() - $.noConflict();
jQuery(document).ready(function($)

выходит так
$.noConflict();
 jQuery(document).ready(function($){
		$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }

  ]
});
		});


И оно начинает работать :)

P.S. так же оно начинает работать без конфликтов если во все скрипты где есть jQuery поставить так jQuery(document).ready(function($) то есть указать, что $ это функция, и можно не использовать нон конфликт.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы