AlexRas

function navbar(){
  if( $("#nav").height() == 800 ){
    $("#nav").height('0px');
  }else{
    $("#nav").height('800px');
  }
}

.navbar {
    flex-wrap: nowrap;
}

<div class="owl-carousel owl-theme">
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
</div>

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:false,
    items:5
})

function resize(direction, indent){
  var backgroundPosition = $('.active').css(direction);
  var backgroundPosition_height = parseInt(backgroundPosition.replace(/([^0-9|-]+)/i, '')) + parseInt(indent);
  var css = {};
  css[direction] = backgroundPosition_height + 'px';
  $('.active').css(css);
}