首页 > 解决方案 > UIKIT Slider 轮播中心点击

问题描述

有没有办法让旋转木马的图像在点击时以视口为中心?

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

标签: javascriptphpjquerywordpressgetuikit

解决方案


推荐阅读