Issue with Slick Slider when expanding collapsible section in Bootstrap 4

Question

Issue with Slick Slider when expanding collapsible section in Bootstrap 4

Whenever I expand a bootstrap collapse that contains a carousel, only one carousel item appears instead of all. Is this a bug in Bootstrap or Slick Slider?

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

css twitter-bootstrap slick.js

Answer 1

Answer №1

Implementing the following CSS code

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

Answer 2

Implementing the following CSS code

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

Answer 3

Answer №2

In this scenario, jQuery is utilized instead of CSS.

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

accordionwithslick: Name collapse

.sliderslick: Name Slick

For instance

  <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 4

In this scenario, jQuery is utilized instead of CSS.

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

accordionwithslick: Name collapse

.sliderslick: Name Slick

For instance

  <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 5

Answer №3

If you're looking for an alternative, consider using jQuery Slick.

//   For collapse 

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

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

/* Custom Styles */

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

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

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

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

/* More CSS rules... */

<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">Remember and compare vehicles</p>

    <button class="remember__button--count">2</button>
    <button class="remember__button--compare">Compare Now</button>
    
    /* Some more HTML content */

  </div>
  
  <div class="panel-body collapse" id="collapseIn">
    <div class="slick-carousel">
      <div class="remember__carousel__image">
        <img src="SampleImage.jpg" alt="">
        <p>Vehicle Details
          <br>
          R$Price </p>
        <svg class="svg svg__remember-close">
                  <use xlink:href="../assets/img/svg/sprite.svg/#close_abort_small">
                  </use>
                </svg>
      </div>
      
      /* Repeat the above structure for multiple images */
      
    </div>
  </div>
  
</div>

Check out this CodePen by Sateesh for a visual representation.

Answer 6

If you're looking for an alternative, consider using jQuery Slick.

//   For collapse 

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

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

/* Custom Styles */

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

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

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

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

/* More CSS rules... */

<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">Remember and compare vehicles</p>

    <button class="remember__button--count">2</button>
    <button class="remember__button--compare">Compare Now</button>
    
    /* Some more HTML content */

  </div>
  
  <div class="panel-body collapse" id="collapseIn">
    <div class="slick-carousel">
      <div class="remember__carousel__image">
        <img src="SampleImage.jpg" alt="">
        <p>Vehicle Details
          <br>
          R$Price </p>
        <svg class="svg svg__remember-close">
                  <use xlink:href="../assets/img/svg/sprite.svg/#close_abort_small">
                  </use>
                </svg>
      </div>
      
      /* Repeat the above structure for multiple images */
      
    </div>
  </div>
  
</div>

Check out this CodePen by Sateesh for a visual representation.

Issue with Slick Slider when expanding collapsible section in Bootstrap 4

Answer №1

Answer №2

accordionwithslick: Name collapse

Answer №3

Similar questions

What is the best way to manipulate the size and orientation of an image upon hovering over

"Changing the location of the suffix icon in an ant datepicker: step-by-step

Ways to display additional information in typeahead using Angular JS

Troubleshooting: Navbar dropdown menu in AngularJS gets hidden within UI layout

How can I achieve a smooth background-image transition in Firefox?

Notification (jQuery) failing to display user messages

Is it possible to make the v-toolbar-title fixed within a v-navigation-drawer using Vuetify?

Importing CSS with Node Sass using npm

The <hr> tag is not displaying properly within the <option> element

Tips for directing the scroll according to the current selection class

Is there a way to make the header reach the full width of the page?

python conducting automation tests with Selenium WebDriver on a mouse

CSS is broken when transitioning from the development to the live site

Tips for achieving consistent outcomes on both IE and Chrome when utilizing the `min` attribute in HTML input tags

Arrange three images both vertically and horizontally at the center of the page

Adaptable website design featuring dynamic data grid

The JavaScript program for the shopping list is experiencing issues with the formatting of list items

The typewriter effect is configured to appear as a separate layout,

Utilizing Inline Placement within Email Templates

Enhance user interactivity on your website by incorporating jQuery and CSS for