jQuery(document).ready(function(){ const slider = jQuery('.vertical_slider'); //slickify function for re-construct slick in different device size https://stackoverflow.com/a/32100492 function slickify(){ slider.slick({ slide:'.page_section', infinite: false, arrows:true, prevArrow:'.page_arrow_up_wrapper', nextArrow:'.page_arrow_down_wrapper', verticalSwiping:true, fade:false, dots:false, autoplay:false, vertical:true, responsive: [ { breakpoint: 991, settings: "unslick" } ] }); } slickify(); jQuery(window).resize(function(){ var $windowWidth = jQuery(window).width(); if ($windowWidth > 991) { slickify(); } }); //for mouse wheel activation slider.on('wheel', (function(e) { e.preventDefault(); if (e.originalEvent.deltaY < 0) { jQuery(this).slick('slickPrev'); } else { jQuery(this).slick('slickNext'); } })); //for header/element manipulation, add class if first slide active slider.on('afterChange', function(event, slick, currentSlide){ if (currentSlide === 0) { console.log('First Slide'); jQuery('header').eq(currentSlide).addClass('first_slide_active'); } else { jQuery('header').removeClass('first_slide_active'); console.log('Not First Slide'); } }); });