<img src="https://habrastorage.org/webt/5d/0e/21/5d0e216c2f3a0346888313.jpeg" alt="image"/><img src="https://habrastorage.org/webt/5d/0e/21/5d0e215cc8f99766495924.jpeg" alt="image"/><meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
</head>
<body>
<div class="slide_verticle">
<div class="slide_one">
<h3>John Doe</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <br> nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p>
</div>
<div class="slide_two">
<h3>John Doe</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <br> nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p>
</div><div class="slide_two">
<h3>John Doe</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <br> nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="slick.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background: url(background.png);
}
.slide_verticle {
display: grid;
justify-content: center;
}
.slide_one {
max-width: 650px;
min-height: 160px;
background-color: #fff;
border-radius: 8px;
margin: 40px;
}
.slide_one h3,p {
padding: 13px;
}
.slide_two {
max-width: 650px;
min-height: 160px;
background-color: #fff;
border-radius: 8px;
margin: 40px;
}
.slide_two h3,p {
padding: 13px;
}
.slick-arrow {
display: flex;
margin: 0 auto;
}
.photo {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fff;
float: left;
}
JS
$(function(){
$('.slide_verticle').slick({
vertical: true,
verticalSwiping: true,
slidesToShow: 2,
autoplay: true,
prevArrow: '<img src="up.png">',
nextArrow: '<img src="down.png">'
});
});
