Как отодвинуть стрелки от блоков?

Question

[Ольга]

Доброй ночи!
Не получается отодвинуть блоки от стрелок, текст на них наползает. Как можно их отодвинуть? В настройках самого слайдера стоит, чтобы отображал по 3 блока при такой разрешении экрана
Заранее спасибо!

Comments

[Dmmitry]

дайте код или ссылку на сайт

[Ольга]

Дмитрий Чередниченко,

код слайдера:

<div class="regi_steps">
  <div><center><img class="slider-img" src="/slider/slick/zayavka.png" alt="Оставить заявку" /></center>Вы оставляете заявку на внесение изменений <br>и мы перезваниваем Вам для уточнения информации;</div>
  <div><center><img class="slider-img" src="/slider/slick/plane.png" alt="Список документов" /></center>Юрист направляет Вам на электронную почту список документов, необходимых для начала работы;</div>
  <div><center><img class="slider-img" src="/slider/slick/money.png" alt="Оплачиваете заказ" /></center>Вы отправляете документы по электронной <br>почте и оплачиваете Ваш заказ;</div>
  <div><center><img class="slider-img" src="/slider/slick/send-docs.png" alt="Отправляем документы" /></center>В течение дня мы отправляем готовый <br>пакет документов в электронном виде;</div>
  <div><center><img class="slider-img" src="/slider/slick/walk.png" alt="Подача в ФНС" /></center>Оплачиваете госпошлину и подаёте <br>документы в регистрирующий орган;</div>
  <div><center><img class="slider-img" src="/slider/slick/ok.png" alt="Регистрация успешна" /></center>Через 5 рабочих дней забираете лист записи <br>из ЕГРЮЛ. Смена юридического адреса <br>компании завершена.</div>
</div>

JS слайдера:

$(document).ready(function(){
  $('.regi_steps').slick({
  dots: true,
  infinite: true,
  //speed: 300, 
  slidesToShow: 3,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1440,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        dots: false
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: false
      }
    }
  ]
});
  });

[Ярослав Иванов]

Ольга, <center>
Как там в каменном веке ?

[Ольга]

Ярослав Иванов, через text-align не делалось. пришлось к каменному веку возвращаться

[Dmmitry]

Ольга, css тоже нужно

[Ankhena]

@olyabolya
Открываете инспектор кода (инструкция, например, тут sitist.ru/info-chrome-devtools.htm) и смотрите как спозиционированы стрелки.
Изменяете на что-то типа left: -40px и right: -40px

.slick-prev {
    left: -40px;
}
.slick-next {
    right: -40px;
}

Тег <center> умер еще в прошлом веке. Для центрирования используется CSS, вариантов масса.

код слайдера:

Если речь о позиционировании стрелок, то нужен html и css, а не js-вызов слайдера. И выкладывать всё это желательно в песочницу jsfiddle.net или codepen.io (туда вместе со основным скриптом и всем файлами стилей)

Answer 1

[Ankhena]

Открываете инспектор кода и смотрите как спозиционированы стрелки.
Изменяете на что-то типа left: -40px и right: -40px

.slick-prev {
    left: -40px;
}
.slick-next {
    right: -40px;
}

Comments

[Ankhena]

Ольга тег <center> умер еще в прошлом веке. Для центрирования используется CSS, вариантов масса.

код слайдера:

Если речь о позиционировании стрелок, то нужен html и css, а не js-вызов слайдера. И выкладывать всё это желательно в песочницу jsfiddle.net или codepen.io (туда вместе со основным скриптом и всем файлами стилей)

Answer 2

[borisek]

Попробуйте так:

.slick-slide {
    margin: 0 30px;
}
.slick-list {
    margin: 0 -30px;
}