<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'> <div class="container"> <div class="container"> <div class="owl-carousel"> <div><img src="//placehold.it/400x300/f06/fff/?text=1" alt=""></div> <div><img src="//placehold.it/400x300/f63/fff/?text=2" alt=""></div> <div><img src="//placehold.it/400x300/fc3/fff/?text=3" alt=""></div> <div><img src="//placehold.it/400x300/693/fff/?text=4" alt=""></div> <div><img src="//placehold.it/400x300/3cc/fff/?text=5" alt=""></div> <div><img src="//placehold.it/400x300/369/fff/?text=6" alt=""></div> <div><img src="//placehold.it/400x300/936/fff/?text=7" alt=""></div> </div> </div> </div> <script> var $owl = $('.owl-carousel'); $owl.children().each( function( index ) { $(this).attr( 'data-position', index ); // NB: .attr() instead of .data() }); $owl.owlCarousel({ center: true, loop: true, items: 3, margin:10, responsiveClass:true, responsiveClass:true, responsive:{ 0:{ items:1, nav:true }, 600:{ items:3, nav:false }, } }); $(document).on('click', '.owl-item>div', function() { $owl.trigger('to.owl.carousel', $(this).data( 'position' ) ); }); </script>

.owl-item > div { cursor: pointer; margin: 6% 8%; transition: margin 0.4s ease; } .owl-item.center > div { cursor: auto; margin: 0; } .owl-item:not(.center) > div:hover { opacity: .75; }

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js'></script>