<div class="main-image">
  <div class="carousel carousel-main" data-flickity='{"pageDots": false, "autoPlay": 4500}'>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
  </div><!-- carousel-main -->

  <div class="carousel carousel-nav"
            data-flickity='{ "asNavFor": ".carousel-main", "contain": true, "pageDots": false }'>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>    
  </div><!-- carousel-nav -->
</div><!-- main-image -->

<div class="row main-image">
  
 <div class="col-d-6">
    <h3>Slide Title</h3>
    <small>Sub title</small>
      <div class="carousel">
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
      </div>
    <div class="rest_text">
      some text
    </div>
  </div>
  
  <div class="col-d-6">
    <h3>Slide Title</h3>
    <small>Sub title</small>
      <div class="carousel" >
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
      </div>
    <div class="rest_text">
      some text
    </div>
  </div>
</div><!-- row -->

/* external css: flickity.css */
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}
.main-image {
  width:960px;
  margin: auto;
}
.main-image .carousel {
  background: #EEE;
  margin-bottom: 20px;
}

.main-image .carousel-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: gallery-cell;
}

/* cell number */
.main-image .carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.main-image .carousel-nav .carousel-cell {
    height: 168px;
    width: 250px;
    opacity: 0.5;
}
.main-image .col-d-6 {
  width: 50%;
  float: left;
  padding-left: 4px;
  padding-right: 4px
}

.main-image .col-d-6 .carousel-cell {
  width: 100%;
  height: 200px;
}

// external js: flickity.pkgd.js