$(function(){ // $('.slide').slick() $('.slide').slick({ infinite: false, speed: 300, slidesToShow: 6, slidesToScroll: 1, centerMode: false, prevArrow:'<button type="button" class="slick-prev"><img src="/assets/images/arrow_back.png"></button>', nextArrow:'<button type="button" class="slick-next"><img src="/assets/images/arrow_next.png"></button>', responsive: [ { breakpoint: 767, settings: { rows: 1, slidesToShow: 1, slidesToScroll: 1, prevArrow:'<button type="button" class="slick-prev"><img src="/wp-content/themes/site-theme/assets/images/arrow_left.png"></button>', nextArrow:'<button type="button" class="slick-next"><img src="/wp-content/themes/site-theme/assets/images/arrow_right.png"></button>', } }, { breakpoint: 1023, settings: { slidesToShow: 3, slidesToScroll: 1, prevArrow:'<button type="button" class="slick-prev"><img src="/wp-content/themes/site-theme/assets/images/arrow_left.png"></button>', nextArrow:'<button type="button" class="slick-next"><img src="/wp-content/themes/site-theme/assets/images/arrow_right.png"></button>', } }, { breakpoint: 1200, settings: { slidesToShow: 4, slidesToScroll: 1, prevArrow:'<button type="button" class="slick-prev"><img src="/wp-content/themes/site-theme/assets/images/arrow_left.png"></button>', nextArrow:'<button type="button" class="slick-next"><img src="/wp-content/themes/site-theme/assets/images/arrow_right.png"></button>', } }, { breakpoint: 3840, settings: { slidesToShow: 5, slidesToScroll: 1, prevArrow:'<button type="button" class="slick-prev"><img src="/wp-content/themes/site-theme/assets/images/arrow_left.png"></button>', nextArrow:'<button type="button" class="slick-next"><img src="/wp-content/themes/site-theme/assets/images/arrow_right.png"></button>', } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); });