我想与滑块一起滑动/移动猫头鹰点

Posted 2023-05-08

【中文标题】我想与滑块一起滑动/移动猫头鹰点

【英文标题】：I want to slide/move the owl-dots along with the sliders

【发布时间】：2020-08-29 22:24:13

【问题描述】：

我想移动图像中显示的导航点与滑块一起移动，单击每个栏时应导航到相关滑块。（更改活动类） 我不希望它停留在横幅上。 [![在此处输入图片描述][1]][1]

[1]：

我已经设法使用 html 移动导航点。

    $(function () 
        $('.owl-dot').on('click', function () 
            $(this).parent().find('.owl-dot.active').removeClass('active');
            $(this).addClass('active');
        );
    );

<div class="banner-slider-item1">
            <div class="owl-dots">
                <button role="button" class="owl-dot active"><span></span></button>
                <button role="button" class="owl-dot "><span></span></button>
                <button role="button" class="owl-dot "><span></span></button>
                <button role="button" class="owl-dot "><span></span></button>
            </div>
            <img class="img-fluid temp-slide2" src="~/Images/home-slider.jpg" />
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="banner-content">
                            <h1 class="banner-content-head">
                                the finest notebooks for the best brands
                            </h1>

                            <p>for a new freedom – and more than just beautiful books with a logo</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="banner-slider-item1">
            <div class="owl-dots">
                <button role="button" class="owl-dot "><span></span></button>
                <button role="button" class="owl-dot active"><span></span></button>
                <button role="button" class="owl-dot "><span></span></button>
                <button role="button" class="owl-dot "><span></span></button>
            </div>
            <img class="img-fluid temp-slide2" src="~/Images/slide2.jpg" />
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="banner-content">
                            <h1 class="banner-content-head">
                                a reliable and multifunctional platform for business.
                            </h1>

                            <p>for a new freedom – and more than just beautiful books with a logo</p>


                        </div>
                    </div>
                </div>
            </div>
        </div><!-- banner-slider-item end -->

但是当我点击它们时它不会改变。有人可以帮忙吗？

【参考方案1】：

我建议不要使用控件。但是，如果这是硬性要求，那么您可以如何维护控件的活动状态。我随机提取了一些样式，以便将简单的工作解决方案放在一起。我希望这会有所帮助。

$(function() 
  $('.owl-dot').on('click', function() 
    // dot element
    const $this = $(this);

    // take action only if the current slide is not active
    if (!$this.hasClass('active')) 

      // dot elment index
      const idx = $this.index();

      // slides container
      const $slideContainer = $this.closest('.slide-container');

      // set active state and remove that for other siblings
      $this.siblings().removeClass('active');
      $this.addClass('active');

      // get parent of slide to which we need to move
      const $targetSlide = $slideContainer.find('.banner-slider-item').eq(idx);

      // now set the active state in target slide
      $targetSlide.find('.owl-dot').removeClass('active');
      $targetSlide.find('.owl-dot').eq(idx).addClass('active');

      // finally move the slide
      $slideContainer.css(
        marginLeft: (-500 * idx) + 'px'
      );
    
  );
);

.slide-window 
  display: flex;
  width: 500px;
  height: 300px;
  overflow: hidden;


.slide-container 
  position: relative;
  display: flex;
  transition: all 1s;
  transition-timing-function: ease;


.banner-slider-item 
  position: relative;


.owl-dot 
  cursor: pointer;
  width: 25px;
  height: 8px;
  border: 0;
  background-color: #ee4266;


.owl-dot:hover 
  background-color: #fff361;


.owl-dot.active 
  background-color: #FFD23F;


.banner-slider-item .container 
  position: absolute;
  top: 25%;
  height: 60%;
  right: 0;
  width: 70%;
  background-color: rgba(20, 20, 20, 0.6);
  color: #fff;
  padding: 15px 20px;
  font-family: Helvetica-Neue, Arial;


.banner-slider-item .container h1 
  font-size: 1.6rem;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-window">
  <div class="slide-container">
    <div class="banner-slider-item">
      <img class="img-fluid temp-slide2" src="https://picsum.photos/id/0/500/300" />
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="banner-content">
              <h1 class="banner-content-head">
                the finest notebooks for the best brands
              </h1>
              <div class="owl-dots">
                <button role="button" class="owl-dot active"><span></span></button>
                <button role="button" class="owl-dot"><span></span></button>
                <button role="button" class="owl-dot"><span></span></button>
              </div>
              <p>for a new freedom – and more than just beautiful books with a logo</p>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="banner-slider-item">

      <img class="img-fluid temp-slide2" src="https://picsum.photos/id/1/500/300" />
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="banner-content">
              <h1 class="banner-content-head">
                a reliable and multi-functional platform for business.
              </h1>
              <div class="owl-dots">
                <button role="button" class="owl-dot"><span></span></button>
                <button role="button" class="owl-dot"><span></span></button>
                <button role="button" class="owl-dot"><span></span></button>
              </div>
              <p>for a new freedom – and more than just beautiful books with a logo</p>


            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="banner-slider-item">

      <img class="img-fluid temp-slide2" src="https://picsum.photos/id/2/500/300" />
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="banner-content">
              <h1 class="banner-content-head">
                the finest notebooks for the best brands
              </h1>
              <div class="owl-dots">
                <button role="button" class="owl-dot active"><span></span></button>
                <button role="button" class="owl-dot"><span></span></button>
                <button role="button" class="owl-dot"><span></span></button>
              </div>
              <p>for a new freedom – and more than just beautiful books with a logo</p>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

天哪，你真是个天才：o

谢谢，希望对您有所帮助:)