A synced principle for Owl Carousel, so you can make one single, and other with thumbnails. This one is example for videos.

custom.js

jQuery(document).ready(function($) {
    var $sync1 = $(".big-images"),
        $sync2 = $(".thumbs"),
        flag = false,
        duration = 300;
    $sync1.owlCarousel({
        items: 1,
        margin: 10,
        nav: false,
        dots: false
    }).on('changed.owl.carousel', function(e) {
        if (!flag) {
            flag = true;
            $sync2.trigger('to.owl.carousel', [e.item.index, duration, true]);
            flag = false;
        }
    });
    $sync2.owlCarousel({
        margin: 20,
        items: 6,
        nav: false,
        center: true,
        dots: false,
        video: false
    }).on('click', '.owl-item', function() {
        $sync1.trigger('to.owl.carousel', [$(this).index(), duration, true]);
    }).on('changed.owl.carousel', function(e) {
        if (!flag) {
            flag = true;
            $sync1.trigger('to.owl.carousel', [e.item.index, duration, true]);
            flag = false;
        }
    });
});

synced-owl-carousel.html

<div class="big-images owl-carousel owl-theme">
    <div class="item-video">
        <a class="owl-video" href="https://www.youtube.com/watch?v=FUBWfCfW3LE&amp;feature=youtu.be"></a>
    </div>
    <div class="item-video">
        <a class="owl-video" href="https://youtu.be/8QlwY0K155o"></a>
    </div>
    <div class="item-video">
        <a class="owl-video" href="https://www.youtube.com/watch?v=wN1TYrG45E0"></a>
    </div>
    <div class="item-video">
        <a class="owl-video" href="https://www.youtube.com/watch?v=WY1EZ9Reho4"></a>
    </div>
</div>
<div class="thumbs owl-carousel owl-theme">
    <div class="item">
        <div style="background-image: url(http://www.franksandersakademie.nl/wp-content/uploads/2016/08/Schermafdruk-2016-08-30-09.37.16-Cropped.png);"></div>
    </div>
    <div class="item">
        <div style="background-image: url(http://www.franksandersakademie.nl/wp-content/uploads/2016/08/Schermafdruk-2016-08-30-09.12.45-Cropped.png);"></div>
    </div>
    <div class="item">
        <div style="background-image: url(http://www.franksandersakademie.nl/wp-content/uploads/2016/05/Schermafdruk-2016-08-30-09.16.36-Cropped.png);"></div>
    </div>
    <div class="item">
        <div style="background-image: url(http://www.franksandersakademie.nl/wp-content/uploads/2016/08/Schermafdruk-2016-08-30-09.06.12-Cropped.png);"></div>
    </div>
</div>