Javascript-форум - Owl Carousel 2 как переместить кнопочки ?

Javascript-форум (https://javascript.ru/forum/)

- Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)

- - Owl Carousel 2 как переместить кнопочки ? (https://javascript.ru/forum/library-toolkit-framework/66435-owl-carousel-2-kak-peremestit-knopochki.html)

Owl Carousel 2 как переместить кнопочки ?

Добрый день уважаемые. Верстаю слайдер через библиотеку owl.carousel.js Столкнулся с необходимостью перемещения кнопок перехода (Не знаю как их правильно назвать) на другой див от карусели, это вообще реально ? (я нашел что к ним обращаться можно через класс .owl-dot ) По умолчанию они находятся ПОД слайдером, мне же необходимо так

Вся проблема состоит в том что Слайдер и кнопки находяться в разных колонках.

Black_Star,
вариант ниже для другого слайдера, но для Owl Carousel 2 можно тоже самое сделать.
owl.on('change.owl.carousel', function(e) { .... .eq(e.page.index)

owl.trigger('to.owl.carousel', [i,300]);

http://javascript.ru/forum/jquery/66...tml#post437580

owlCarousel кнопки вне слайдера

Black_Star,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
      <script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
      <script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
      <link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
      <link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css">
      <link rel="stylesheet" type="text/css" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.4/typed.min.js"></script>
  <style type="text/css">
 .owl-carousel{
   width: 200px;
   margin-left: 200px;
 }
    .owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
    position:relative;
}

.how-top-paging__slide.active{
    background-color:#FF0000;
    border-radius: 50%;
     padding: 5px;
  }

  span{
    margin:8px;
  }
  </style>

  <title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>
$(function() {
var owl = $('.owl-carousel').owlCarousel({
   loop: true,
                nav: false,
                items:1
});
var dot = $(".how-top-paging__slide");
owl.on('changed.owl.carousel', function(e) {
dot.removeClass("active").eq(e.page.index).addClass("active")
                });
dot.on("click", function() {
        var i = dot.index(this);
        owl.trigger('to.owl.carousel', [i,300]);

    });

})

</script>


</head>

<body>
    <div class="how-top-paging">
    <span class="how-top-paging__slide active" data-count="0">11</span><span class="how-top-paging__slide" data-count="1">22</span><span class="how-top-paging__slide" data-count="2">33</span>
  </div>
  <div class="owl-carousel">
    <div class="item"> <div class="string1">111 up</div><div class="string2">111 dn</div>
        <h4>1</h4>
    </div>
    <div class="item"> <div class="string1">222 up</div><div class="string2">222 dn</div>
        <h4>2</h4>
    </div>
    <div class="item"> <div class="string1">333 up</div><div class="string2">333 dn</div>
        <h4>3</h4>
    </div>

</div>

</body>

</html>

Спасибо, рони :thanks: