Slick Slider 在打开折叠引导程序 4 时损坏

Question

我在引导折叠内有一个轮播，每次打开折叠时，只有一个旋转木马项目，而不是全部，它是引导程序中的错误还是光滑滑块？

滑块

$('.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

没有 CSS.. 只有 jQuery

$('#accordionwithslick').on('show.bs.collapse', function (e) {
    $('.sliderslick').slick('refresh');
});

accordionwithslick 这是名称折叠

.sliderslick 这是Name Slick

例子

  <div class="accordion" id="accordionwithslick">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h2 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
            </button>
          </h2>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
          <div class="card-body">
            <div class="sliderslick color-primary">
               <div>
                  ......
               </div>
          </div>
        </div>
      </div>
    </div>

Answer 3

您可以改用 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