Script Writer

SlickJs Code Generator

Generate SlickJs code & copy it right into your project. No need to hassle around code again!

Clone IT

STEP 1

Fill out the fields with your values and classes

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

STEP 3

Add these combo classes

Please add .wrapper combo class to your collection wrapper

Please add .list combo class to your collection List

Please add .item combo to your collection Item

STEP 2

Add the <script> and <style> to page settings

Before </body> tag

[.com]// when document is fully loaded [.com]

‍

[.var]$[.var]([.var]document[.var]).ready([.var]function[.var](){

[.var]$[.var]([.attr]'.list'[.attr]).slick({
[#dots]dots: [.red][#dots-text]false[#dots-text][.red],[#dots]

[#speed]speed: [.red] [#speed-num]600[#speed-num][.red],[#speed]

infinite: [.red][#infinite]true[#infinite][.red],

[#slidesToShow]slidesToShow: [.red][#slideshow-num]3[#slideshow-num][.red],[#slidesToShow]

[#slidesToScroll]slidesToScroll: [.red][#slide-scroll-text]1[#slide-scroll-text][.red],[#slidesToScroll]

[#arrows]arrows: [.red][#arrow-text]false[#arrow-text][.red],[#arrows]

centerMode: [.red][#centerMode]true[#centerMode][.red],

[#touchThreshold]touchThreshold:[.red][#threshText]300[#threshText][.red],[#touchThreshold]

responsive: [
{
// tablet
breakpoint: [.red][#tab-break]991[#tab-break][.red],
settings: {
slidesToShow: [.red][#tab-sts]2[#tab-sts][.red]
}
},
{
// mobile portrait
breakpoint: [.red][#mob-break]479[#mob-break][.red],
settings: {
slidesToShow: [.red][#mob-sts]1[#mob-sts][.red]
}
}
]
});

[.var]$[.var]([.attr][#slide-prev-text]'.slider-prev'[#slide-prev-text][.attr]).click([.var]function[.var](){
[.var]$[.var]([.attr]this[.attr]).closest([.attr][.cms-list]'.container'[.cms-list][.attr]).find([.attr]".list"[.attr]).slick('slickPrev');
});

[.var]$[.var]([.attr][#slide-next-text]'.slider-next'[#slide-next-text][.attr]).click([.var]function[.var](){
[.var]$[.var]([.attr]this[.attr]).closest([.attr][.cms-list]'.container'[.cms-list][.attr]).find([.attr]".list"[.attr]).slick('slickNext');
});

});

</script>

Before </head> tag