UIKIT Слайдер центр карусели по клику - PullRequest
Новая
       19

UIKIT Слайдер центр карусели по клику

1 голос
/ 20 июня 2019

Есть ли способ сделать так, чтобы изображения карусели отображались в центре окна при нажатии?

Он будет центрироваться, только если вы щелкнете по пуле навигации, мне нужно, чтобы он центрировался, если вы щелкнете сам объект (li)

Вот мой html в настоящее время, карусель из 5 изображений с содержанием, показанным ниже при наведении / клике

Спасибо 

  <div uk-slider="center: true">
        <div class="uk-position-relative">
            <div class="uk-slider-container">
            <ul class="uk-slider-items uk-grid-collapse uk-grid-small uk-child-width-1-2 uk-child-width-1-2@s uk-child-width-1-5@m company-slider" align="center">
        <li><img src="images/image1.jpg""></li>
            <li><img src="images/image2.jpg""></li>
        ....
        ....
          </ul>
            </div>
            <a class="uk-position-center-left-out slide-ars" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
            <a class="uk-position-center-right-out slide-ars" href="#" uk-slidenav-next uk-slider-item="next"></a>
        </div>
        <ul class="uk-slider-nav uk-dotnav uk-flex-center"></ul>
    </div>


  <div>
    <ul class="uk-subnav uk-hidden">
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      ...
      ...
    </ul>
    <ul class="uk-switcher uk-margin company-content">
      <li>
        <div>
          <h3>Slide Title 1</h3>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam sed facere voluptates, repudiandae atque, rem quia recusandae nisi ducimus voluptatem quo explicabo omnis.</p>
        </div>
      </li>
        <li>
        <div>
          <h3>Slide Title 2</h3>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam sed facere voluptates, repudiandae atque, rem quia recusandae nisi ducimus voluptatem quo explicabo omnis.</p>
        </div>
      </li>
      ...
      ...
    </ul>
  </div>

здесь jquery для переключения контента под ползунком при наведении курсора или нажатии 

        var $switch = UIkit.switcher('.uk-subnav', { animation: 'uk-animation-fade', swiping: false });

        $('.uk-slider-items li').bind('click mouseover',function(event){
            var idVal = $(this).index();
            $switch.show(idVal);
        });
...