Как переместить изображение по центру при нажатии на любое изображение в слайдере, используя jquery?

Question

Я хочу переместить изображение в центр, когда я нажимаю на это изображение. Ниже приведен код, который я пробовал, он работает отлично, но в соответствии с требованием, я должен переместить изображение в центре, когда я нажимаю на это изображение. Может ли кто-нибудь мне помочь, пожалуйста?

С совой карусели версии 2.1 .1 и CSS3 Flexbox, просто добавьте стиль:

.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}



$( document ).ready( function() {
  $( '.owl-carousel' ).owlCarousel({
     autoplay: true,
     margin: 2,
     loop: true,
     responsive: {
        0: {
           items:1
        },
        200: {
           items:3
        },
        500: {
           items:4
        }
     }
  });
});

.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.owl-carousel .caption {
  text-align: center;
}


<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>

<div class="owl-carousel">
    <div class="item">
      <img src="http://lorempicsum.com/up/350/200/1">
      <div class="caption">Caption 1</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/255/200/2">
      <div class="caption">Caption 2</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/627/200/3">
      <div class="caption">Caption 3</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/627/300/4">
      <div class="caption">Caption 4</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/627/400/5">
      <div class="caption">Caption 5</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/255/200/6">
      <div class="caption">Caption 6</div>
    </div>
</div>


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

Answer 1

Вы можете использовать "Url Ha sh Navigation" OwlCarousel на слайдах, как показано ниже:

$( document ).ready( function() {
  $( '.owl-carousel' ).owlCarousel({
     autoplay: true,
     margin: 2,
     loop: true,
     URLhashListener:true,
     autoplayHoverPause:true,
     startPosition: 'URLHash',
     center:true,
     responsive: {
        0: {
           items:1
        },
        200: {
           items:3
        },
        500: {
           items:4
        }
     }
  });
});

.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.owl-carousel .caption {
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>

<div class="owl-carousel">
    <div class="item" data-hash="one">
      <a href="#one">
        <img src="http://lorempicsum.com/up/350/200/1">
        <div class="caption">Caption 1</div>
      </a>
    </div>
    <div class="item" data-hash="two">
      <a href="#two">
        <img src="http://lorempicsum.com/up/255/200/2">
        <div class="caption">Caption 2</div>
      </a>
    </div>
    <div class="item" data-hash="three">
      <a href="#three">
        <img src="http://lorempicsum.com/up/627/200/3">
        <div class="caption">Caption 3</div>
      </a>
    </div>
    <div class="item" data-hash="four">
      <a href="#four">
        <img src="http://lorempicsum.com/up/627/300/4">
        <div class="caption">Caption 4</div>
      </a>
    </div>
    <div class="item" data-hash="five">
      <a href="#five">
        <img src="http://lorempicsum.com/up/627/400/5">
        <div class="caption">Caption 5</div>
      </a>
    </div>
    <div class="item" data-hash="six">
      <a href="#six">
        <img src="http://lorempicsum.com/up/255/200/6">
        <div class="caption">Caption 6</div>
       </a>
    </div>
</div>


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

ref. ссылка: https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html