Owl slideshow preview

gistfile1.txt

 <div class="bigCont">
        <img src="//lorempixel.com/500/500" />
    </div>
    <div class="smallCont">
        <ul class="list-inline" style="list-style: none">
            <li style="display: inline-block"><a href="//lorempixel.com/500/500"><img src="//lorempixel.com/100/100" alt=""></a></li>
            <li style="display: inline-block"><a href="//lorempixel.com/500/500"><img src="//lorempixel.com/100/100" alt=""></a></li>
            <li style="display: inline-block"><a href="//lorempixel.com/500/500"><img src="//lorempixel.com/100/100" alt=""></a></li>
            <li style="display: inline-block"><a href="//lorempixel.com/500/500"><img src="//lorempixel.com/100/100" alt=""></a></li>
            <li style="display: inline-block"><a href="//lorempixel.com/500/500"><img src="//lorempixel.com/100/100" alt=""></a></li>
            <li style="display: inline-block"><a href="//lorempixel.com/500/500"><img src="//lorempixel.com/100/100" alt=""></a></li>
            <li style="display: inline-block"><a href="//lorempixel.com/500/500"><img src="//lorempixel.com/100/100" alt=""></a></li>
            <li style="display: inline-block"><a href="//lorempixel.com/500/500"><img src="//lorempixel.com/100/100" alt=""></a></li>
        </ul>
    </div>

    <script>
        $('.smallCont ul').owlCarousel()

        $('.smallCont a').click(function(e){
            e.preventDefault()

            //Удалить активные кнопки
            $('.smallCont a').removeClass('active');

            $('.bigCont img').attr('src', $(this).attr('href'));

            //добавить класс active
            $(this).addClass('active');
        })
    </script>