OwlCarousel2 показывает пустые слайды, в то время как все остальные теги HTML отображаются нормально - PullRequest
Новая
       6

OwlCarousel2 показывает пустые слайды, в то время как все остальные теги HTML отображаются нормально

0 голосов
/ 10 октября 2018

Я пытался это исправить, но у меня нет решения, которое могло бы помочь.Я следовал официальным документам по установке.Моя версия Owlcarousel2 2.3.4, я пробовал другие версии, все одинаковые.Старый OwlCarousel работает нормально, а Owlcarousel2 - нет.вот мой HTML 

<html>
<head>

<link href="OwlCarousel/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="OwlCarousel/assets/owl.carousel.min.css" rel="stylesheet" />

<script>

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

</script>

<style>#owl-demo .item {
    border:solid;
  margin: 3px;
}
</style>

</head>

</html>
<body>
    <h1>Owl</h1>
<div class="owl-carousel owl-theme">
    <div class="item"><img src="images/FEATURE1.PNG"></div>
    <div class="item"><img src="images/FEATURE2.PNG"></div>
    <div class="item"><img src="images/FEATURE3.PNG"></div>
    <div class="item"><img src="images/FEATURE4.PNG"></div>
    <div class="item"><img src="images/FEATURE5.PNG"></div>
    <div class="item"><img src="images/FEATURE6.PNG"></div>

</div>

<h1>Owl</h1>

<script src="OwlCarousel/owl.carousel.js"></script>
<script src="OwlCarousel/jquery.min.js"></script>
</body>

<h1>Owl</h1>, но данные класса .owl-carousel невидимы

Ответы [ 3 ]

0 голосов
/ 11 октября 2018

Я наконец-то разбираюсь в главной причине.Это был просто порядок размещения сценария.очевидно, что мы должны использовать jquery.js и owl-carousel.js перед вашим javascript для инициализации вашей карусели. 

<html>
<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<link href="owl/owl.carousel.min.css" rel="stylesheet" type="text/css"/>
<link href="owl/owl.theme.default.min.css" rel="stylesheet" type="text/css"/>

<style>

.item{
border:solid;
}
</style>
</head>

</html>
<body style="overflow: hidden;">
    <h1>Owl</h1>
    <hr/>


<div class="row" >
<div class="owl-carousel col-6" style="">
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>

</div>
</div>

<script src="owl/jquery-2.2.4.min.js"></script>
<script 
src="owl/owl.carousel.min.js"></script>

<script>

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

</script>

<hr/>    
<h1>Owl</h1>

</body>
0 голосов
/ 11 октября 2018

Все отлично поставлено на размещение скриптов.Вы должны следовать этой последовательности.1: jquery 2: owl.carousel.js 3: Затем позвоните сове-роузу 

    <html>
<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<link href="owl/owl.carousel.min.css" rel="stylesheet" type="text/css"/>
<link href="owl/owl.theme.default.min.css" rel="stylesheet" type="text/css"/>

<style>

.item{
border:solid;
}
</style>
</head>

</html>
<body style="overflow: hidden;">
    <h1>Owl</h1>
    <hr/>

<div class="row" >
<div class="owl-carousel col-6" style="">
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>

</div>
</div>

<script src="owl/jquery-2.2.4.min.js"></script>
<script 
src="owl/owl.carousel.min.js"></script>

<script>
   $(document).ready(function() {
     $('.owl-carousel').owlCarousel({
       loop:true,
       margin:10,
       nav:true,
       responsive:{
           0:{
               items:1
           },
           600:{
               items:3
           },
           1000:{
               items:5
           }
       }
   });
   });

</script>

<hr/>    
<h1>Owl</h1>

</body>
0 голосов
/ 10 октября 2018

Я думаю, что вы поставили двойной $('.owl-carousel').owlCarousel({..}).

Используйте это вместо: 

<script>
   $(document).ready(function() {
     $('.owl-carousel').owlCarousel({
       loop:true,
       margin:10,
       nav:true,
       responsive:{
           0:{
               items:1
           },
           600:{
               items:3
           },
           1000:{
               items:5
           }
       }
   });
   });

</script>
...