Bonjour j'ai essayé d'ajouter un curseur de carrousel hibou mais son précédent et son suivant ne fonctionnent pas

Mon code est comme ça

<div class="magazine-carousel owl-theme">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="navigation">
    <div class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
    <div class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
  </div>

Maintenant, le script du carrousel de hibou comme celui-ci

 $('.magazine-carousel').owlCarousel({
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:false,
loop:true,
nav:true,
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
responsive:{
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:6
    },
    1600:{
        items:8
    },
    1900:{
        items:10
    }

  }
  })
0
user7747472 5 avril 2017 à 15:26

2 réponses

Meilleure réponse

Veuillez vérifier ce Lien

$(document).ready(function () {
  $('.magazine-carousel').owlCarousel({
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true,
loop:true,
nav:true,
navigation:true,
      navigationText: [
        "<i class='icon-chevron-left icon-white'><</i>",
        "<i class='icon-chevron-right icon-white'>></i>"
      ],
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
responsive:{
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:6
    },
    1600:{
        items:8
    },
    1900:{
        items:10
    }

  }
  });
   $('.magazine-carousel').trigger('owl.play',2000);
});
0
Sarika Koli 6 avril 2017 à 04:40

Vous devez ajouter le Carousel Js et le fichier Css dans votre fichier de modèle.

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>

Exp:

$('.owl-theme').owlCarousel({
     autoplay:true,
     autoplayTimeout:1000,
     autoplayHoverPause:false,
     items:1,
     loop:true,
     navText:['<i aria-hidden="true" class="fa fa-caret-left"></i>','<i aria-hidden="true" class="fa fa-caret-right"></i>'],
     responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:6
                },
                1600:{
                    items:8
                },
                1900:{
                    items:10
                }

             }

})
.prev,
.next{
font-size:100px;
}
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>

<div class="magazine-carousel owl-theme" id="slider">
            <div class="item"><img src="https://wallpaperbrowse.com/media/images/bad-branch-nature-preserve-3.jpg" width="550px" height="280px"></div>
            <div class="item"><img src="https://wallpaperbrowse.com/media/images/bad-branch-nature-preserve-3.jpg" width="550px" height="280px"></div>
            <div class="item"><img src="https://wallpaperbrowse.com/media/images/bad-branch-nature-preserve-3.jpg" width="550px" height="280px"></div>
            <div class="item"><img src="https://wallpaperbrowse.com/media/images/bad-branch-nature-preserve-3.jpg" width="550px" height="280px"></div>
        </div>
        <div class="navigation">
            <div class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
            <div class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
        </div>
0
Pravin Vavadiya 5 avril 2017 à 13:30