Я это видел, и читал. Ну и на том спасибо. Разобрался практически со всем. Только вот не совсем понятно, стили подключенные тегом <style type="text/css"> в <head>, к каким элементам по классу обращаются? К библиотеке? У меня нет в 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>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".vertical-center-4").slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
</script>
</body>
</html>