Question

我已经实现了自定义的prev next按钮（我省略了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>

Answer 1

使用选项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 Carousel 2根据点击的点的索引转到幻灯片。

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

这应该是你需要的所有自定义点和Owl Carousel 2。

通过 ~~http://derickruiz.com/owl-carousel-custom-dots~~

Answer 2

您可以通过以下方式解决问题：

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

Answer 3

CSS：

 project("_id", "published", "title", "books")
   .and(ArrayOperators.Size.lengthOfArray(ConditionalOperators.ifNull("books").then(Collections.emptyList()))).as("booksCount")

HTML：

   .owl-dots button i {
        position: absolute;
        z-index: 9999;
        width: 100%;
        height: 100%;
    }

jQuery：

<div class="testimonial_slider owl-carousel owl-theme">
    <div class="item" data-dot="<button><i></i><img src='images/testimonial-1.jpg' alt='' class='img-fluid' /></button>">
        <div class="testimonial-dec">
            <h4>Aklima The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections Bonorum et Malorum original.</h4>
        </div>
        <div class="testimonial-name mt-4">
            <p class="border-bottom d-inline-block"><span class="d-inline-block text-uppercase text-dark">AKLIMA</span>  - COO, AMERIMAR ENTERPRISES, INC.</p>
        </div>
    </div>
</div>

enter image preview

如何在猫头鹰旋转木马中制作自定义点？

3 个答案: