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

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>

[.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
Before </head> tag
Before </head> tag
Before </head> tag

<style>
.item {display: inline-block;}
.list {display:block !important;}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
   outline: none;
}
.slick-slide, .slick-slide *{ outline: none !important; }
</style>