This is the default markup with classes you must use if you want to create a slick slider.
HTML markup
|
1 2 3 4 5 |
<div class="ct-slick ct-js-slick"> <div class="item">...</div> ... <div class="item">...</div> </div> |
— Main Slider
If you want to achieve slider looking like the one on our demo page use this markup example
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<div data-items="1" data-dots="true" data-height="100%" data-draggable="false" data-arrows="false" class="ct-js-slick ct-slick--parallaxMode ct-u-displayTable ct-dots--type1 ct-dots--positionBottom"> <div data-parallax="50" data-background="../assets/images/demo-content/drone/slider-item-3.jpg" class="item text-center"> <div class="item-inner"> <div class="ct-pageHeader ct-pageHeader--type1"> <img src="../assets/images/demo-content/drone/logo-brand.png" class="ct-pageHeader-image"> <h1 class="ct-pageHeader-title ct-u-color--white">Aerial Views<span class="ct-u-colorMotive">Unleashed Now</span></h1> <div class="btn-group ct-u-margin-top-30"><a href="#" class="btn btn-accient">Buy now for $299</a><a href="#next-section-1" data-scroll="#next-section-1" class="btn btn-transparent btn--withIcon btn--motiveColor">See why to Buy<i class="fa fa-caret-right"></i></a> </div> </div> </div> </div> <div data-parallax="50" data-background="../assets/images/demo-content/drone/slider-item.jpg" class="item"> <div class="item-inner"> <div class="ct-pageHeader ct-pageHeader--type2"> <img src="../assets/images/demo-content/drone/logo-brand.png" class="ct-pageHeader-image"> <h1 class="ct-pageHeader-title ct-u-colorMotive ct-u-font-weight--700">High Durability</h1><a href="#" class="btn btn-accient ct-u-margin-top-25">Buy now for $299</a> </div> </div> </div> <div data-parallax="50" data-background="../assets/images/demo-content/drone/slider-item-2.jpg" class="item"> <div class="item-inner"> <div class="ct-pageHeader ct-pageHeader--type3"> <div class="media"> <div class="media-left"> <img src="../assets/images/demo-content/drone/logo-brand.png" class="ct-pageHeader-image"> </div> <div class="media-body"> <h1 class="ct-pageHeader-title ct-u-color--white">Stands for<span class="ct-u-colorMotive">Quality</span></h1> </div> </div> <div class="btn-group ct-u-margin-top-40"><a href="#" class="btn btn-accient">Buy now for $299</a><a href="#" class="btn btn-transparent btn--withIcon btn--white">See why to Buy<i class="fa fa-caret-right"></i></a> </div> </div> </div> </div> </div> </div> |
Screenshot
Main slider
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
$slick.each(function () { var $this = $(this), // Items Settings ctslidesToShow = parseInt(validatedata($this.attr("data-items"), 1), 10), // Non Responsive slides_xs = parseInt(validatedata($this.attr("data-items-xs"), ctslidesToShow), 10), slides_sm = parseInt(validatedata($this.attr("data-items-sm"), slides_xs), 10), // Default Item from smaller Device; slides_md = parseInt(validatedata($this.attr("data-items-md"), slides_sm), 10), // Default Item from smaller Device; slides_lg = parseInt(validatedata($this.attr("data-items-lg"), slides_md), 10), // Default Item from smaller Device; ctaccessibility = parseBoolean($this.attr("data-accessibility"), true), ctadaptiveHeight = parseBoolean($this.attr("data-adaptiveHeight"), false), ctautoplay = parseBoolean($this.attr("data-autoplay"), false), ctarrows = parseBoolean($this.attr("data-arrows"), true), ctcenterMode = parseBoolean($this.attr("data-centerMode"), false), ctdots = parseBoolean($this.attr("data-dots"), false), ctdraggable = parseBoolean($this.attr("data-draggable"), true), ctfade = parseBoolean($this.attr("data-fade"), false), ctfocusOnSelect = parseBoolean($this.attr("data-focusOnSelect"), false), ctinfinite = parseBoolean($this.attr("data-infinite"), true), ctmobileFirst = parseBoolean($this.attr("data-mobileFirst"), true), ctpauseOnHover = parseBoolean($this.attr("data-pauseOnHover"), true), ctpauseOnDotsHover = parseBoolean($this.attr("data-pauseOnDotsHover"), false), ctswipe = parseBoolean($this.attr("data-swipe"), true), ctswipeToSlide = parseBoolean($this.attr("data-swipeToSlide"), true), cttouchMove = parseBoolean($this.attr("data-touchMove"), true), ctuseCSS = parseBoolean($this.attr("data-useCSS"), true), ctvariableWidth = parseBoolean($this.attr("data-variableWidth"), false), ctvertical = parseBoolean($this.attr("data-vertical"), false), ctrtl = parseBoolean($this.attr("data-rtl"), false), ctasNavFor = validatedata($this.attr("data-asNavFor")), ctappendArrows = validatedata($this.attr("data-appendArrows")), ctprevArrow = validatedata($this.attr("data-prevArrow"), '<button type="button" class="slick-nav slick-prev"></button>'), ctnextArrow = validatedata($this.attr("data-nextArrow"), '<button type="button" class="slick-nav slick-next"></button>'), ctcenterPadding = validatedata($this.attr("data-centerPadding"), '50px'), ctcssEase = validatedata($this.attr("data-cssEase"), 'ease'), cteasing = validatedata($this.attr("data-easing"), 'linear'), ctlazyLoad = validatedata($this.attr("data-lazyLoad"), 'ondemand'), ctrespondTo = validatedata($this.attr("data-respondTo"), 'window'), ctslide = validatedata($this.attr("data-slide")), ctanimations = validatedata($this.attr("data-animations"), true), ctedgeFriction = parseInt(validatedata($this.attr("data-edgeFriction"), 0.15), 10), ctinitialSlide = parseInt(validatedata($this.attr("data-initialSlide"), 0), 10), ctautoplaySpeed = parseInt(validatedata($this.attr("data-autoplaySpeed"), 5000), 10), ctslidesToScroll = parseInt(validatedata($this.attr("data-slidesToScroll"), 1), 10), ctspeed = parseInt(validatedata($this.attr("data-speed"), 300), 10), cttouchThreshold = parseInt(validatedata($this.attr("data-touchThreshold"), 5), 10); $this.slick({ slidesToShow: ctslidesToShow, // Number of slides to show accessibility: ctaccessibility, // Enables tabbing and arrow key navigation adaptiveHeight: ctadaptiveHeight, // Enables adaptive height for single slide horizontal carousels. autoplay: ctautoplay, // Enables Autoplay autoplaySpeed: ctautoplaySpeed, // Autoplay Speed in milliseconds arrows: ctarrows, // Prev/Next Arrows asNavFor: ctasNavFor, // Set the slider to be the navigation of other slider (Class or ID Name) appendArrows: ctappendArrows, // Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object) prevArrow: ctprevArrow, // Allows you to select a node or customize the HTML for the "Previous" arrow. nextArrow: ctnextArrow, // Allows you to select a node or customize the HTML for the "Next" arrow. centerMode: ctcenterMode, // Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts. centerPadding: ctcenterPadding, // Side padding when in center mode (px or %) cssEase: ctcssEase, // CSS3 Animation Easing dots: ctdots, // Show dot indicators draggable: ctdraggable, // Enable mouse dragging fade: ctfade, // Enable fade focusOnSelect: ctfocusOnSelect, // Enable focus on selected element (click) easing: cteasing, // Add easing for jQuery animate. Use with easing libraries or default easing methods edgeFriction: ctedgeFriction, // Resistance when swiping edges of non-infinite carousels infinite: ctinfinite, // Infinite loop sliding initialSlide: ctinitialSlide, // Slide to start on lazyLoad: ctlazyLoad, // Set lazy loading technique. Accepts 'ondemand' or 'progressive' mobileFirst: ctmobileFirst, // Responsive settings use mobile first calculation pauseOnHover: ctpauseOnHover, // Pause Autoplay On Hover pauseOnDotsHover: ctpauseOnDotsHover, // Pause Autoplay when a dot is hovered respondTo: ctrespondTo, // Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two) slide: ctslide, // Element query to use as slide slidesToScroll: ctslidesToScroll, // Number of slides to scroll speed: ctspeed, // Slide/Fade animation speed swipe: ctswipe, // Enable swiping swipeToSlide: ctswipeToSlide, // Allow users to drag or swipe directly to a slide irrespective of slidesToScroll touchMove: cttouchMove, // Enable slide motion with touch touchThreshold: cttouchThreshold, // To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slide useCSS: ctuseCSS, // Enable/Disable CSS Transitions variableWidth: ctvariableWidth, // Variable width slides vertical: ctvertical, // Vertical slide mode rtl: ctrtl // Change the slider's direction to become right-to-left // Responsive Breakpoints // end Responsive Breakpoints }); // end slick initialize $this.slick('setOption', 'responsive', [{ breakpoint: $width_lg, settings: { slidesToShow: slides_lg } }], true) $this.slick('setOption', 'responsive', [{ breakpoint: $width_md, settings: { slidesToShow: slides_md } }], true) $this.slick('setOption', 'responsive', [{ breakpoint: $width_sm, settings: { slidesToShow: slides_sm } }], true) $this.slick('setOption', 'responsive', [{ breakpoint: $width_xs, settings: { slidesToShow: slides_xs } }], true) |
Slick Custom Tweaks
New Responsive data-attributes for ease of use:
- data-items-xl
- data-items-lg
- data-items-md
- data-items-sm
- data-items-xs
Slick Documentation can be found here. Files are bundled inside sella.min.js & style.css