Криво стоит slick slider

92
11 февраля 2022, 07:10
 $('.done-block').slick({
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll:3,
    adaptiveHeight: true,
    autoplay: false,
    autoplaySpeed: 2000,
    arrows: true,
  });
.slick
  &-arrow
    position: absolute
    top: -90px
    background:  $main-color
    width: 40px
    display: block
    height: 40px
    border-radius: 4px
    border-radius: 4px
    z-index: 2
    outline: none
    border: $main-color
  &-prev
    left: 20px
    background: #fff
    background-image: url("../img/done/prev-arrow.png") 
    background-repeat: no-repeat
    background-position: center
    background-size: contain
    text-decoration: none
    font-size: 0
  &-next
    background: #fff
    background-image: url("../img/done/next-arrow.png") 
    background-repeat: no-repeat
    background-position: center
    background-size: contain
    right: 20px
    text-decoration: none
    font-size: 0
<section class="done">
      <div class="container">
        <div class="done-title">Реализованные объекты</div>
        <!-- /.done-block__title -->
        <div class="done-block">
          <div class="done-block__item">
            <div class="done-block__card">
              <img src="img/done/slide-1.jpg" alt="slide-1" class="done-block__item-img">
              <span class="done-block__item-text">Акция на сруб из зимнего леса</span>
              <!-- /.done-block__item-text -->
              <div class="done-block__item-icon">
                <img src="img/done/icon.png" alt="icon">
              </div>
            </div>
          </div>
          <!-- /.done-block__item -->
          <div class="done-block__item">
            <div class="done-block__card">
              <img src="img/done/slide-2.jpg" alt="slide-2" class="done-block__item-img">
              <span class="done-block__item-text">Реализованный объект. Баня из бревна 128,7 м.кв.</span>
              <!-- /.done-block__item-text -->
              <div class="done-block__item-icon">
                <img src="img/done/icon.png" alt="icon">
              </div>
            </div>
          </div>
          <!-- /.done-block__item -->
          <div class="done-block__item">
            <div class="done-block__card">
              <img src="img/done/slide-3.jpg" alt="slide-3" class="done-block__item-img">
              <span class="done-block__item-text">Реализованный объект. Рубленный дом 141,4 м.кв. из архангельской сосны</span>
              <!-- /.done-block__item-text -->
              <div class="done-block__item-icon">
                <img src="img/done/icon.png" alt="icon">
              </div>
            </div>
          </div>
          <!-- /.done-block__item -->
          <!-- /.done-block__item -->
          <div class="done-block__item">
            <div class="done-block__card">
              <img src="img/done/slide-3.jpg" alt="slide-3" class="done-block__item-img">
              <span class="done-block__item-text">Реализованный объект. Рубленный дом 141,4 м.кв. из архангельской сосны</span>
              <!-- /.done-block__item-text -->
              <div class="done-block__item-icon">
                <img src="img/done/icon.png" alt="icon">
              </div>
            </div>
          </div>
          <!-- /.done-block__item -->
          <div class="done-block__item">
            <div class="done-block__card">
              <img src="img/done/slide-2.jpg" alt="slide-2" class="done-block__item-img">
              <span class="done-block__item-text">Реализованный объект. Баня из бревна 128,7 м.кв.</span>
              <!-- /.done-block__item-text -->
              <div class="done-block__item-icon">
                <img src="img/done/icon.png" alt="icon">
              </div>
            </div>
          </div>
          <!-- /.done-block__item -->
          <div class="done-block__item">
            <div class="done-block__card">
              <img src="img/done/slide-1.jpg" alt="slide-1" class="done-block__item-img">
              <span class="done-block__item-text">Акция на сруб из зимнего леса</span>
              <!-- /.done-block__item-text -->
              <div class="done-block__item-icon">
                <img src="img/done/icon.png" alt="icon">
              </div>
            </div>
          </div>
          <!-- /.done-block__item -->
        </div>
        <!-- /.done-block -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /.done -->

Всего на сайте 4 слайдера, интересует второй в секции "Реализованные объекты"

Слайдер смещен вправо, там какой-то отступ, не понятно откуда берется и как его убрать...

Answer 1
.slick-next {
background: #fff;
background-image: url(../img/done/next-arrow.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
right: 0px; /* было 20px*/
text-decoration: none;
font-size: 0;

}

P.S Научитесь пользоваться инструментами разработчика от Google!!! Жмете F12 на вашей странице, заходите во вкладку Elemets находите свой элемент, и в Styles все видно, какие классы к чему применены.

READ ALSO
Javafx. Удаление строки из TableView и MySQL

Javafx. Удаление строки из TableView и MySQL

Нужно реализовать удаление строки из базы данных при вводе номера этой строки (id_depositor) в текстовое поле id_depositorFieldДобавление новых записей...

213
Как вывести ответ в JSON формате

Как вывести ответ в JSON формате

Всем привет я хочу удалить все сообщения, и если сообщения удалились то мне должен придти ответ в JSON формате {"Все сообщения удалены"} Однако...

114
Gradle не может скачать jar файлы

Gradle не может скачать jar файлы

Ссылки работаю перехожу все качает, но выходит ошибка:

84