début du thème, footer et header en mobile
This commit is contained in:
Valentin
373
web/themes/erabletheme/librairies/slick-1.8.1/index.html
Normal file
373
web/themes/erabletheme/librairies/slick-1.8.1/index.html
Normal file
@@ -0,0 +1,373 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user