Блог

поэтому, когда я добавляю класс owl-carousel в свой div, который содержит элементы, они исчезают idk почему!!

вот как я добавил таблицу стилей owl-carousel и скрипты в тег head :

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="./css/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
 

и я добавил скрипт src =»app.js » перед закрытием тега body

вот элементы, которые я пытаюсь сделать слайдером :

HTML

 <section class="portSection">

    <div class="wrapper">
        <div class="carousel owl-carousel">
            <div class="owl-item"><img src="./img/portfolio (1).png" alt=""></div>
            <div class="owl-item"><img src="./img/portfolio (2).png" alt=""></div>
            <div class="owl-item"><img src="./img/portfolio (3).png" alt=""></div>
            <div class="owl-item"><img src="./img/portfolio (4).png" alt=""></div>
        </div>
    </div>

</section>
 

Я НАШЕЛ ОТВЕТ!!! УРА, когда я применил calss из carousel owl, он исчез, потому что слайдер работал отлично! но почему элементы исчезли? это казалось неуместным, но это было потому, что моя страница была dir= rtl для этого раздела дайте dir = ltr, и ЭТО СРАБОТАЕТ!!! ВАШИ ПРЕДМЕТЫ НАКОНЕЦ-ТО ПОЯВЯТСЯ! Я БОРОЛСЯ НЕДЕЛЮ! тьфу…

Пожалуйста, ознакомьтесь с основной документацией owl carousel по этой ссылке:

https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html

Я думаю, вы забыли инициализировать owl carousel. Это из базового примера:

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