0
votes

Carrousel Owl n'ayant pas afficher le bouton précédent suivant en une seule conception HTML

 Entrez la description de l'image ici J'utilise le carrousel de hibou dans mon format HTML. Cela fonctionne bien mais ne pas afficher le bouton suivant et précédent. Ensuite, j'ai ajouté un bouton dans ma page, il ne figure toujours pas. Et j'ai également mis en œuvre de la même manière dans mon modèle de lame de Laravel, il fonctionne bien avec le prochain bouton précédent. J'ai ajouté la version 2.3.4 de Owl Carousel. Voici mon code que j'ai fait dans mon HTML:

J'en ai ajouté des images. Dans la première photo, cela fonctionne bien avec la lame de Laravel. Et en seconde, il n'affiche pas le bouton fléchant pour les prochaines et précédentes. Entrez la description de l'image ici Je l'ai cherché mais je n'ai pas eu de solution appropriée. Est-ce que quelqu'un sait ce qui ne va pas avec ça? Ai-je manqué quelque chose? Merci pour l'aide à l'avance. xxx


7 commentaires

Vous souhaitez poser des questions sur Owl Carrousel et vous n'avez aucune initialisation de cela, veuillez ajouter du code de cela aussi.


OWL CAROUSEL CONFIG Utilisez NAV: TRUE, Pour afficher la navigation


Je l'ai ajouté. Ça ne fonctionne pas! @Ajay maurya


J'ai déjà ajouté tout le code de carrousel! Code @just


@Kinjalvithalani où l'initialisez-vous?


@Kinjalvithalani Assurez-vous que d'autres scripts ne causent aucun conflit, modifier les commandes de scripts. Vérifiez également la version JQuery.


Ok je vais vérifier !!


3 Réponses :


0
votes

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</head>
<body>
  <section class="features">
     <!-- <img src="images/features  -bg.jpg" alt="Fitzoh" class="features-bg"> -->
     <div class="container">
        <div class="row align-items-center">
           <div class="col-12 col-lg-6 text-center text-lg-left">
              <h6 class="text-light-green">Standout with Fitzoh</h6>
              <div class="divider-sm"></div>
              <h2>Take your fitness business to the next level</h2>
              <p>With Fitzoh, adopting a better client experience has been made easier than ever.</p>
              <a href="#" title="" class="btn btn-lg btn-primary btn-round">Know More</a>
              <div class="features-list mt48 text-left">
                 <a href="#one" class="feature mb24 active">
                    <p class="mb0">Add value to your brand through your own application</p>
                 </a>
                 <a href="#two" class="feature mb24">
                    <p class="mb0">Enhance client experience through virtual training</p>
                 </a>
                 <a href="#three" class="feature mb24">
                    <p class="mb0">Create your own excercise and diet plans</p>
                 </a>
                 <a href="#four" class="feature mb24">
                    <p class="mb0">Easy Scheduling & performance tracking</p>
                 </a>
              </div>
           </div>
           <div class="col-12 col-lg-6 text-center text-lg-right">
              <div class="owl-carousel">
                 <div class="item" data-hash="one">
                    <img class="block-image" src="https://png.pngtree.com/thumb_back/fw800/20151028/pngtree-Design-Light-Texture-Wallpaper-background-photo-674871.jpg" alt="image">
                 </div>
                 <div class="item" data-hash="two">
                    <img class="block-image" src="https://blog.sonicwall.com/wp-content/uploads/2018/05/SNWL-image-412.jpg" alt="image">
                 </div>
                 <div class="item" data-hash="three">
                    <img class="block-image" src="http://www.rishtiindia.com/wp-content/uploads/2016/01/Background-Image-of-Flyer-Brochure.jpg" alt="image">
                 </div>
                 <div class="item" data-hash="four">
                    <img class="block-image" src="https://ane4bf-datap1.s3-eu-west-1.amazonaws.com/wmocms/s3fs-public/news/featured_media/featured-image-index.png?4t5V5QpQ.h.L2MpEUHsgfJM_lASy4dbb" alt="image">
                 </div>
              </div>
           </div>
           
        </div>
     </div>
  </section>
  
</body>
</html>


4 commentaires

Merci pour la réponse mais ça ne marche pas !! @Ajay maurya


Je l'ai exécuté et ajouté aussi le même code dans mon code mais cela ne fonctionne pas! Les images infect ne figurent pas non plus après avoir ajouté ce code! Je suppose que cela se produit parce que quelque chose remplace le CSS ou JS du CAROUSEUR. Je ne sais pas quoi !!?


Version de sorcière Owl-Carousel Bibliothèque que vous utilisez?


J'utilise la version 2.3.4



0
votes

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    dots:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})


0 commentaires

0
votes

NAV: True -> Activer la navigation arrow, DOTS: True -> Activer la navigation par points xxx


0 commentaires