猫头鹰轮播更改导航编号

Question

我在其中设置了猫头鹰轮播和图像，并按我的意愿使用了所有选项。它运作良好，没有任何问题。我添加了动画，现在图像从上到下改变了。可以，但是我有一点问题。我不知道如何添加自定义导航。我还需要数字在背景图片的右侧以及从上到下的顺序。

$(document).ready(function() {
    var owl = $('#BG');
  
    owl.owlCarousel({
      loop:true,
      dots:false,
      autoplay:true,
      autoplayHoverPause:false,
      autoplaySpeed: 1000,
      autoplayTimeout: 5000,  
      animateOut: 'slideOutUp',
      animateIn: 'slideInUp',
      items:1,
      mouseDrag: false,
      touchDrag: false,
    });
  

  });

.bg-item1{
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://wallpaperplay.com/walls/full/0/8/8/128266.jpg);
    background-size: cover;
    height:100vh;
  }
  
  .bg-item2{
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://wallpaperplay.com/walls/full/0/8/8/128266.jpg);
    background-size: cover;
    height:100vh;
  }
  
  .bg-item3{
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://wallpaperplay.com/walls/full/0/8/8/128266.jpg);
    background-size: cover;
    height:100vh;
  }
  
  .bg-title{
    font-weight: bold;
    text-transform: uppercase;
    font-size: 50px;  
    
  }
  
  #BG{
    line-height: 2;
  }
  
  .ih1{
   font-weight: bold;
   margin: 0 !important;
   font-size: 50px !important;
   
  }
  
  h1{
    margin-bottom: 0px;
  }
  
  .bg-subtitle{
    margin-top: 0px;
    font-style: italic;
    font-size: 15px;
    line-height: 1.2;
    
  }
  
  @media only screen and (max-width: 1500px) and (min-width: 1200px){
  .bg-title, .ih1 {
      font-size: 60px !important;
  }
  .bg-subtitle{
    font-size: 14px;
  }
  }
  
  @media only screen and (max-width: 1200px) and (min-width: 992px){
    .bg-title, .ih1 {
      font-size: 50px !important;
  }
  .bg-subtitle{
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  }
  
  @media only screen and (max-width: 991px) and (min-width: 768px){
    .bg-title, .ih1 {
      font-size: 40px !important;
  }
  .bg-subtitle{
    font-size: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  }
  
  @media only screen and (max-width: 767px){
    .bg-title, .ih1 {
      font-size: 30px !important;
  }
  .bg-subtitle{
    font-size: 9px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  }
  
  .btn-style-one {
    position: relative;
    padding: 14px 30px;
    line-height: 1em;
    background: transparent;
    margin-top: 0px;
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
    border: 2px solid white !important;
  }
  
  .btn-style-one:hover{
    background-color: #333333;
    
  }

/*

<div id="BG" class="owl-carousel owl-theme">
            <div class="bg-item1 item">
                <div class="container row h-100">
                    <div class="col-sm-12 align-self-center d-flex justify-content-around">
                        <div class="">
                            <div class="bg-title">                                    
                                <h1 class="ih1 red">
                                    Elegantna & Minimalistička
                                </h1>                              
                                <span>
                                    Arhitektura
                                </span>                                 
                            </div>                                
                            <a href="about.html" class="bg-button btn btn-dark btn-style-one scroll-to-target" data-target="Info">Saznaj više</a>                                       
                        </div>
                    </div>
                </div>
            </div>                  
            <div class="bg-item2 item">                   
                <div class="container row h-100">
                    <div class="col-sm-12 align-self-center d-flex justify-content-around">
                        <div class="">
                            <div class="bg-title">                                    
                                <h2 class="ih1 red">
                                    Elegantna & Minimalistička
                                </h2>
                                <span>
                                    Arhitektura
                                </span>                                    
                            </div>                                
                            <a href="service.html" class="bg-button btn btn-dark btn-style-one scroll-to-target" data-target="Usluge">Saznaj više</a>                                          
                        </div>
                    </div>
                </div>
            </div>                                                  
            <div class="bg-item3 item">                    
                <div class="container row h-100">
                    <div class="col-sm-12 align-self-center d-flex justify-content-around">
                        <div>
                            <div class="bg-title">                                    
                                <h2 class="ih1 red">
                                    Elegantna & Minimalistička
                                </h2>
                                <span>
                                    Arhitektura
                                </span>                                    
                            </div> 
                            <a href="contact.html" class="bg-button btn btn-dark btn-style-one scroll-to-target" data-target="Blog">Saznaj više</a>                                          
                        </div>
                    </div>
                </div>
            </div>                                                   
        </div>

Answer 1

这篇文章可能对您有帮助：Owl Carousel, making custom navigation

P.S。我还建议在猫头鹰上使用Slick