Сова Карусель не отображается как дисплей - PullRequest
Новая
       8

Сова Карусель не отображается как дисплей

0 голосов
/ 11 марта 2020

Я пытаюсь использовать Сову Карусель, но не могу заставить ее работать. Я пытался использовать как CDN, так и из моих файлов. Div установлен как display none. Не уверен, почему я делаю неправильно. Папка Owl оттуда с сайта, но я переименовал. 

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

<body>
<div class="owl-carousel owl-theme mt-5">
    <div class="item"><h4>1 testing</h4></div>
    <div class="item"><h4>2 testing</h4></div>
    <div class="item"><h4>3 testing</h4></div>
    <div class="item"><h4>4 testing</h4></div>
    <div class="item"><h4>5 testing</h4></div>
    <div class="item"><h4>6 testing</h4></div>
    <div class="item"><h4>7 testing</h4></div>
    <div class="item"><h4>8 testing</h4></div>
    <div class="item"><h4>9 testing</h4></div>
    <div class="item"><h4>10 testing</h4></div>
    <div class="item"><h4>11 testing</h4></div>
    <div class="item"><h4>12 testing</h4></div>
</div>
<script>
    $(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            loop:true,
            margin:10,
            nav:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:5
                }
            }
        })
    });
</script>  

<script type="text/javascript" src="/owl/docs/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="/owl/dist/owl.carousel.js"></script>

Ответы [ 2 ]

0 голосов
/ 11 марта 2020

скрипт для jQuery и OwlCarousel находится ниже скрипта, где вы инициализируете OwlCarousel. В результате OwlCarousel не признается глобальным. Поэтому для дисплея задано значение none, что является поведением по умолчанию, когда OwlCarousel не инициализируется для этого элемента.

Попробуйте следующий код: 

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

<body>
<div class="owl-carousel owl-theme mt-5">
    <div class="item"><h4>1 testing</h4></div>
    <div class="item"><h4>2 testing</h4></div>
    <div class="item"><h4>3 testing</h4></div>
    <div class="item"><h4>4 testing</h4></div>
    <div class="item"><h4>5 testing</h4></div>
    <div class="item"><h4>6 testing</h4></div>
    <div class="item"><h4>7 testing</h4></div>
    <div class="item"><h4>8 testing</h4></div>
    <div class="item"><h4>9 testing</h4></div>
    <div class="item"><h4>10 testing</h4></div>
    <div class="item"><h4>11 testing</h4></div>
    <div class="item"><h4>12 testing</h4></div>
</div>
<script type="text/javascript" src="/owl/docs/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="/owl/dist/owl.carousel.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>
0 голосов
/ 11 марта 2020

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

<body>
<div class="owl-carousel owl-theme mt-5">
    <div class="item"><h4>1 testing</h4></div>
    <div class="item"><h4>2 testing</h4></div>
    <div class="item"><h4>3 testing</h4></div>
    <div class="item"><h4>4 testing</h4></div>
    <div class="item"><h4>5 testing</h4></div>
    <div class="item"><h4>6 testing</h4></div>
    <div class="item"><h4>7 testing</h4></div>
    <div class="item"><h4>8 testing</h4></div>
    <div class="item"><h4>9 testing</h4></div>
    <div class="item"><h4>10 testing</h4></div>
    <div class="item"><h4>11 testing</h4></div>
    <div class="item"><h4>12 testing</h4></div>
</div>
<script>
    $(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            loop:true,
            margin:10,
            nav:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:5
                }
            }
        })
    });
</script>  

<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
...