Bootstrap Snippet Move clicked item center of the Owl Carousel using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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;
}
 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
 <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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Move clicked item center of the Owl Carousel"
Bootstrap 4.0.0 Snippet by dkstudio

Related: See More

Questions / Comments:

"Move clicked item center of the Owl Carousel" Bootstrap 4.0.0 Snippet by dkstudio

Related: See More

Questions / Comments:

"Move clicked item center of the Owl Carousel"
Bootstrap 4.0.0 Snippet by dkstudio