Ширина слайда в slick slider?

Question

[Максим Гуйдо]

Подключил slick slider со стандартными стилями css, в итоге сломалась высота колонок, отремонтировал так:

.slick-track {
display: flex;
}
.slick-track .slick-slide {
display: flex;
height: auto;
}

теперь сломался другой слайдер по ширине, картинка задана фоном

Answer 1

[drawnofmymind]

ну без кода сложно,
попробуй width:100% !important

Comments

[Максим Гуйдо]

<section class="header-slider">

    <div class="header-slider__wrapper"> <!-- обертка слайдера -->
    
    <div class="header-slider__item item-header-slider"> <!-- элемент слайдера -->
      <div class="item-header-slider__content">
        <div class="container item-header-slider__container">
          <h2 class="item-header-slider__subtitle">Только эксклюзивные</h2>
          <h1 class="item-header-slider__title">Лоты под аукцион и свобоДную продажу</h1>
          <div class="item-header-slider__text">
            Мы собираем эксклюзивную публику и экслюзивные лоты, даем удобный и автоматизированный сервис по покупке и продаже, а также выставлению лотов на аукцион, предстваляем личные кабинеты, а также оказываем сопутствующие услуги с продажей редких и дорогих вещей
          </div>
          <a href="#" class="item-header-slider__btn btn">
            присоединиться
          </a>
        </div><!-- container -->
      </div><!-- content -->
      <div class="item-header-slider__bg ibg">
        <img src="images/bg-head.jpg" alt="">
      </div><!-- background -->
    </div><!-- header-slider__item -->

    <div class="header-slider__item item-header-slider">
      <div class="item-header-slider__content">
        <div class="container item-header-slider__container">
          <h2 class="item-header-slider__subtitle">Только эксклюзивные</h2>
          <h1 class="item-header-slider__title">Лоты под аукцион и свобоДную продажу</h1>
          <div class="item-header-slider__text">
            Мы собираем эксклюзивную публику и экслюзивные лоты, даем удобный и автоматизированный сервис по покупке и продаже, а также выставлению лотов на аукцион, предстваляем личные кабинеты, а также оказываем сопутствующие услуги с продажей редких и дорогих вещей
          </div>
          <a href="#" class="item-header-slider__btn btn">
            присоединиться
          </a>
        </div><!-- container -->
      </div><!-- content -->
      <div class="item-header-slider__bg ibg">
        <img src="images/bg-head.jpg" alt="">
      </div><!-- background -->
    </div><!-- header-slider__item -->

  </div><!-- header-slider__wrapper -->

  <div class="header-slider__control control-header-slider">
      <div class="control-header-slider__arrow control-header-slider__arrow--left"></div>
      <div class="control-header-slider__load">
        <img src="images/slider-arrow/slider-loading.svg" alt="">
      </div>
      <div class="control-header-slider__arrow control-header-slider__arrow--right"></div>
  </div>

.header-slider {
position: relative;

&__wrapper {

}
}
.header-siler {

&__item {

}
}
.item-header-slider {
position: relative;
background: #333;

&__content {
padding: 30px 0 100px 0;
position: relative;
z-index: 2;
text-align: center;
}

&__container {
display: flex;
flex-direction: column;
align-items: center;
}

&__subtitle {
margin: 0 0 20px 0;
font-family: $fontCer;
font-size: 40px;
color: #99845e;
}

&__title {
margin: 0 0 20px 0;
font-family: $fontPFDr;
font-size: 35px;
color: #fff;
text-transform: uppercase;
letter-spacing: 5.64px;
}

&__text {
margin: 0 auto 5%;
flex: 1 1 auto;
max-width: 750px;
font-size: 15px;
line-height: 25px;
color: #fff;
}

&__btn {
display: inline-block;
margin: 0 0 10px 0;
padding: 15px 45px;
font-weight: $fontPFDr;
background-image: linear-gradient(rgba(194, 166, 115, 0.1), transparent);
transition: all .4s ease;
&:hover {
background-image: linear-gradient(rgba(194, 166, 115, 0.5) 40%, rgba(142, 101, 47, 0.5) 95%);
}
}

&__bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}

[Максим Гуйдо]

Ну как то так. Код в первом посте в стандартных стилях слик слайдера добавлен внизу