parent div witdh same like below image width

$(‘.blog-details-img’).each(function() {
$(this).width($(this).find(‘img’).width());
});

markup
<div style=”margin:0 auto;” class=”blog-details-img”>
<img src=”assets/img/blog-details-img.jpg” alt=””>
<div class=”text”>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, necessitatibus nihil iure labore quo. Optio incidunt mollitia enim beatae vero.</p>
</div>
</div>

OwlCarousel wrap center. with click center wrap to next wrap.

var $owl = $(‘.carousel_active’);

$owl.children().each( function( index ) {
$(this).attr( ‘data-position’, index ); // NB: .attr() instead of .data()
});

if ($.fn.owlCarousel) {
$owl.owlCarousel({
items: 2,
loop: true,
center:true,
nav: false,
autoplay: false,
margin: 60,
});
}

$(document).on(‘click’, ‘.owl-item > .carousel_single’, function() {
$owl.trigger(‘to.owl.carousel’, $(this).data( ‘position’ ) );
});