Не работает range slider и formstyler
$(function () {
$('.menu__btn').on('click', function () {
$('.menu__btn').toggleClass('menu__btn--active');
$('.menu__list').toggleClass('menu__list--active');
});
$('.search').on('click', function () {
$('.menu__search').toggleClass('menu__search--active');
});
$('.minicard__heart').on('click', function () {
$(this).toggleClass('active');
});
$('.minicard__srav').on('click', function () {
$(this).toggleClass('active');
});
//стилизация select
$('select').styler();
//стилизация select
//range slider
var custom_values = [0, "500T", "800T", "1.1M", "1.4M", "1.7M", "2M", "2.3M", "2.7M", "3M"];
var my_from = custom_values.indexOf("500T");
var my_to = custom_values.indexOf("1.7M");
$(".js-range-slider").ionRangeSlider({
skin: "round",
type: "double",
grid: true,
from: my_from,
to: my_to,
values: custom_values
});
//range slider
//range slider
var custom_values = [6, 12, 24, 36, 48, 60, 72, 84];
var my_from = custom_values.indexOf(24);
var my_to = custom_values.indexOf(60);
$(".js-range-slider-mounth").ionRangeSlider({
skin: "round",
type: "double",
grid: true,
from: my_from,
to: my_to,
values: custom_values
});
//range slider
$('.top__slider').slick({
dots: true,
nextArrow: '<button class="top__slider-btn top__slider-btnnext "><img src="images/arrow-right-top-slider.svg" alt=""></button>',
prevArrow: '<button class="top__slider-btn top__slider-btnprev "><img src="images/arrow-left-top-slider.svg" alt=""></button>',
autoplay: true,
autoplaySpeed: 3000,
responsive: [
{
breakpoint: 1300,
settings: {
arrows: false
}
}
]
});
$('.selection__slider').slick({
nextArrow: '<button class="selection__slider-button selection__slider-btnnext"><img src="images/arrow-right-select-slider.png" alt=""></button>',
prevArrow: '<button class="selection__slider-button selection__slider-btnprev "><img src="images/arrow-left-select-slider.png" alt=""></button>',
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1401,
settings: "unslick"
}
]
});
$('.special-offers__slider').slick({
nextArrow: '<button class="selection__slider-button selection__slider-btnnext"><img src="images/arrow-right-select-slider.png" alt=""></button>',
prevArrow: '<button class="selection__slider-button selection__slider-btnprev "><img src="images/arrow-left-select-slider.png" alt=""></button>',
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1401,
settings: "unslick"
}
]
});
$('.partners__slider').slick({
nextArrow: '<button class="selection__slider-button selection__slider-btnnext"><img src="images/arrow-right-select-slider.png" alt=""></button>',
prevArrow: '<button class="selection__slider-button selection__slider-btnprev "><img src="images/arrow-left-select-slider.png" alt=""></button>',
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1501,
settings: "unslick"
}
]
});
$('.trust__slider').slick({
nextArrow: '<button class="selection__slider-button selection__slider-btnnext"><img src="images/arrow-right-select-slider.png" alt=""></button>',
prevArrow: '<button class="selection__slider-button selection__slider-btnprev "><img src="images/arrow-left-select-slider.png" alt=""></button>',
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1501,
settings: "unslick"
}
]
});
$('.blog__slider').slick({
nextArrow: '<button class="selection__slider-button selection__slider-btnnext"><img src="images/arrow-right-select-slider.png" alt=""></button>',
prevArrow: '<button class="selection__slider-button selection__slider-btnprev "><img src="images/arrow-left-select-slider.png" alt=""></button>',
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1501,
settings: "unslick"
}
]
});
//выпадающая информация reviews
$(".more").on('click', function () {
$(this).prev("p.more-content").slideToggle("fast");
$(this).toggleClass('active');
});
//выпадающая информация reviews
// табы
$('.js-tab-trigger').on('click', function () {
var id = $(this).attr('data-tab'),
content = $('.js-tab-content[data-tab="' + id + '"]');
$('.js-tab-trigger.active').removeClass('active'); // 1
$(this).addClass('active'); // 2
$('.js-tab-content.active').removeClass('active'); // 3
content.addClass('active'); // 4
});
// табы
//изменение текста у plaseholder search
$('.menu__search-form-search').each(function () {
$(this).data('placeholder', $(this).attr('placeholder'));
});
function changePlaceholder() {
if ($(window).width() < 768) {
$('.menu__search-form-search').attr('placeholder', 'Поиск автомобилей');
} else {
$('.menu__search-form-search').each(function () {
$(this).attr('placeholder', $(this).data('placeholder'));
});
}
}
$(window).resize(changePlaceholder).trigger('resize');
//изменение текста у plaseholder search
});
У меня случилась проблема которую не могу решить.
Все плагины и scriptы работают правильно, но
не работает range slider и formstyler тут
https://koljatru.github.io/autos/
Хотя у меня в VS code на live serve
re все работает правильно! Сборка Gulp.
У меня уже есть проект где все работало.
rangeslider и formstyler я установил через npm, закинул в папки файлы css и js скрин прилагаю. В gulpfile.js ничего не менял с прошлого проекта.
В чем может быть проблема? подскажите пожалуйста!
Где я делаю ошибку не пойму?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autos</title>
<link rel="stylesheet" href="css/style.min.css">
<link rel="stylesheet" href="css/ion.rangeSlider.min.css">
<link rel="stylesheet" href="css/jquery.formstyler.theme.css">
<link rel="stylesheet" href="css/jquery.formstyler.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/main.min.js"></script>
<script src="js/ion.rangeSlider.min.js"></script>
<script src="js/jquery.formstyler.min.js"></script>
</body>