Респонсивная разметка для слайдера?

хочу сделать респонсивный слайдер с миниатюрами. Не могу сообразить как правильно сделать html-разметку для этого, чтобы миниатюры в зависимости от экрана были адаптивными.

Вот как примерно должен выглядеть слайдер http://prntscr.com/7gexf3

Снизу те самые миниатюры 5 штук, по нажатию на кнопку влево должен вылетать следующий ряд с пятью миниатюрами. Моя разметка выглядет так:

$html = '<div class="gallerymy">';
$html .="
            <div class='gallery-area'>
                <div class='row'>
                    <div class='col-md-12'>
                        <img src='{$img_full[0]}' alt='{$img_title}'>
                    </div><!-- .col-md-12 -->
                </div><!-- .row -->
            </div><!-- .gallery-area -->
            <div class='gallery-preview'>
                <div class='r'>
                    <ul class='gallery-list'>";
        }
                    $html .="
                        <li class='item-gallery'>
                            <a href='#'>
                                <span></span>
                                    <img src='{$img_thumb[0]}' width='{$img_thumb[1]}' height='{$img_thumb[2]}' alt='{$img_title}'>
                            </a>
                        </li>";
        $count++;
    }
            $html .= "
                    </ul>
                </div>
                <div class='gallery-pagenate'>
                    <a href='#' class='prev'></a>
                    <span class='page-number'>
                        <span class='current'>1</span>
                        /
                        <span class='total'>{$count}</span>
                    </span>
                    <a href='#' class='next'></a>
                </div>
            </div>
    </div>";

Элементы li генерируются автоматом, в зависимости от выбора пользователя. Для того чтобы они вошли все в ряд я задал ul ширину в 2000% а у верхнего в 100% и скрываю.

.gallery-preview {
  width: 100%;
  overflow: hidden;
}
ul.gallery-list {
  width: 2000%;
}
ul.gallery-list li {
  list-style: none !important;
  float: left;
  width: 20%;
  max-width: 200px;
}

У блоков ширина в 200px все время из-за того что у родителя ширина в 2000%. Но ширина родителя должна быть большой, чтобы все элементы которые генерятся могли поместится в одну строку.

Может я мыслю не в том направлении?