I want to insert indicator dot to my slideshow?

1

I’m trying to insert indicator dots to my slideshow so the user can control the slide move back or toward the images by click on these dots and this is my html and css code and what about the java script code also ?

html

<div class="slider_area">
        <div class="slider_active owl-carousel">
            <div class="single_slider  d-flex align-items-center slider_bg_1 overlay">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-xl-12 col-md-12">
                            <div class="slider_text text-center wow fadeInDown">
							<br>
							<br>
                                <h3>مكة المكرمة</h3>
                                <p>مرحبًا بكم في حملة الذواودة للعمرة</p>
                                <!--<a href="#" class="boxed-btn3">Explore Now</a>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="single_slider  d-flex align-items-center slider_bg_2 overlay">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-xl-12 col-md-12">
                            <div class="slider_text text-center wow fadeInDown">
							<br>
							<br>
                                <h3>المدينة المنورة</h3>
                                <p>مرحبًا بكم في حملة الذواودة للعمرة</p>
                                <!--<a href="#" class="boxed-btn3">Explore Now</a>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="single_slider  d-flex align-items-center slider_bg_3 overlay">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-xl-12 col-md-12">
                            <div class="slider_text text-center wow fadeInDown">
							<br>
							<br>
                                <h3>مكة المكرمة</h3>
                                <p>مرحبًا بكم في حملة الذواودة للعمرة</p>
                                 <!--<a href="#" class="boxed-btn3">Explore Now</a>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- slider_area_end -->

css

.slider_bg_1 {
  background-image: url(../img/banner/makkah.jpg);
}

/* line 4, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
.slider_bg_2 {
  background-image: url(../img/banner/madina.jpg);
}

/* line 7, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
.slider_bg_3 {
  background-image: url(../img/banner/makkah2.jpg);
}

/* line 10, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
.slider_area {
  position: relative;
  z-index: 0;
}

/* line 23, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
.slider_area .single_slider {
  height: 650px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

@media (max-width: 767px) {
  /* line 23, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
  .slider_area .single_slider {
    height: auto;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* line 23, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
  .slider_area .single_slider {
    height: 600px;
  }
}

@media (max-width: 767px) {
  /* line 34, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
  .slider_area .single_slider .slider_text {
    margin: 100px 0 50px 0;
  }
}

/* line 38, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
.slider_area .single_slider .slider_text h3 {
  font-family: "Tajawal", sans-serif;
  font-size: 150px;
  text-transform: capitalize;
  font-weight: 400;
  line-height: .5;
  color: #fff;
  margin-bottom: 0;
}

@media (max-width: 375px) {
  /* line 38, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
  .slider_area .single_slider .slider_text h3 {
    font-size: 30px;
	margin-top: -30px;
  }
}

@media (max-width: 767px) {
  /* line 38, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
  .slider_area .single_slider .slider_text h3 {
    font-size: 30px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* line 38, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
  .slider_area .single_slider .slider_text h3 {
    font-size: 94px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  /* line 38, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
  .slider_area .single_slider .slider_text h3 {
    font-size: 100px;
  }
}

@media (min-width: 1200px) and (max-width: 1500px) {
  /* line 38, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
  .slider_area .single_slider .slider_text h3 {
    font-size: 120px;
  }
}

/* line 62, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
.slider_area .single_slider .slider_text p {
  font-family: "Tajawal", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #FFF;
  margin-top: 33px;
  margin-bottom: 49px;
}

@media (max-width: 375px) {
  /* line 62, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
  .slider_area .single_slider .slider_text p {
    font-size: 10px;
    margin-top: -30px;
    
  }
}

@media (max-width: 767px) {
  /* line 62, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
  .slider_area .single_slider .slider_text p {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* line 79, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
.slider_area .owl-carousel .owl-nav div {
  height: 120px;
  left: 0px;
  width: 50px;
  color: #fff;
  background-color: transparent;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  left: 50px;
  font-size: 14px;
  border: none;
  left: 150px;
  line-height: 120px;
  background: rgba(255, 255, 255, 0.2);
  left: 0;
  border: none !important;
}

/* line 94, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
.slider_area .owl-carousel .owl-nav div.owl-next {
  right: 0;
  left: auto;
}

/* line 98, ../../Arafath/CL/December/231. Travel-02/HTML/scss/_slider.scss */
.slider_area .owl-carousel .owl-nav div:hover {
  background: white;
  color: #001D38;
  border: none;
}
2

@Khorshid98, you may check the link below for the purpose
create your own slideshow

3

@thetradecoder The indicators has been appeared but not working :frowning: