[Как сделать баннер листаемым]

Ребят, подскажите как сделать точки под баннер или стрелочки, что бы можно было переключать слайды

Сейчас код в файле catalog/view/theme/theme509/template/module/slideshow.tpl выглядит так:

Скрытый текст

<section class="col-lg-9 col-md-8   hidden-xs slideshow-block">
    <div id="slideshow<?php echo $module; ?>" style="opacity: 1;">
      <?php foreach ($banners as $banner) { ?>
      <div class="item">
        <?php if ($banner['link']) { ?>
        <a href="<?php echo $banner['link']; ?>" class="href"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
        <?php } else { ?>
            <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
        <?php } ?>
      </div>
      <?php } ?>
    </div>
</section>
<script type="text/javascript">
$('#slideshow<?php echo $module; ?>').nivoSlider({
            animSpeed: 1000,
            pauseTime: 4000,
            directionNavHide:false,
            controlNav: false,
            prevText: '',
            nextText: ''
        });
    var link = $('#slideshow<?php echo $module; ?>').find('a.href').attr('href');
    var href = "<a href='"+link+"'></a>";
    $('#slideshow<?php echo $module; ?>').find('.nivo-main-image').wrap(href);
</script>