it-swarm.com.de

Eulenkarussell, benutzerdefinierte Navigation erstellen

Ich habe also ein Eulenkarussell, das drei Bilder enthält. Ich habe auch benutzerdefinierte Navigationspfeile (.png-Bilder) auf der linken und rechten Seite hinzugefügt. Diese Pfeile sind jedoch derzeit unbrauchbar, da ich keinen Weg finden kann, sie zwischen Bildern meines Eulenkarussells wechseln zu lassen. Ich suchte endlos und konnte die Lösung nicht finden. Irgendwelche Ideen?

34
bltzrrr

Sie müssen die Navigation aktivieren und den Navigationstext bearbeiten:

> Angenommen, dies ist version 1.3.2

owlgraphic.com/owlcarousel/#customizing

Note: Anscheinend ist die Site für Owl 1.3 jetzt inaktiv, also hier ist ein gegabeltes Codepen-Beispiel .

$("#owl-example").owlCarousel({
  navigation: true,
  navigationText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

> Angenommen, es ist version 2:

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

$("#owl-example").owlCarousel({
  nav: true,
  navText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

Persönlicher Vorschlag: Verwenden Sie Slick über Eule

94
Stu Furlong

Ich habe es mit css gemacht, dh Klassen für Pfeile hinzugefügt, aber Sie können auch Bilder verwenden. 

Bellow ist ein Beispiel für fontAwesome:

JS:

owl.owlCarousel({
    ...
    // should be empty otherwise you'll still see prev and next text,
    // which is defined in js
    navText : ["",""],
    rewindNav : true,
    ...
});

CSS

.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    font-family: 'fontAwesome';

}
.owl-carousel .owl-nav .owl-prev:before{
    // fa-chevron-left
    content: "\f053";
    margin-right:10px;
}
.owl-carousel .owl-nav .owl-next:after{
    //fa-chevron-right
    content: "\f054";
    margin-right:10px;
}

Bilder verwenden:

.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    //width, height
    width:30px;
    height:30px;
    ...
}
.owl-carousel .owl-nav .owl-prev{
    background: url('left-icon.png') no-repeat;
}
.owl-carousel .owl-nav .owl-next{
    background: url('right-icon.png') no-repeat;
}

Vielleicht wird jemand das hilfreich finden :)

10
Angel M.

Erstellen Sie Ihre benutzerdefinierte Navigation und geben Sie ihnen die gewünschten Klassen. Dann können Sie So einfach ist das.

Sehen wir uns ein Beispiel an:

<div class="owl-carousel">
      <div class="single_img"><img src="1.png" alt=""></div>
      <div class="single_img"><img src="2.png" alt=""></div>
      <div class="single_img"><img src="3.png" alt=""></div>
      <div class="single_img"><img src="4.png" alt=""></div>
</div>
		
<div class="slider_nav">
	<button class="am-next">Next</button>
	<button class="am-prev">Previous</button>
</div>

In Ihrer js-Datei können Sie Folgendes tun:

 $(".owl-carousel").owlCarousel({
    // you can use jQuery selector
    navText: [$('.am-next'),$('.am-prev')]
 
});

5
Mr.Online

In Eulenkarussell 2 können Sie font-awesome Symbole oder beliebige benutzerdefinierte Bilder in der navText-Option wie folgt 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>"]
});
3
Rubel Hossain

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>"]
});
3
Sword I

meine Lösung ist

navigationText: ["", ""]

vollständiger Code ist unten:

    var owl1 = $("#main-demo");
    owl1.owlCarousel({
        navigation: true, // Show next and prev buttons
        slideSpeed: 300,
        pagination:false,
        singleItem: true, transitionStyle: "fade",
        navigationText: ["", ""]
    });// Custom Navigation Events

    owl1.trigger('owl.play', 4500);
1
Fatih Topcu

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;
}   
1
Code Spy

Sie können eine JS- und SCSS/Fontawesome-Kombination für die Schaltflächen Zurück/Weiter verwenden.

In Ihrem JS (dazu gehören nur Screenreader/Zugänglichkeitsklassen der Zurb Foundation):

$('.whatever-carousel').owlCarousel({
    ... ...
    navText: ["<span class='show-for-sr'>Previous</span>","<span class='show-for-sr'>Next</span>"]
    ... ...
})

In Ihrem SCSS dies:

.owl-theme {

    .owl-nav {
        .owl-prev,
        .owl-next {
            font-family: FontAwesome;
            //border-radius: 50%;
            //padding: whatever-to-get-a-circle;
            transition: all, .2s, ease;
        }
        .owl-prev {
            &::before {
                content: "\f104";
            }
        }
        .owl-next {
            &::before {
                content: "\f105";
            }
        }
    }
}

Für die FontAwesome-Schriftfamilie verwende ich zufällig den Einbettungscode im Dokumentkopf:

<script src="//use.fontawesome.com/123456whatever.js"></script>

Es gibt verschiedene Möglichkeiten, FA, Strokes/Folks einzubeziehen, aber ich finde, das ist ziemlich schnell und da ich Webpack verwende, kann ich nur ungefähr mit diesem 1 zusätzlichen Server-Aufruf js leben.

Und um dies zu aktualisieren - gibt es auch diese JS-Option für etwas komplexere Pfeile, die immer noch barrierefrei sind:

$('.whatever-carousel').owlCarousel({
    navText: ["<span class=\"fa-stack fa-lg\" aria-hidden=\"true\"><span class=\"show-for-sr\">Previous</span><i class=\"fa fa-circle fa-stack-2x\"></i><i class=\"fa fa-chevron-left fa-stack-1x fa-inverse\" aria-hidden=\"true\"></i></span>","<span class=\"fa-stack fa-lg\" aria-hidden=\"true\"><span class=\"show-for-sr\">Next</span><i class=\"fa fa-circle fa-stack-2x\"></i><i class=\"fa fa-chevron-right fa-stack-1x fa-inverse\" aria-hidden=\"true\"></i></span>"]
})

Es gibt jede Menge Flucht, verwenden Sie stattdessen einfache Anführungszeichen.

Und in der SCSS kommentieren Sie einfach die :: before-Attribute aus:

.owl-prev {
        //&::before { content: "\f104"; }
    }
    .owl-next {
        //&::before { content: "\f105"; }
    }
1
redplanet

Wenn Sie Ihre eigenen benutzerdefinierten Navigationselemente verwenden möchten,

Für Eulenkarussell 1

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('owl.prev');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    owl.trigger('owl.next');
})

Für Eulenkarussell 2

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);
})
0
Dushan