CODEWITHSUNDEEP
sliderowl-carousel
sirKaskadir
sirKaskadir

Reputation: 93

Owl carousel 2 - sometimes photos won't load

I've searched internet wide, but I can't find any issue like this...
When I refresh webpage with my owl my photos wont load and i get only something like this: enter image description here

It doesn't happen on every refresh but let's say every 4-5... It'll display photos when I scroll to another one...

here is my js:

$(document).ready(function () {
var $owl = $('.owl-carousel');
$owl.owlCarousel({
    loop:true,
    center: true,
    dots:false,
    margin: 15,
    responsiveClass:true,
    autoWidth: true,
    autoHeight: true,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: true,
    responsive:{
        0:{
            items: 1,
            nav: false
        },
        600:{
            items: 1,
            nav: false
        },
        1000:{
            items: 1,
            nav: false
        }
    }
});
$owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY>0) {
        $owl.trigger('next.owl');
    } else {
        $owl.trigger('prev.owl');
    }
    e.preventDefault();
 });
});

my html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Light Coorporation - Photo</title>
    <?php include '../include/header_template.php' ?>
    <link href="../owlcarousel/assets/owl.carousel.css"     rel="stylesheet">
    <link href="../owlcarousel/assets/owl.theme.default.min.css"     rel="stylesheet">
    <link href="../owlcarousel/assets/owl.theme.dots.modified.css"     rel="stylesheet">
</head>
<body>
    <?php include '../include/fixed_menu.php' ?>
    <br><br><br><br>
    <div class="wrapper col-xs-12 wrapper-photo" style="display:     none;">
        <div class="container">
            <div class="owl-carousel">
                <div class="item custom-photo-width"><img     src="../images/photo/01-04.jpg"></div>
                <div class="item custom-photo-width"><img     src="../images/photo/01-06.jpg"></div>
                <div class="item custom-photo-width"><img     src="../images/photo/01-07.jpg"></div>
                <div class="item custom-photo-width"><img     src="../images/photo/01-08.jpg"></div>
                <div class="item custom-photo-width"><img     src="../images/photo/02-04.jpg"></div>
               ...more photos...
            </div>
        </div>
        <br><br>
        </div>
        <script src="../owlcarousel/owl.carousel.min.js"></script>
        <script src="../js/owl_custom.min.js"></script>
        <script src="../js/jquery.mousewheel.min.js"></script>
    <script>
        $('.wrapper').fadeIn(1500);
    </script>
</body>
</html>

result: http://bez-granic.eu/lc/photo

Upvotes: 1

Views: 1807

Answers (1)

Igor Jerosimić
Igor Jerosimić

Reputation: 13741

You have a race condition between loading images and activating carousel on DOM ready event. Just move your owl call to window.load event and it will solve the issue. Load event fires up when all the images are finished loading.

Upvotes: 2

Related Questions