Owl Carousel 2 bug report

by MattStrange

HTML

<script src="https://raw.githubusercontent.com/OwlFonk/OwlCarousel/master/owl-carousel/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="content clearfix">
            <div id="tabbed_products_carousel-2" class="col-md-12 widget widget_tabbed_products_carousel">
                <div class="content-wrap">
                    <div class="row">
                        <div class="col-sm-3 no-right-padding">
                            <img class="img-responsive" src="http://placehold.it/290x400">
                        </div>
                        <div class="col-sm-2 no-left-padding no-right-padding">
                            <ul class="nav nav-tabs tabs-left">
                                <li class="active"><a href="#Crafts" data-toggle="tab">Crafts</a>

                                </li>
                                <li class="Fashion"><a href="#Fashion" data-toggle="tab">Fashion</a>

                                </li>
                                <li class="Home"><a href="#Home" data-toggle="tab">Home</a>

                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-7 no-left-padding">
                            <div class="tab-content">
                                <div class="tab-pane active" id="Crafts">
                                    <div class="products-carousel woocommerce">
                                        <div class="owl-carousel" data-navigation="0" data-itemmargin="0" data-autoscroll="0" data-maxitems="3" data-itemsdesktop="3" data-itemsdesktopsmall="3" data-itemsmobile="2">
                                            <div class="owl-container">
                                              ...

CSS

/* 8.0 Carousel */
.owl-carousel {
	width: 100%;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	z-index: 1;
}
.owl-carousel .owl-stage {
	position: relative;
	-ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-controls  {
	position: absolute;
	right: 0;
	top: -39px;
}
.owl-carousel .owl-controls .owl-dot {
	display: none;
}
.owl-carousel .owl-controls .owl-nav .owl-prev {
	margin-right: 1px;
	-webkit-border-radius: 3px 0px 0px 3px;
	border-radius: 3px 0px 0px 3px; 
}
.owl-carousel .owl-controls .owl-nav .owl-next {
	-webkit-border-radius: 3px 0px 0px 3px;
	border-radius: 0px 3px 3px 0px; 
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next {
  cursor: pointer;
  cursor: hand;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	float: left;
	width: 18px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 9px;
	background-color: #9e9e9e;
	color: #ffffff;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.owl-carousel .owl-controls .owl-nav .owl-prev:hover,
.owl-carousel .owl-controls .owl-nav .owl-next:hover {
	background-color: #484848;
}

.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}
.owl-carousel .owl-refresh .owl-item {
  display: none;
}
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
 ...

JavaScript

$(".owl-carousel").each(function () {
    var $this = $(this);
    var autoscroll = $this.attr("data-autoscroll");
    var maxitems = $this.attr("data-maxitems");
    var itemmargin = $this.attr("data-itemmargin");
    var itemsdesktop = $this.attr("data-itemsdesktop");
    var navigation = $this.attr("data-navigation");
    var itemsdesktopsmall = $this.attr("data-itemsdesktopsmall");
    var itemsmobile = $this.attr("data-itemsmobile");

    if (autoscroll == 1) {
        autoscroll = true;
    } else {
        autoscroll = false;
    }
    if (navigation == 1) {
        navigation = true;
    } else {
        navigation = false;
    }

    $this.owlCarousel({
        nav: navigation,
        loop: true,

        navText: ["<i class='fa fa-chevron-left'></i>", "<i class='fa fa-chevron-right'></i>"],
        stagePadding: 0,
        margin: parseInt(itemmargin),
        responsive: {
            0: {
                items: 1
            },
            480: {
                items: 1
            },
            767: {
                items: 3
            },
            1000: {
                items: parseInt(itemsdesktop)
            }
        },
        autoplay: autoscroll,
        autoplayTimeout: 2500,
        autoplayHoverPause: true
    });
    $(".next").click(function () {
        $(".owl-carousel").trigger('owl.next');
    })
    $(".prev").click(function () {
        $(".owl-carousel").trigger('owl.prev');
    })
});