Search code examples
javascriptcsssliderlaravel-8slick.js

How to add margin on slick slider buttons

So i've tried to change the button and it's work, but now i want to give space to the button, it's only work for next button but not for prev button

here's the screenshot enter image description here

this is the css

.slider-promo .slick-prev::before,
.slider-promo .slick-next::before {
  font-family: "Font Awesome 5 Free" !important;
  font-size: 40px;
  font-weight: 900 !important;
  color: #000;
}

.slider-promo .slick-prev::before {
    content: "\f104" ;
    margin-right: 50px;
}
.slider-promo .slick-next::before {
    content: "\f105" ;
    margin-left: 50px;
}
Solution

  • If you want to change button position please go to the below site I think it helps you.

    By default slick slider button position in absolute so you can try with the Left or Right property.

    Like this one :- .slick-prev {left: -25px;} .slick-next {right: -25px;}

    Check Here https://kenwheeler.github.io/slick/

    And if you didn't get any solution please try with below code

    .slick-prev {
    left: 0;
    margin-left: -50px;
}
.slick-next {
    right: 0;
    margin-right: -50px;
}