@thisvedmak

Нужно добавить икончи людей слева от слайдера, но когда я начинаю их ставить у меня все расплывается?

<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">'
    });
});
  • Вопрос задан
  • 35 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы