Bootstrap 4 Collapse with Masonry

Attempting to get the collapse to readjust the masonry layout in the height direction.

by joshmoto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>
<div class="container">
  <div class="row" id="cards" aria-multiselectable="true">
    <div class="col-sm-6 card-item">
      <div class="card">
        <div class="card-block">
          <div role="tab" id="card-1">
            <h3 class="card-title">Lorem ipsum dolor sit amet</h3>
						<div class="carousel">
							<img src="http://taylorbingham.com/assets/images/taylor/taylor-frame-original_0000_01.png" class="img-fluid image" />
              <img src="http://taylorbingham.com/assets/images/taylor/taylor-frame-original_0001_02.png" class="img-fluid image" />
              <img src="http://taylorbingham.com/assets/images/taylor/taylor-frame-original_0002_03.png" class="img-fluid image" />
              <img src="http://taylorbingham.com/assets/images/taylor/taylor-frame-original_0003_04.png" class="img-fluid image" />
              <img src="http://taylorbingham.com/assets/images/taylor/taylor-frame-original_0004_05.png" class="img-fluid image" />
              <img src="http://taylorbingham.com/assets/images/taylor/taylor-frame-original_0005_06.png" class="img-fluid image" />
              <img src="http://taylorbingham.com/assets/images/taylor/taylor-frame-original_0006_07.png" class="img-fluid image" />
						</div>
            <a...

SCSS

.container {
	margin: 30px auto;
}

.card-item {
	margin-bottom: 30px;
	.card {
		z-index: 100;
	}
	P {
		margin: 10px 0 0 0;
	}
}

.btn-primary {
	&:focus {
		color: #fff;
	}
}

.slick-slide {
	cursor: move;
	cursor: grab;
	cursor: -webkit-grab;
	cursor: -moz-grab;
}

JavaScript

(function($) {

  var $carousel = $('.carousel'),
			$masonry 	= $('#cards');
  
	$carousel.on('init', function(slick){
		
		$masonry.masonry({
			itemSelector: '.card-item'
		}).on('shown.bs.collapse hidden.bs.collapse', function() {
			$masonry.masonry();
		});
	
	}).slick({
		arrows: false,
		speed: 0,
		infinite: true,
		autoplay: true,
		autoplaySpeed: 400
	});
	
	$masonry.imagesLoaded( function() {
		$masonry.masonry();
	});

})(jQuery);