Linked Rotators using Foundation and Slick

double-slick.html

<!-- Shawn's custom rotator module -->

	<div class="full-width-container"> <!-- flexbox container -->
		<div class="content-container-1000px jc-center"> <!-- 1000px container -->

			<div class="row" id="linked-rotators"> <!-- row container -->

				<div class="small-12 large-9 columns" id="big-rotator">
					<div class="big-rotator"> <!-- featured rotator -->
						<a href="#"><img src="images/mom-and-kids.jpg" /></a>
						<a href="#"><img src="images/mom-and-kids.jpg" /></a>
						<a href="#"><img src="images/mom-and-kids.jpg" /></a>
						<a href="#"><img src="images/mom-and-kids.jpg" /></a>
				</div> <!-- /featured rotator -->
			</div>

			<div class="large-3 columns slide-side show-for-large">
				<div class="column-rotator"> <!-- vertical rotator -->
					<a href="#"><img src="images/mom-and-kids.jpg" /></a>
					<a href="#"><img src="images/mom-and-kids.jpg" /></a>
					<a href="#"><img src="images/mom-and-kids.jpg" /></a>
					<a href="#"><img src="images/mom-and-kids.jpg" /></a>
				</div> <!-- /vertical rotator -->
			</div>
		</div> <!-- /row container -->

		</div> <!-- /1000px container -->
	</div> <!-- /flexbox container -->

<!-- /Shawn's custom rotator module -->

<style>
  .full-width-container { width: 100vw; display: flex; justify-content: center; }
  .content-container-1000px { width: 1000px; display: flex;}
  .jc-center { justify-content: center; }
  .big-rotator {max-width: 700px; height: 466px; }
  #linked-rotators { margin: 50px 0; }
  
  @media screen and (max-width: 1023px) {
	  #linked-rotators { margin: 10px 0; }
	  #big-rotator { padding: 0; }
  }
</style>

<script>

  jQuery(document).ready(function(){
    
    // Shawn's function to make the Slick Slider responsive
	  // once the vertical carousel is removed.

	  function sizeSlick(){

		  var width = jQuery(window).width(),
		      padding = 10,
				  rSizeW = width - (padding * 2),
				  rSizeH = rSizeW * (2/3);

		  if( width <= 1023 ) {
			  jQuery('.big-rotator').css({
				  'width': rSizeW,
				  'height': rSizeH,
				  'max-width': 'none' });

			  jQuery('.big-rotator .slick-slide').children().each(function(){
				  jQuery(this).css({'width': rSizeW, 'height': rSizeH});
			  });

		  }	else {

			  jQuery('.big-rotator').css({ 'width': '700px', 'max-width': '700px', 'height': '466px' });

			  jQuery('.big-rotator .slick-slide').children().each(function(){
				  jQuery(this).css({'width': '700px', 'height': '466px'});
			  });
		  }
  	}

	  // Init Slick Slider, connecting the two rotators together

	  jQuery('.big-rotator').slick({
		  infinite: true,
		  autoplay: true,
		  autopplaySpeed: 6000,
		  variableWidth: true,
		  arrows: false,
		  asNavFor: '.column-rotator',
		  respondTo: '#linked-rotators'
	  });

	  jQuery('.column-rotator').slick({
		  infinite: true,
		  slidesToShow: 3,
		  slidesToScroll: 1,
		  vertical: true,
		  arrows: false,
	  });

	  // Event listener for sizeSlick function

	  jQuery(window).resize(function(){ sizeSlick(); });

	  // Init sizeSlick on page load

	  sizeSlick();
    
  });

</script>