web-dev-qa-db-fra.com

Owl Carousel, rendant la navigation personnalisée

J'ai donc un carrousel de hibou qui contient trois images. J'ai également ajouté des flèches de navigation personnalisées (images .png) à gauche et à droite. Cependant, ces flèches sont actuellement inutiles, car je ne trouve pas le moyen de les faire basculer entre les images de mon carrousel de la chouette. J'ai cherché sans cesse et ne trouve pas la solution. Des idées?

jqueryhtmlcss3carouselowl-carousel
34
bltzrrr

Vous devez activer la navigation et éditer navigationText:

> En supposant qu'il s'agisse de version 1.3.2

owlgraphic.com/owlcarousel/#customizing

Note: Il semble que le site de Owl 1.3 soit maintenant en panne, donc voici un exemple codepen en forme de fourche .

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

> En supposant que c'est 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'>"]
});

Suggestion personnelle: Utilisez Slick over Owl

94
Stu Furlong

Je l’ai fait avec css, c’est-à-dire en ajoutant des classes pour les flèches, mais vous pouvez aussi utiliser des images. 

Ci-dessous, un exemple avec 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;
}

Utilisation d'images: 

.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;
}

Peut-être que quelqu'un trouvera cela utile :)

10
Angel M.

Créez votre navigation personnalisée et donnez-leur les classes que vous souhaitez, vous êtes alors prêt à partir. c'est simple comme ça.

Voyons un exemple:

<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>

Dans votre fichier js, vous pouvez effectuer les opérations suivantes: 

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

5
Mr.Online

Dans hibou carrousel 2, vous pouvez utiliser des icônes font-awesome ou n’importe quelle image personnalisée dans navText comme ceci:

$(".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

Le code suivant fonctionne pour moi sur 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>"]
});

Pour 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

ma solution est

navigationText: ["", ""]

code complet est ci-dessous:

    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

Didacticiel completici

Démolink

 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
        }
    }
});

Style CSS pour la 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

Vous pouvez utiliser une combinaison JS et SCSS/Fontawesome pour les boutons Précédent/Suivant.

Dans votre JS (cela inclut uniquement les classes de lecteur d’écran/d’accessibilité avec Zurb Foundation):

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

Dans votre SCSS ceci:

.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";
            }
        }
    }
}

Pour la famille de polices FontAwesome, il m'est arrivé d'utiliser le code incorporé dans l'en-tête du document:

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

Il existe différentes manières d'inclure FA, les traits/personnes, mais je trouve que c'est assez rapide et que j'utilise Webpack, je peux à peu près vivre avec cet appel supplémentaire sur le serveur js.

Et pour mettre à jour ceci - il y a aussi cette option JS pour des flèches légèrement plus complexes, toujours dans un souci d'accessibilité:

$('.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>"]
})

Les charges de s'échapper là-bas, utilisez des guillemets simples à la place si vous le préférez.

Et dans le SCSS, commentez les :: avant attrs:

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

Si vous souhaitez utiliser vos propres éléments de navigation personnalisés,

Pour hibou carrousel 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');
})

Pour hibou carrousel 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