JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css">
<input type="checkbox" class="calendar-check" id="cal-1">
<input type="checkbox" class="calendar-check" id="cal-2">
<div id="pg-preview-wrap">
  <div id="calendar-select">
    <div class="calendar-option">
      <div class="product-wrap">
        <label for="flag-option" class="package-check-toggle">
          <img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='American Flag' class='pg-preview-img'>
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
          <p class="calendar-option-push"></p>
          <cite>A</cite>
        </label>
        <input type="checkbox" class="option-check" id='flag-option'>
      </div>
    </div>
    <div class="calendar-option">
      <div class="product-wrap">
        <label for="nickel-option" class="package-check-toggle">
          <img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Brushed Nickel & Black' class='pg-preview-img'>
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
          <p class="calendar-option-push"></p>
          <cite>B</cite>
        </label>
        <input type="checkbox" class="option-check" id='nickel-option'>
      </div>
    </div>
    <div class="calendar-option">
      <div class="product-wrap">
        <label for="gold-option" class="package-check-toggle">
          <img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Gold & Black' class='pg-preview-img'>
          <img...

CSS

.total-center {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
.option-check, #pg-preview-wrap {
  display: none;
}
.product-wrap {
  width: 100%;
  position: relative;
  display: block;
}

.checkmark-img {
  display: none;
  width: 40%;
  height: auto;
  z-index: 1;
  cursor: pointer;
}

.package-check-toggle {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}

#calendar-select {
  width: 50%;
  margin: 0 auto 70px auto;
  background: #CCC;
  height: auto;
}

.no-fouc {
  display: none;
}

.slick-initialized {
  visibility: visible;
}

.slick-slide img.checkmark-img {
  display: none;
  width: 40%;
  z-index: 1;
  cursor: pointer;
}

.slick-slide img.pg-preview-img {
  display: block;
}

.calendar-option img {
  margin: 20px auto;
  cursor: pointer;
  width: 50%;
  height: auto;
  display: block;
}

.calendar-option-push {
  width: 0;
  height: 20px;
  border: none;
  margin: 20px auto;
}

.calendar-option cite {
  text-align: center;
  font-size: 1.25rem;
  margin: auto;
  color: #303030;
  font-family: 'Lato', sans-serif;
  display: block;
}

.slick-prev,
.slick-next {
  background-repeat: no-repeat;
  background-size: 120px 120px;
  height: 120px;
  width: 120px;
}

.slick-prev {
  left: -130px;
  background-image: url("images/arrow-back.png");
}

.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus {
  background-image: url("images/arrow-back.png");
}

.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus,
.slick-next:hover,
.slick-next:active,
.slick-next:focus {
  background-repeat: no-repeat;
  background-size: 120px 120px;
}

.slick-next {
  right: -130px;
  background-image: url("images/arrow-forward.png");
}

.slick-next:hover,
.slick-next:active,
.slick-next:focus {
  background-image: url("images/arrow-forward.png");
}

.slick-prev:before,
.slick-next:before {
  font-size: 0px;
}

.slick-dots {
  margin: 15px 0...

JavaScript

var options = {
  dots: true,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 7000,
  speed: 800,
  slidesToShow: 1,
  adaptiveHeight: true
}

$('#calendar-select').slick(options);

$('#cal-1').change(function(){
	if(this.checked){
  	 $('#cal-2').prop('checked', false);
      showSlider();
  }else{
    	hideSlider();
  }
});
$('#cal-2').change(function(){
	if(this.checked){
  	 $('#cal-1').prop('checked', false);
     hideSlider();
  }
});
function showSlider(){
    $('#pg-preview-wrap').show();
    $('#calendar-select').slick('unslick');
    $('#calendar-select').slick(options);
}
function hideSlider(){
 		$('#calendar-select').slick('unslick');
    $('#pg-preview-wrap').hide();
}