Карусель архива в Wordpress?

Question

[Чёкатилло]

Ребят, мои силы иссякли...Все зашло для меня слишком далеко ))). Как, с имеющимся набором кодов, выводящий архив Вордпресс в любое место темы, сделать в виде карусели??
Здесь можно увидеть результат: cg91812-wordpress-3.tw1.ru

Сделано таким способом (вполне коряво написано, НО работает как-то):

<div class="archive-brd">
    <div class="widget-archive">
  <?php
global $wpdb;
$limit = 0;
$year_prev = null;
$months = $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month ,	YEAR( post_date ) AS year, COUNT( id ) as post_count FROM $wpdb->posts WHERE post_status = 'publish' and post_date <= now( ) and post_type = 'post' GROUP BY month , year ORDER BY post_date DESC");
foreach($months as $month) :
	$year_current = $month->year;
	if ($year_current != $year_prev){
		if ($year_prev != null){?>
		
		<?php } ?>
	
	<li class="archive-year"><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/"><?php echo $month->year; ?></a></li>
	
	<?php } ?>
	<li><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>"><span class="archive-month"><?php echo date_i18n("F", mktime(0, 0, 0, $month->month, 1, $month->year)) ?></span></a></li>
<?php $year_prev = $year_current;

if(++$limit >= 18) { break; }

endforeach; ?>
    </div>
  </div>

с визуализацией этого:

.archive-brd {
  margin-left: -100%;
  margin-right: -100%;
  height: 60px;}

.widget-archive {
  display: block;
  position: relative;
  max-width: 1170px;
  margin: auto;
  padding-left: 0px;
  margin-top: 10px;
  margin-top: 1rem;}
.widget-archive ul {
  overflow-x: hidden;
  float: left;
  margin: 0;}
.widget-archive li {
  list-style-type: none;
  overflow-x: hidden;
  float: left;
  margin: 0;
  padding: 0;}
.widget-archive a {
  font-size: 20px;
  color: #edf0dd;
  list-style-type: none;
  overflow-x: hidden;
  float: left;
  padding: 5px 10px 0 0;}
.widget-archive a:hover {
  color: #db4437;}
li.archive-year {
  list-style-type: none;
  overflow-x: hidden;
  float: left;
  padding: 5px 3px 3px 0;}
li.archive-year a {
  font-size: 25px;
  color: #db4437;
  list-style-type: none;
  overflow-x: hidden;
  margin: 0;
  border: 0px;
  padding: 0;}

Задача,- преобразить блок архива хоть как-то похожим на это: www.owlcarousel.owlgraphic.com/demos/basic.html
Просто должен иметь движение влево-вправо