notice: please create a custom view template for the blocks class view-blocks.html
Slick Slider - Multiple Items Ratings
This shows two items at a time, but you can show as many as you like.
Could be good for a testimonials type slider, or maybe ratings system.
tags
slider, slick, slick slider, slider multiple, slider ratings
html
Slick Slider Multi Item
Showing how to add custom html into the slide items and show more than one at a time
css
.slide { width:300px; height:200px; background:#444; color:#FFF; margin:10px; border-radius:10px; text-align:center; font-size:34px; font-weight:bold; padding:50px; } .stars { color:yellow; } .slick-slide { margin: 0 10px; }
scripts
javascript
$(document).ready(function(){ $('.slider-multi').slick({ slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, dots: true, arrows:true }); });
source_url
https://kruxor.com/view/code/yGkvM/slick-slider-showing-multiple-items-at-a-time/search_text:::slick
framework
none
block_type
slider
preview_image
https://i.imgur.com/I4urStv.gif
id: 3
uid: HqExW
insdate: 2022-04-03 23:46:26
title: Slick Slider - Multiple Items Ratings
additional:
This shows two items at a time, but you can show as many as you like.
Could be good for a testimonials type slider, or maybe ratings system.
category: Slider
tags: slider, slick, slick slider, slider multiple, slider ratings
html:
Slick Slider Multi Item
Showing how to add custom html into the slide items and show more than one at a time
css: .slide { width:300px; height:200px; background:#444; color:#FFF; margin:10px; border-radius:10px; text-align:center; font-size:34px; font-weight:bold; padding:50px; } .stars { color:yellow; } .slick-slide { margin: 0 10px; }
scripts:
javascript: $(document).ready(function(){ $('.slider-multi').slick({ slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, dots: true, arrows:true }); });
php:
source_url: https://kruxor.com/view/code/yGkvM/slick-slider-showing-multiple-items-at-a-time/search_text:::slick
framework: none
version:
block_type: slider
preview_image: https://i.imgur.com/I4urStv.gif