单击UIKIT Slider旋转木马中心

时间:2019-06-20 06:55:29

标签: javascript php jquery wordpress getuikit

有没有一种方法可以使旋转木马的图像在单击时居中放置在视口的中心?

仅当您单击项目符号导航时它才会居中,如果您单击对象本身(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);
        });

0 个答案:

没有答案