it-swarm.com.de

Wie man ein Eulenkarussell mit Pfeilen anstelle des nächsten vorherigen macht

gestern habe ich eine Website einem Kunden vorgestellt. Ich benutze immer Eulenkarussell, weil es ansprechend ist. Der Kunde hasste jedoch die vorhergehenden und nächsten Wörter und wollte sie in Pfeile ändern. 

Also habe ich mein Skript aktualisiert. js datei. Es war sehr einfach zu machen und ich wollte es teilen. 

$(document).ready(function(){
$('.owl-carousel').owlCarousel({
    nav:true,
    responsive:{
     ...
 })
 $( ".owl-prev").html('<i class="fa fa-chevron-left"></i>');
 $( ".owl-next").html('<i class="fa fa-chevron-right"></i>');
}); 

Wo hast du es? Sie können immer mehr Styling hinzufügen. (Zum ersten Mal verwende ich eine Antwort auf deine eigene Frage, hoffe das ist der richtige Ort/Weg)

21
user3806549

So machen Sie es in Ihrer Funktion $(document).ready() mit FontAwesome Icons:

 $( ".owl-prev").html('<i class="fa fa-chevron-left"></i>');
 $( ".owl-next").html('<i class="fa fa-chevron-right"></i>');
5
user3806549

Wenn Sie Owl Carousel 2 verwenden, sollten Sie Folgendes verwenden:

$(".category-wrapper").owlCarousel({
     items : 4,
     loop  : true,
     margin : 30,
     nav    : true,
     smartSpeed :900,
     navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
   });
39
Rubel Hossain

Eine Anmerkung für andere, die möglicherweise Owl Carousel v 1.3.2 verwenden:

Sie können den Navigationstext in den Einstellungen ersetzen, in denen Sie die Navigation aktivieren.

navigation:true,
navigationText: [
   "<i class='fa fa-chevron-left'></i>",
   "<i class='fa fa-chevron-right'></i>"
]
15
Pandy

Der folgende Code funktioniert für mich auf owl carousel.

https://github.com/OwlFonk/OwlCarousel

$(".owl-carousel").owlCarousel({
    items: 1,
    autoplay: true,
    navigation: true,
    navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});

Für OwlCarousel2 

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

 $(".owl-carousel").owlCarousel({
    items: 1,
    autoplay: true,
    nav: true,
    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});
8
Sword I

Vollständiges Tutorialhier

Demolink

 enter image description here

JavaScript

$('.owl-carousel').owlCarousel({
    margin: 10,
    nav: true,
    navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 3
        },
        1000: {
            items: 5
        }
    }
});

CSS Style für die Navigation

.owl-carousel .nav-btn{
  height: 47px;
  position: absolute;
  width: 26px;
  cursor: pointer;
  top: 100px !important;
}

.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled{
pointer-events: none;
opacity: 0.2;
}

.owl-carousel .prev-slide{
  background: url(nav-icon.png) no-repeat scroll 0 0;
  left: -33px;
}
.owl-carousel .next-slide{
  background: url(nav-icon.png) no-repeat scroll -24px 0px;
  right: -33px;
}
.owl-carousel .prev-slide:hover{
 background-position: 0px -53px;
}
.owl-carousel .next-slide:hover{
background-position: -24px -53px;
}   
4
Code Spy

Wenn Sie die neueste Version von Owl Carousel 2 verwenden. Sie können den Navigationstext durch ein fontawesome-Symbol ersetzen. Code ist unten.

$('.your-class').owlCarousel({
        loop: true,
        items: 1, // Select Item Number
        autoplay:true,
        dots: false,
        nav: true,
        navText: ["<i class='fa fa-long-arrow-left'></i>","<i class='fa fa-long-arrow-right'></i>"],

    });
0
Tariqul_Islam