<div class="container">
  <div id="title" class="col-md-4">
    <h1>Slick</h1>
  </div>
  <div id="gallery" class="col-md-4">
    <div class="regular slider row">
      <div data-color="red">
        <img class="product-image main-image" src="//placehold.it/350x300/ff0000/ffffff?text=1" data-image-id="1" data-zoom-image="//placehold.it/700x600/ff0000/ffffff?text=1">
      </div>
      <div data-color="blue">
        <img class="product-image main-image" src="//placehold.it/350x300/0000ff/ffffff?text=2" data-image-id="2" data-zoom-image="//placehold.it/700x600/0000ff/ffffff?text=2">
      </div>
      <div data-color="red">
        <img class="product-image main-image" src="//placehold.it/350x300/ff0000/ffffff?text=3" data-image-id="3" data-zoom-image="//placehold.it/700x600/ff0000/ffffff?text=3">
      </div>
      <div data-color="red">
        <img class="product-image main-image" src="//placehold.it/350x300/ff0000/ffffff?text=4" data-image-id="4" data-zoom-image="//placehold.it/700x600/ff0000/ffffff?text=4">
      </div>
      <div data-color="blue">
        <img class="product-image main-image" src="//placehold.it/350x300/0000ff/ffffff?text=5" data-image-id="5" data-zoom-image="//placehold.it/700x600/0000ff/ffffff?text=5">
      </div>
      <div data-color="blue">
        <img class="product-image main-image" src="//placehold.it/350x300/0000ff/ffffff?text=6" data-image-id="6" data-zoom-image="//placehold.it/700x600/0000ff/ffffff?text=6">
      </div>
    </div>

    <div class="thumbs slider row">
      <div data-color="red">
        <img class="product-image thumb-image" src="//placehold.it/350x300/ff0000/ffffff?text=1" data-image-id="1" data-zoom-image="//placehold.it/700x600/ff0000/ffffff?text=1">
      </div>
      <div data-color="blue">
        <img class="product-image thumb-image" src="//placehold.it/350x300/0000ff/ffffff?text=2" data-image-id="2" data-zoom-image="//placehold.it/700x600/0000ff/ffffff?text=2">
      </div>
      <div data-color="red">
        <img class="product-image thumb-image" src="//placehold.it/350x300/ff0000/ffffff?text=3" data-image-id="3" data-zoom-image="//placehold.it/700x600/ff0000/ffffff?text=3">
      </div>
      <div data-color="red">
        <img class="product-image thumb-image" src="//placehold.it/350x300/ff0000/ffffff?text=4" data-image-id="4" data-zoom-image="//placehold.it/700x600/ff0000/ffffff?text=4">
      </div>
      <div data-color="blue">
        <img class="product-image thumb-image" src="//placehold.it/350x300/0000ff/ffffff?text=5" data-image-id="5" data-zoom-image="//placehold.it/700x600/0000ff/ffffff?text=5">
      </div>
      <div data-color="blue">
        <img class="product-image thumb-image" src="//placehold.it/350x300/0000ff/ffffff?text=6" data-image-id="6" data-zoom-image="//placehold.it/700x600/0000ff/ffffff?text=6">
      </div>
    </div>
  </div>
  <div id="buttons" class="col-md-4">
    <button type="button" class="btn btn-default" onclick="filter('red')">Red</button>
    <button type="button" class="btn btn-default" onclick="filter('blue')">Blue</button>
    <button type="button" class="btn btn-default" onclick="filter()">All</button>
  </div>
</div>