Slick Slider сломан при открытой развалине бутстрапа 4

Question

У меня есть карусель внутри коллапса начальной загрузки, и каждый раз, когда я открываю этот коллапс, есть только один элемент карусели, не все, это ошибка в начальной загрузке или скользкий слайдер?

Slider

$('.remember__carousel').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  prevArrow: `<button type='button' class='slick-prev pull-left'><svg class='svg svg__remember-carousel'><use xlink:href='../assets/img/svg/sprite.svg/#arrow_thick'></use></svg></button>`,
  nextArrow: "<button type='button' class='slick-next pull-right'><svg class='svg svg__remember-carousel' style='transform: scale(-1,1);'><use xlink:href='../assets/img/svg/sprite.svg/#arrow_thick'></use></svg></button>"
})

HTML

Answer 1

Используя этот код CSS

    .collapse:not(.show)  {
display: block !important;
height: 0px;
}

Answer 2

Вместо этого вы можете использовать jQuery Slick.

//   For collapse 

$(".btn").click(function() {
  $(".panel-body").collapse();
});

// SLick Slider Code
$('.slick-carousel').slick({
  slidesToShow: 1,
  slidesToScroll: 2,
  dots: true,
});

/* Styles for solving the issue */

.collapse {
  display: block !important;
  height: 0px;
  overflow: hidden;
}

.collapse.show {
  height: auto !important;
}

.slick-slide img {
  height: 101px;
}

.slick-list {
  margin-left: 34px;
}

.slick-arrow {
  position: absolute;
  top: 0;
  border: none;
  font-size: 30px;
  z-index: 5;
  height: 97%;
  width: 30px;
  text-indent: -9999999px;
  background-color: #ececec;
}

.slick-prev {
  left: 0px !important;
}

.slick-next {
  right: 0px !important;
}

.remember {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #000;
  padding-top: 6px;
}

.remember__itens {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
}

.remember__title {
  color: #FFF;
  font-size: 24px;
  font-family: CorporateRegularCondensed, Verdana, sans-serif;
  margin-right: 40px;
  margin-bottom: 0;
}

.remember__compare {
  cursor: pointer;
}

.remember__button--compare {
  color: #fff;
  background-color: #00adef;
  font-size: 1rem;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 1px;
}

.remember__button--count {
  color: #fff;
  background-color: #4c4c4c;
  font-size: 1rem;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 3px;
  margin-right: 40px;
}

[aria-expanded="false"]>.remember__button--updown {
  width: 22px;
  height: 22px;
  transform: rotate(270deg);
  color: #FFF;
  background-color: #4c4c4c
}

[aria-expanded="true"]>.remember__button--updown {
  width: 22px;
  height: 22px;
  transform: rotate(89deg);
  color: #FFF;
  background-color: #4c4c4c;
}

.remember__carousel {
  margin: 0 auto;
  background-color: #4c4c4c;
}

.remember__carousel__image {
  display: flex;
  border-right: 1px solid #CCC;
  margin: 10px;
  justify-content: space-between;
}

.remember__carousel__image>img {
  padding-right: 10px;
}

.remember__carousel__image>p {
  color: #FFF;
  font-size: 14px;
  margin-left: -40%;
}

.remember__carousel>.slick-prev {
  background-color: #4c4c4c;
}

.remember__carousel>.slick-next {
  background-color: #4c4c4c;
  right: -8px;
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>


<div class="remember">

  <div class="container remember__itens">
    <p class="remember__title">Lembrar e compara veículs</p>

    <button class="remember__button--count">2</button>
    <button class="remember__button--compare">Comparar agora</button>
    <a class="pull-right btn btn-default" data-toggle="collapse" href="#collapseIn" aria-expanded="false" aria-controls="collapseIn">
    CLICK HERE
      </a>
  </div>
  <div class="panel-body collapse" id="collapseIn">
    <div class="slick-carousel">
      <div class="remember__carousel__image">
        <img src="https://images.pexels.com/photos/358070/pexels-photo-358070.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
        <p>Um sedan 140
          <br>
          <br> R$ 580.000 </p>
        <svg class="svg svg__remember-close">
                  <use xlink:href="../assets/img/svg/sprite.svg/#close_abort_small">
                  </use>
                </svg>
      </div>
      <div class="remember__carousel__image">
        <img src="https://images.pexels.com/photos/358070/pexels-photo-358070.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
        <p>Um sedan 140
          <br>
          <br> R$ 580.000 </p>
        <svg class="svg svg__remember-close">
                  <use xlink:href="../assets/img/svg/sprite.svg/#close_abort_small">
                  </use>
                </svg>
      </div>
      <div class="remember__carousel__image">
        <img src="https://images.pexels.com/photos/358070/pexels-photo-358070.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
        <p>Um sedan 140
          <br>
          <br> R$ 580.000 </p>
        <svg class="svg svg__remember-close">
                  <use xlink:href="../assets/img/svg/sprite.svg/#close_abort_small">
                  </use>
                </svg>
      </div>
      <div class="remember__carousel__image">
        <img src="https://images.pexels.com/photos/358070/pexels-photo-358070.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
        <p>Um sedan 140
          <br>
          <br> R$ 580.000 </p>
        <svg class="svg svg__remember-close">
                  <use xlink:href="../assets/img/svg/sprite.svg/#close_abort_small">
                  </use>
                </svg>
      </div>

    </div>
  </div>
</div>

Здесь вы можете увидеть обходной путь codepen by Sateesh