css 猫头鹰箭头导航

Posted 2021-05-13

(function ($) {
  // jq need this line

//con
    $('#content-slider').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    autoplay:true,
    navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
autoplayTimeout:5000,
autoplayHoverPause:false,


    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1,
           
        }
    }
});
    //
    
})(jQuery);

/*owl arrow nav*/
.owl-carousel .item
{
  height: 10rem;
  background: #4DC7A0;
  padding: 1rem;
}

.owl-prev, .owl-next {
    position: absolute;
    top: 40%;
    margin-top: -50px;
    text-align: center;
    background-color: #fff;
    filter: Alpha(Opacity=50);/*IE7 fix*/
    opacity: 0.85;
}
.owl-prev:hover, .owl-next:hover {
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}
.owl-next {
    right: 0px;
}
.owl-controls {
    text-align: center;
}
.owl-controls .owl-page {
    display: inline-block;
}
.owl-theme .owl-nav [class*='owl-'] {
    margin: 0px;
    display: block!important;
  
}
.owl-prev i, .owl-next i{
    padding: 10px
}

/*owl arrow nav*/