owl carousel

by iselwin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<div class="wrapper">
<div id="gallery_9e1d5120616c4b1ba6dd0c8615a1fb2d" class="owl-carousel">
        <div class="item">            
            <img src="https://via.placeholder.com/350x150" />            
            
        </div>
        <div class="item">            
            <img src="https://via.placeholder.com/350x150" />            
            
        </div>
        <div class="item">            
            <img src="https://via.placeholder.com/350x150" />            
            
        </div>
        <div class="item">            
            <img src="https://via.placeholder.com/350x150" />            
            
        </div>
        <div class="item">            
            <img src="https://via.placeholder.com/350x150" />            
            
        </div>
        <div class="item">            
            <img src="https://via.placeholder.com/350x150" />            
            
        </div>
</div>

</div>

CSS

html {
/*width:200px;*/
}
body {
    padding:10px;
  
}

JavaScript

$("#gallery_9e1d5120616c4b1ba6dd0c8615a1fb2d").owlCarousel({
            margin: 2,
            loop: true,
            navigation: true,
            autoWidth: true,
            autoHeight: false,
            center: true,
            0: {
                items:6,
            },
            678: {
                items: 6,
            },
            1000: {
                items: 6
            }
 });
// hotfix for this problem
var owl = $('.owl-carousel');
owl.on('initialized.owl.carousel', function() {
    var owlCarousel = owl.data('owlCarousel');
    var $stage = owl.find('.owl-stage');
    var fullWidth = 0;
    $stage.find('.owl-item').each(function(i, e) {
        fullWidth += $(e).width() + owlCarousel.options.margin * 2;
    });
    $stage.width(fullWidth);            
    
});