1

so when i add owl-carousel class to my div which contains the items they disappear idk why!!

this is how i added owl-carousel style sheet and scripts in head tag :

<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>

and i added script src="app.js" before closing body tag

here is the items im trying to make a slider :

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>
zahra
  • 33
  • 1
  • 7

2 Answers2

2

I FOUND THE ANSWER!!! YAY when i applied the calss of carousel owl it would disappear bcz the slider was working perfectly! but why the items disappeared ? it seemed irrelevant but it was bcz my page was dir=rtl for that section give dir=ltr and IT WILL WORK!!! YOUR ITEMS WOULD COME FINALLY ! I WAS STRUGGLING A WEEK ! phew...

zahra
  • 33
  • 1
  • 7
0

Please check the basic documentation of owl carousel at this link:

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

I think you forgot to initialize the owl carousel. This is from basic example:

<script>
        $('.owl-carousel').owlCarousel({
            loop:true,
            margin:10,
            nav:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:2
                }
            }
        })
</script>
Rajender Verma
  • 389
  • 3
  • 9
  • You will need to add more slides to change, currently you have 4 items only, add 4 more then test. – Rajender Verma Nov 20 '20 at 07:55
  • Try my this fiddle example: https://jsfiddle.net/bck1w2g0/ , it's the same as my above answer, you can test on mouse drag slide the items will slide. – Rajender Verma Nov 20 '20 at 08:00