Сова карусельного плавания идет по одной линии в html

Question

У меня есть готовый ползунок совы, в котором изображения скользят автоматически, а сверху есть навигация, теперь я добавил еще несколько ползунков. но проблема в том, что навигационные стрелки идут в одну строку вместо соответствующих ползунков, как показано ниже:

<div class="owl-carousel" data-autoplay="true" data-items="1" data-sm-items="2" data-lg-items="3" data-xl-items="4" data-margin="30" data-mouse-drag="false" data-navigation-class="#owl-custom-nav-1">

Я пробовал использовать поля top, padding и все, но ничего из этого не работает, кто-нибудь может подсказать mw, как сделать стрелки над соответствующими ползунками. спасибо

Answer 1

    $(document).ready(function() {

      $("#owl-demo, #owl-demo-1").each(function() {
      	$(this).owlCarousel({
          items : 6, //10 items above 1000px browser width
          itemsDesktop : [1000,6], //5 items between 1000px and 901px
          itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
          itemsTablet: [600,2], //2 items between 600 and 0;
          itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
        });
      });
      // Custom Navigation Events
      $(".next").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.next');})
      $(".prev").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.prev');})
    });

    #owl-demo .item, #owl-demo-1 .item{
        background: #3fbf79;
        padding: 30px 0px;
        margin: 10px;
        color: #FFF;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
        width: 190px;
    }
    .customNavigation{
      text-align: center;
    }
    .customNavigation a{
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<div id="demo">
    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="owl-demo" class="owl-carousel">
                    <div class="item">
                        <h1>1</h1>
                    </div>
                    <div class="item">
                        <h1>2</h1>
                    </div>
                    <div class="item">
                        <h1>3</h1>
                    </div>
                    <div class="item">
                        <h1>4</h1>
                    </div>
                    <div class="item">
                        <h1>5</h1>
                    </div>
                    <div class="item">
                        <h1>6</h1>
                    </div>
                    <div class="item">
                        <h1>7</h1>
                    </div>
                    <div class="item">
                        <h1>8</h1>
                    </div>
                    <div class="item">
                        <h1>9</h1>
                    </div>
                    <div class="item">
                        <h1>10</h1>
                    </div>
                </div>
                <div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
            </div>
        </div>
    </div>
</div>
<div id="demo-1">
    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="owl-demo-1" class="owl-carousel">
                    <div class="item">
                        <h1>1</h1>
                    </div>
                    <div class="item">
                        <h1>2</h1>
                    </div>
                    <div class="item">
                        <h1>3</h1>
                    </div>
                    <div class="item">
                        <h1>4</h1>
                    </div>
                    <div class="item">
                        <h1>5</h1>
                    </div>
                    <div class="item">
                        <h1>6</h1>
                    </div>
                    <div class="item">
                        <h1>7</h1>
                    </div>
                    <div class="item">
                        <h1>8</h1>
                    </div>
                    <div class="item">
                        <h1>9</h1>
                    </div>
                    <div class="item">
                        <h1>10</h1>
                    </div>
                </div>
                <div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
            </div>
        </div>
    </div>
</div>