#javascript #slick.js
Вопрос:
Я пытаюсь, чтобы активный фильтр моей карусели стал активным в зависимости от сезона, в котором мы сейчас находимся
<ul id="our_projects">
<li id="all_projects" class="active button-filter"><a href="">All Seasons</a></li>
<li id="Spring" class="button-filter"><a href="">Spring</a></li>
<li id="Summer" class="button-filter"><a href="">Summer</a></li>
<li id="Autumn" class="button-filter"><a href="">Autumn</a></li>
<li id="Winter" class="button-filter"><a href="">Winter</a></li>
</ul>
Код JS пока выглядит следующим образом — он активирует фильтр, но слайдер не изменяет слайды
function slickSlider() {
if(j('.slick-our-projects').length) {
j('.slick-our-projects').slick({
dots: false,
variableWidth: false,
autoplay: false,
arrows: false,
centerMode: false,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
centerMode: false,
variableWidth: false
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
centerMode: false,
variableWidth: false
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
centerMode: false,
variableWidth: false
}
}
]
});
var filtered = false;
j('#our_projects .button-filter').on('click', function(){
var filtername = j(this).attr('id');
if (filtered === false) {
j('.slick-our-projects').slick('slickUnfilter');
j('.slick-our-projects').slick('slickFilter','.filter-' filtername);
j('#our_projects .button-filter').attr('class','button-filter');
j(this).attr('class','active button-filter');
return false;
} else {
j('.slick-our-projects').slick('slickUnfilter');
j('.slick-our-projects').slick('slickFilter','.filter-' filtername);
j('.slick-our-projects').slickGoTo(0);
j('#our_projects .button-filter').attr('class','button-filter');
j(this).attr('class','active button-filter');
filtered = false;
return false;
}
});
}
if(j('.slick-our-projects-v2').length) {
j('.slick-our-projects-v2').slick({
dots: true,
variableWidth: false,
autoplay: true,
infinite: true,
arrows: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1220,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
var filtered = false;
j('#our_projects .button-filter').on('click', function(){
var filtername = j(this).attr('id');
if (filtered === false) {
j('.slick-our-projects-v2').slick('slickUnfilter');
j('.slick-our-projects-v2').slick('slickFilter','.filter-' filtername);
j('#our_projects .button-filter').attr('class','button-filter');
j(this).attr('class','active button-filter');
return false;
} else {
j('.slick-our-projects-v2').slick('slickUnfilter');
j('.slick-our-projects-v2').slick('slickFilter','.filter-' filtername);
j('.slick-our-projects-v2').slickGoTo(0);
j('#our_projects .button-filter').attr('class','button-filter');
j(this).attr('class','active button-filter');
filtered = false;
return false;
}
});
}
}
var date=new Date();
var month=new Array();
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
var n = month[date.getMonth()];
if(((n === 'January') || (n === 'February') || (n === 'March'))){
jQuery('#Spring').removeClass('active');
jQuery('#all_projects').removeClass('active');
jQuery('#Summer').removeClass('active');
jQuery('#Autumn').removeClass('active');
jQuery('#Winter').addClass('active');
};
if(((n === 'April') || (n === 'May') || (n === 'June'))){
jQuery('#Winter').removeClass('active');
jQuery('#all_projects').removeClass('active');
jQuery('#Summer').removeClass('active');
jQuery('#Autumn').removeClass('active');
jQuery('#Spring').addClass('active');
};
if(((n === 'July') || (n === 'August') || (n === 'September'))){
jQuery('#Winter').removeClass('active');
jQuery('#all_projects').removeClass('active');
jQuery('#Spring').removeClass('active');
jQuery('#Autumn').removeClass('active');
jQuery('#Summer').addClass('active');
};
if(((n === 'October') || (n === 'November') || (n === 'December'))){
jQuery('#Winter').removeClass('active');
jQuery('#all_projects').removeClass('active');
jQuery('#Spring').removeClass('active');
jQuery('#Summer').removeClass('active');
jQuery('#Autumn').addClass('active');
};
Таким образом, если месяц апрель, то сезон будет весенним, и слайды карусели будут представлять пользователю слайды, связанные с этим фильтром, при загрузке страницы
Я не уверен, как это сделать — любая помощь будет очень признательна
URL-АДРЕС веб-сайта = http://evergreenhorticulture-co-uk.stackstaging.com/ (прокрутите страницу до раздела «Уход за садом»)
Слайдер использует скользкий слайдер
Спасибо, Нил
Комментарии:
1. Узнать дату с JS, определить сезон, добавить класс к соответствующему элементу? Вы застряли на какой-то определенной части проблемы?