Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как к карусели прикрутить дополнительные переключатели элементов? (https://javascript.ru/forum/jquery/64341-kak-k-karuseli-prikrutit-dopolnitelnye-pereklyuchateli-ehlementov.html)

ligisayan 04.08.2016 10:41
Как к карусели прикрутить дополнительные переключатели элементов?
 
Всем привет!
Есть owl carousel, в которой используется свойство stagePadding для видимости кусочков элементов. Как сделать так, чтобы помимо переключателей next|prev, карусель переключалась также при клике на выступы элементов справа и слева соответственно?

по сути: нужно объединить 2 решения из фидла 1 и фидла 2, чтобы можно было переключать карусель как по стрелкам навигации, так и по выступам - как это можно сделать?

Spass 04.08.2016 10:49
1) берешь первое решение
2) добавляешь снизу две кнопки
3) вешаешь на них тригер нажатия на .owl-next и .owl-prev
$('.next-btn').on('click', function() {
$('.owl-next').trigger('click');
});

рони 04.08.2016 10:53
ligisayan,
прочитать доку и добавить сто тысяч кнопок в любое место во второе решение

рони 04.08.2016 11:06
owlCarousel дополнительные кнопки prev next
 
ligisayan,
<!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">
  <style type="text/css">
    .owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
    position:relative;
}
.owl-carousel .owl-prev{
   position:absolute;
   top:0; left:0;
   display:block;
   height:99%;
   width:90px;
   background:red;
}
.owl-carousel .owl-next{
   position:absolute;
   top:0; right:0;
   display:block;
   height:99%;
   width:90px;
   background:red;
}
.owl-prev,.owl-next{
  opacity:0;
}

.prev:after, .next:after{
  content: attr(class);
}

.prev,.next{
  display: inline-block;
}

  </style>

  <title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>
$(function() {
var owl = $('.owl-carousel').owlCarousel({
    stagePadding: 100,
    loop: true,
    margin: 10,
    nav:true,
    autoplay:true,
    autoplayTimeout:2000,
    autoplayHoverPause:true,
    responsive: {
        0: {
            items: 1
        },
        470: {
            items: 3
        },
        768: {
            items: 4
        },
        1199: {
            items: 5
        }
    }
});
$('body').on('click', '.prev, .next',function(event) {
event.preventDefault();
$(this).is('.prev') ? owl.trigger('prev.owl.carousel') : owl.trigger('next.owl.carousel')
})



})

</script>


</head>

<body>
  <div class="owl-carousel">
    <div class="item">
        <h4>1</h4>
    </div>
    <div class="item">
        <h4>2</h4>
    </div>
    <div class="item">
        <h4>3</h4>
    </div>
    <div class="item">
        <h4>4</h4>
    </div>
    <div class="item">
        <h4>5</h4>
    </div>
    <div class="item">
        <h4>6</h4>
    </div>
    <div class="item">
        <h4>7</h4>
    </div>
    <div class="item">
        <h4>8</h4>
    </div>
    <div class="item">
        <h4>9</h4>
    </div>
    <div class="item">
        <h4>10</h4>
    </div>
    <div class="item">
        <h4>11</h4>
    </div>
    <div class="item">
        <h4>12</h4>
    </div>
</div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div></body>

</html>


Часовой пояс GMT +3, время: 20:42.