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?

https://i.sstatic.net/T7Orm.jpg 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

csstwitter-bootstrapslick.js

Answer №1

Implementing the following CSS code

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

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 №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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigate from the upper left corner to the lower right corner while hovering

Can you animate the movement of an element from the top-left to the bottom-right using CSS transitions like this? #example { width: 40px; height: 40px; background: red; position: absolute; top: 0; left: 0; transition: all 300ms ea ...

htmlcss

What is the best way to create a shape using CSS?

In my chat application, I have a functionality where replies on a chat are initially hidden and represented by a count in a red box. When the user clicks on the red button, the replies from other users are revealed along with an input box for writing a r ...

htmlcss

Did I accidentally overlook a tag for this stylish stripe mesh Gradient design?

I've been attempting to replicate the striped animated Gradient mesh using whatamesh.vercel.app. I've set up the JS file, inserted all the gist code into it, and placed everything in the correct locations, but unfortunately, it's not functio ...

javascripthtmlcss

Customize background images for the ::after and ::before pseudo elements that span the full height of the webpage

I've successfully centered a <div class="page"> element on my page, and now I'm attempting to add two background images that run along the left and right edges of this container. So far, I've utilized the .page::before and .page::afte ...

htmlcss

Disconnect the parent when the child is clicked in CSS

I am struggling to find a solution for this issue. Currently, I have a hover effect where when I click on a submenu li item, the parent li also gets highlighted. You can see the behavior in the image below: https://i.sstatic.net/Ie6Lb.png Is there any w ...

jquerycss

Show or hide text when list item is clicked

This is the rundown of services <div> <a href="#hig"><button class="tag-btn">High blood pressure Diabetes</button></a> <a href="#hih"><button class="tag-btn">High ch ...

javascripthtmljquerycss

What is the best way to rate a particular image?

while ($row = mysqli_fetch_array($result)) { echo ""; echo "<div id='img_div'>"; echo "<i class='fas fa-times'></i>"; echo "<img class='photoDeGallery' s ...

javascriptphpjquerycssajax

Utilize Bootstrap v4 in styling and aligning buttons for a polished

With Bootstrap v4 dropping the .btn-group-justified class, a solution can be found at https://github.com/twbs/bootstrap/issues/17631 Here's how to justify the buttons: <div class="btn-group btn-group-justified" role="group" aria-label="Justified ...

cssbootstrap-4twitter-bootstrap-4

Implement a click event using jQuery specifically for Internet Explorer version 7

How can I add an onclick attribute using jQuery that is compatible with IE7? So far, the following code works in browsers other than IE8 and Mozilla: idLink = Removelst(); var newClick = new Function(idLink); $(test1).attr('onclick', null).clic ...

javascriptjqueryhtmlcssbrowser

CSS Challenge: How to crop an image without using its parent container directly

I'm currently facing a complex CSS challenge that I can't seem to solve. I want to create an image controller (two-by-two layout on two lines) that can display: The top-left image in full size, The top-right with horizontal scrolling, The botto ...

javascriptjqueryhtmlcssimage

Modifying the cursor presentation in the Atom editor

Hey there, I'm curious if there is a method to customize the caret style in Atom similar to how it's done in Sublime Text 3. In Sublime Text 3, you can change the caret style using this JSON setting: "caret_style": "phase" Is there a comparable ...

cssjsonatom-editor

Creating a JavaScript function for a custom timed traffic light sequence

Currently, I am facing a challenge with my high school project of creating a timed traffic light sequence using JavaScript for my upcoming exams. Unfortunately, I feel quite lost and unsure about how to proceed. My initial plan involves formatting the valu ...

javascriptcss

Prevent dragging functionality after being dropped onto a droppable area

I am currently working on a drag and drop project and have encountered a minor issue. My goal is to disable the draggable item after it has been dropped onto the droppable area. I have created a function called disableDrag, but I am receiving an error in t ...

jqueryhtmlcss

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...

javascriptcssreactjsecmascript-6

What is the best way to create a Div element that functions as a button, becoming active when clicked while deactivating all other Div elements

function toggleButton1() { $("#button1").toggleClass("button-active button-inactive"); $("#button2").toggleClass("button-inactive button-active"); $("#button3").toggleClass("button-inactive button-active"); } function toggleButton2() { $("#butto ...

javascripthtmlcssbootstrap-4

What is the process to discover, upload, and implement a custom font?

In my quest to locate and incorporate a font named neontubes, or if not available, a font called freestyle script, I have learned that I must obtain an src which is then included in my style.css file and subsequently designated in the styling rule like s ...

htmlcsswordpress

I am seeking assistance to utilize Flexbox to completely fill the height of my computer screen

Seeking assistance in utilizing Flexbox to occupy 100% of my computer screen's height, all while ensuring responsiveness: View of my current sign-in page on Chrome (Note the whitespace): Examining my existing frontend code: const SignIn = () => { ...

javascripthtmlcssreactjsflexbox

What is the best way to ensure that text stays aligned perfectly next to an

There seems to be a problem with my CSS. The text in the <li> tag is appearing below the line of the icon. How can I resolve this issue? I want the text to be vertically centered on the line. This seems to happen when I use the ::before selector with ...

htmlcss

Using AngularJS to incorporate personalized font icons

Looking to create a custom font icon library similar to "Font Awesome" for my AngularJS project, as using fonts instead of images is more versatile across devices. Is there a way to achieve this? I have generated a font in .ttf and .svg formats with my ...

cssangularjsfont-facefont-awesomeglyphicons

Utilizing a StyledComponents theme within a Component

When creating a style called Link, the theme is contained inside of this.props. How can the theme be extracted from props and passed into the Link styled component? Error: ReferenceError - theme is not defined import React from 'react'; impo ...

javascriptcssreactjsstyled-components