I want to slide/move the owl-dots along with the sliders

Question

I want to move the navigation dots shown in the image move along with the slider and when click on each bar should navigate to the relevant slider.(change the active class) I don't want it to stay still on the banner. [![enter image description here][1]][1]

[1]:

I have managed to move the navigation dots using 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 -->

but it doesn't change when I click on them. Can anyone help?

Answer 1

I recommend keeping the controls out. But if it's the hard requirement then here is how you can maintain the active states for the controls. I have pulled up some styles randomly so as to put together the simple working solution. I hope this helps.

$(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>