<div class="container">
  <div class="panel">
  <div class="panel-heading">
    <div>
    <button class="pull-right btn btn-default" data-toggle="collapse" href="#collapseIn" aria-expanded="false" aria-controls="collapseIn">Collapse</button>
    </div>
    </div>
    
    <div class="panel-body collapse" id="collapseIn">
      <div class="slick-carousel">
  <div> 
              <img src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg" alt="">

  </div>
          
       <div> 
              <img src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg" alt="">

  </div> 
  <div> 
              <img src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg" alt="">

  </div> 
  <div> 
              <img src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg" alt="">

  </div> 
  <div> 
              <img src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg" alt="">

  </div>
  <div> 
              <img src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg" alt="">

  </div> 
  <div> 
              <img src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg" alt="">

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

</div>
/* Workaround */
/* Styles for solving the issue */
.collapse {
  display: block !important;
  height: 0px;
  overflow: hidden;
}
.collapse.in {
  height: auto !important;
}




/* Customised style */
/* This styles used for only customization of UI */
.container{
  margin-top: 20px;
}
.panel-heading {
  border: 1px solid #eee;
  height: 55px;
}
img {
  width: 100px;
  margin-top: 40px;
}
.slick-prev:before, .slick-next:before{
  color: green !important;
}
.panel-body {
  padding: 30px;
}
//   For collapse 

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

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

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  2. https://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
  3. https://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js