How can I create a carousel slick with multiple rows? (ok)
https://stackoverflow.com/questions/22545466/how-can-i-create-a-carousel-with-multiple-rows
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.grandchild {
float: left;
padding: 15px;
}
.clearboth:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="slider">
<div class="grandchild clearboth">
<img src="http://placehold.it/350x100?text=1">
</div>
<div class="grandchild clearboth">
<img src="http://placehold.it/350x100?text=2">
</div>
<div class="grandchild clearboth">
<img src="http://placehold.it/350x100?text=3">
</div>
<div class="grandchild clearboth">
<img src="http://placehold.it/350x100?text=4">
</div>
<div class="grandchild clearboth">
<img src="http://placehold.it/350x100?text=5">
</div>
<div class="grandchild clearboth">
<img src="http://placehold.it/350x100?text=6">
</div>
<div class="grandchild clearboth">
<img src="http://placehold.it/350x100?text=7">
</div>
<div class="grandchild clearboth">
<img src="http://placehold.it/350x100?text=8">
</div>
<div class="grandchild clearboth">
<img src="http://placehold.it/350x100?text=9">
</div>
<div class="grandchild clearboth">
<img src="http://placehold.it/350x100?text=10">
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slick({
dots: false,
slidesPerRow: 4,
rows: 2
});
});
</script>
</body>
</html>PreviousOwl-carousel2 DEMO - items in 2 rows (oke)NextMột cách sử dụng create <style> để thêm style (ok)
Last updated
