web-dev-qa-db-ja.com

フクロウのカルーセルでカスタムドットを作成するにはどうすればよいですか？

カスタムのprevnextボタン（prev nextボタンのcssスタイルを省略）を実装しましたが、ドットがありません。私がした間違いを誰が知っていますか？

// owl.carousel.css

.owl-controls {
    text-align: center;
}
.owl-controls .owl-dot {
    display: inline-block;
}
.owl-controls .owl-dot span {
    background-color: #333;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    width: 12px;
    filter: Alpha(Opacity=500);/*IE7 fix*/
    opacity: 0.5;
}
.owl-controls .owl-dot.active span, .owl-controls .owl-dot:hover span {
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}
<script>
                $(document).ready(function(){
                        $('.owl-carousel').owlCarousel({
                    loop:true,
                    margin:10,
                    nav:true,
                    navText: ["<img src='prevArrow.png'>","<img src='nextArrow.png'>"],
                    responsive:{
                0:{
                    items:1
                },
                600:{
                    items:1
                },
                1000:{
                    items:1
                }
                    }
                        })
                });
        </script>

<div class="owl-carousel">
          <img src="lylka.png" alt="">
          <img src="lylka.png" alt="">
          <img src="lylka.png" alt="">
          <img src="lylka.png" alt="">
          <img src="lylka.png" alt="">
</div>
htmlcssowl-carousel
3
Marik Zuckor

オプションdotsContainerを使用しますが、正しく機能しない場合があります。

例えば

<div id='carousel' class='owl-carousel'> 
  <div class='item'></div> 
  <div class='item'></div> 
  <div class='item'></div> 
</div>
<ul id='carousel-custom-dots' class='owl-dots'> 
  <li class='owl-dot'><!-- Anything in here --></li> 
  <li class='owl-dot'></li> 
  <li class='owl-dot'></li> 
</ul>

次に、これをオプションオブジェクト内に含めます。

owl.owlCarousel({
  dotsContainer: '#carousel-custom-dots'
});

以下は、クリックされたドットのインデックスに基づいてスライドに移動するようにOwl Carousel2に指示します。

$('.owl-dot').click(function () {
  owl.trigger('to.owl.carousel', [$(this).index(), 300]);
});

カスタムドットを作成してOwlCarousel 2を使用するために必要なのは、これだけです。

経由 http://derickruiz.com/owl-carousel-custom-dots

7
BulatSa

この方法で問題を解決できます。

HTMLコード

<section id="slider" class="content-slider row">
<div class="col-8 owl-carousel slide-cnt">
    <div class="slide"><h3>TITOLO</h3></div>
    <div class="slide"><h3>TITOLO</h3></div>
    <div class="slide"><h3>TITOLO</h3></div>
</div>
<div class="col-4 dots-cnt">
    <ul class="elenco-articoli">
        <li>Titolo</li>
        <li>Titolo</li>
        <li>Titolo</li>
    </ul>
</div>

JSコード：

var owl;
owl = jQuery('.owl-carousel').owlCarousel({
    loop:true,
    autoplay: true,
    autoplaySpeed: 600,
    nav:true,
    navText: ["<",">"],
    dots:false,
    items:1
});
jQuery('.elenco-articoli').on('click', 'li', function(e) {
    owl.trigger('to.owl.carousel', [jQuery(this).index(), 300]);
});

これは私のために働きます。

必要に応じて、詳細を説明できます： https://codepen.io/vbeetlejuice/pen/dRaero

2
Gabriele Fagnani