I need to add icons of people to the left of the slider, but when I start to put them everything blurs?

T

thisvedmak2019-06-22 15:37:21

css

thisvedmak, 2019-06-22 15:37:21

<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">'
    });
});