Slixlider works very crookedly, I don’t understand what’s wrong. Who will help?

P

polxz2021-02-18 08:10:13

Slick

polxz, 2021-02-18 08:10:13

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:[email protected]&family=Roboto+Condensed&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" type="text/css" href="/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="/slick/slick-theme.css"/>
  <link rel="stylesheet" href="css/jquery.fancybox.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <header class="header">
    <div class="container">
      <div class="header__inner">
        <a href="#" class="logo">
          <img class="logo__link" src="images/logo.svg" alt="logo">
        </a>
        <nav class="menu">
          <ul class="menu__list">
            <li class="menu__item"><a class="menu__list-link" href="#">О НАС</a></< /li>>
            <li class="menu__item"><a class="menu__list-link" href="#">АВТОПАРК</a></< /li>>
            <li class="menu__item"><a class="menu__list-link" href="#">ОТЗЫВЫ</a></< /li>>
            <li class="menu__item"><a class="menu__list-link" href="#">УСЛОВИЯ</a></< /li>>
            <li class="menu__item"><a class="menu__list-link" href="#">КОНТАКТЫ</a></< /li>>
          </ul>
        </nav>
        <a class="phone" href="tel:+380999999090">+38 (099) 999 90 90</a>
      </div>
  </header>
  <section class="top">
    <div class="container">
      <div class="top__heading">
        <div class="top__content">
          <h1 class="top__title">
            Каршеринг в Киеве
            LUX автомобили
          </h1>
          <p class="top__text">
            Закажи эксклюзивный автомобиль через мобильное приложение в любой точке города
          </p>
          <a class="application-btn" href="#">Скачать приложение</a>
        </div>
        <div class="top__slider">
          <div class="top__slider-item">
            <img class="top__slider-images" src="images/slider-img.png" alt="">
            <p class="top__slider-text">
              4 грн/мин 5 мест 50 тыс. км пробег
            </p>
          </div>
          <div class="top__slider">
            <div class="top__slider-item">
              <img class="top__slider-images" src="images/slider-img.png" alt="">
              <p class="top__slider-text">
                4 грн/мин 5 мест 50 тыс. км пробег
              </p>
            </div>
            <div class="top__slider">
              <div class="top__slider-item">
                <img class="top__slider-images" src="images/slider-img.png" alt="">
                <p class="top__slider-text">
                  4 грн/мин 5 мест 50 тыс. км пробег
                </p>
              </div>
              <div class="top__slider">
                <div class="top__slider-item">
                  <img class="top__slider-images" src="images/slider-img.png" alt="">
                  <p class="top__slider-text">
                    4 грн/мин 5 мест 50 тыс. км пробег
                  </p>
                </div>
                <div class="top__slider">
                  <div class="top__slider-item">
                    <img class="top__slider-images" src="images/slider-img.png" alt="">
                    <p class="top__slider-text">
                      4 грн/мин 5 мест 50 тыс. км пробег
                    </p>
                  </div>
                  <div class="top__slider">
                    <div class="top__slider-item">
                      <img class="top__slider-images" src="images/slider-img.png" alt="">
                      <p class="top__slider-text">
                        4 грн/мин 5 мест 50 тыс. км пробег
                      </p>
                    </div>

                  </div>
                </div>
                <div class="top__bottom">
                  <div class="top__items">
                    <div class="top__item">
                      <img class="top__item-img" src="" alt="images/icon-1.svg">
                      <p class="top__item-text">
                        Более 300 автомобилей в вашем распоряжении
                      </p>
                    </div>
                    <div class="top__item">
                      <img class="top__item-img" src="" alt="images/icon-2.svg">
                      <p class="top__item-text">
                        Дешевле такси и собственного автомобиля
                      </p>
                    </div>
                    <div class="top__item">
                      <img class="top__item-img" src="" alt="images/icon-3.svg">
                      <p class="top__item-text">
                        Лучшие автомобили в любой точке города
                      </p>
                    </div>
                  </div>
                  <div class="top__links">
                    <a class="top__link" href="#">Условия аренды автомобиля</a>
                    <a class="top__link" href="#">Публичный договор</a>
                  </div>
                </div>
              </div>
  </section>




  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="libs/slick.min.js"></script>
  <script src="js/jquery.fancybox.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

$(function(){

    $('.top__slider').slick({
        arrows: false,
        dots: true,
    }); 

});

html{
    box-sizing: content-box;
}
*,
*::after,
*::before{
    box-sizing: inherit;
}

a{
    text-decoration: none;
}

.container{
    max-width: 1220px;
    padding: 0 10px;
    margin: 0 auto;
}
body{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #1B1818;
}
.header{
    background: #332208;
}
.header__inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

.menu__list{
    display: flex;
}
.menu__item{
    margin: 0 15px;
}
.menu__list-link{
    text-transform: uppercase;
    color: #fefefe;
    font-size: 18px;
    line-height: 21px;
    padding-bottom: 5px;
    transition: all .5s;
    border-bottom: 1px solid transparent;
}

.menu__list-link:hover{
    border-bottom: 1px solid #FEFEFE;
}

.phone{
    color: #fefefe;
    font-size: 18px;
    line-height: 21px; 
}
.top__heading{
    display: flex;
    padding-top: 50px;
    padding-bottom: 30px;
}

.top__content{
    text-align: center;
    padding-top: 90px;
    width: 50%;
}

.top__title{
    font-family: 'Fira Sans', sans-serif;
    font-weight: 500;
    font-size: 48px;
    line-height: 58px;
    margin:0 auto 15px;
    max-width: 455px;
}
.top__text{
    font-size: 24px;
    line-height: 28px;
    margin:0 auto 60px;
    max-width: 470px;
}
.application-btn{
    text-transform: uppercase;
    color: #fefefe;
    background: #C5AC2D;
    padding: 16px 19px 15px;
    transition: all.5s;
    border: 1px solid transparent;
}
.application-btn:hover{
    color: #C5AC2D;
    background: #fefefe;
    border: 1px solid #C5AC2D;
}
.top__slider{
    width: 50%;
}

.top__slider .slick-dots{
    position: absolute;
    right: 0;
    top: 50%;
    transform: tanslateY(-50%);
}

.slick-dots{
    list-style: none;
    text-align: center;
}
.slick-dots button{
    font-size: 0;
    width: 8px;
    height: 8px;
    background-color: #332208;
    border: none;
    border-radius: 50%;
    padding: 0;
.slick-active button{
    width: 16px;
    height: 16px;
}
.top__slider-text{
    padding-right: 100px;
    text-align: right;
    font-family: 'Fira Sans', sans-serif;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

F

fallus, 2021-02-18
@fallus

You have a slider applied to the class .top__slider
At the same time, you have several elements in the markup with the class .top__slider.
And one is in the other.

<div class="top__slider">
          <div class="top__slider-item">
            <img class="top__slider-images" src="images/slider-img.png" alt="">
            <p class="top__slider-text">
              4 грн/мин 5 мест 50 тыс. км пробег
            </p>
          </div>
          <div class="top__slider">

In other words, it's in the markup.