374 lines
9.2 KiB
HTML
374 lines
9.2 KiB
HTML
|
<!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 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<section class="vertical-center-4 slider">
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=1">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=2">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=3">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=4">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=5">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=6">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=7">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=8">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=9">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=10">
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="vertical-center-3 slider">
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=1">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=2">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=3">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=4">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=5">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=6">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=7">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=8">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=9">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=10">
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="vertical-center-2 slider">
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=1">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=2">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=3">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=4">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=5">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=6">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=7">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=8">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=9">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=10">
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="vertical-center slider">
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=1">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=2">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=3">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=4">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=5">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=6">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=7">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=8">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=9">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=10">
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="vertical slider">
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=1">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=2">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=3">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=4">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=5">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=6">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=7">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=8">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=9">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x100?text=10">
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="regular slider">
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=1">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=2">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=3">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=4">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=5">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=6">
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="center slider">
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=1">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=2">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=3">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=4">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=5">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=6">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=7">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=8">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=9">
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="variable slider">
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=1">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/200x300?text=2">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/100x300?text=3">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/200x300?text=4">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/350x300?text=5">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img src="http://placehold.it/300x300?text=6">
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="lazy slider" data-sizes="50vw">
|
||
|
|
<div>
|
||
|
|
<img data-lazy="http://placehold.it/350x300?text=1-350w" data-srcset="http://placehold.it/650x300?text=1-650w 650w, http://placehold.it/960x300?text=1-960w 960w" data-sizes="100vw">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img data-lazy="http://placehold.it/350x300?text=2-350w" data-srcset="http://placehold.it/650x300?text=2-650w 650w, http://placehold.it/960x300?text=2-960w 960w" data-sizes="100vw">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img data-lazy="http://placehold.it/350x300?text=3-350w" data-srcset="http://placehold.it/650x300?text=3-650w 650w, http://placehold.it/960x300?text=3-960w 960w" data-sizes="100vw">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img data-lazy="http://placehold.it/350x300?text=4-350w" data-srcset="http://placehold.it/650x300?text=4-650w 650w, http://placehold.it/960x300?text=4-960w 960w" data-sizes="100vw">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img data-lazy="http://placehold.it/350x300?text=5-350w" data-srcset="http://placehold.it/650x300?text=5-650w 650w, http://placehold.it/960x300?text=5-960w 960w" data-sizes="100vw">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<!-- this slide should inherit the sizes attr from the parent slider -->
|
||
|
|
<img data-lazy="http://placehold.it/350x300?text=6-350w" data-srcset="http://placehold.it/650x300?text=6-650w 650w, http://placehold.it/960x300?text=6-960w 960w">
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<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).on('ready', function() {
|
||
|
|
$(".vertical-center-4").slick({
|
||
|
|
dots: true,
|
||
|
|
vertical: true,
|
||
|
|
centerMode: true,
|
||
|
|
slidesToShow: 4,
|
||
|
|
slidesToScroll: 2
|
||
|
|
});
|
||
|
|
$(".vertical-center-3").slick({
|
||
|
|
dots: true,
|
||
|
|
vertical: true,
|
||
|
|
centerMode: true,
|
||
|
|
slidesToShow: 3,
|
||
|
|
slidesToScroll: 3
|
||
|
|
});
|
||
|
|
$(".vertical-center-2").slick({
|
||
|
|
dots: true,
|
||
|
|
vertical: true,
|
||
|
|
centerMode: true,
|
||
|
|
slidesToShow: 2,
|
||
|
|
slidesToScroll: 2
|
||
|
|
});
|
||
|
|
$(".vertical-center").slick({
|
||
|
|
dots: true,
|
||
|
|
vertical: true,
|
||
|
|
centerMode: true,
|
||
|
|
});
|
||
|
|
$(".vertical").slick({
|
||
|
|
dots: true,
|
||
|
|
vertical: true,
|
||
|
|
slidesToShow: 3,
|
||
|
|
slidesToScroll: 3
|
||
|
|
});
|
||
|
|
$(".regular").slick({
|
||
|
|
dots: true,
|
||
|
|
infinite: true,
|
||
|
|
slidesToShow: 3,
|
||
|
|
slidesToScroll: 3
|
||
|
|
});
|
||
|
|
$(".center").slick({
|
||
|
|
dots: true,
|
||
|
|
infinite: true,
|
||
|
|
centerMode: true,
|
||
|
|
slidesToShow: 5,
|
||
|
|
slidesToScroll: 3
|
||
|
|
});
|
||
|
|
$(".variable").slick({
|
||
|
|
dots: true,
|
||
|
|
infinite: true,
|
||
|
|
variableWidth: true
|
||
|
|
});
|
||
|
|
$(".lazy").slick({
|
||
|
|
lazyLoad: 'ondemand', // ondemand progressive anticipated
|
||
|
|
infinite: true
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|