Owl Carousel loading problems

JavaScript
1

Hi guys,

I have an issue with Owl carousel, I used it to create a photo gallery on my site but the first time that it loads the page it will usually not load the scroller and will show pictures in an unorderly fashion. Upon a refresh, it will show the scroller interface.

Could someone please help me understand why this is happening?

https://alisayuldybaeva.com/

<!doctype html>
<html lang="en">
<title>Alisa Yuldybaeva</title>

<head>
	<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-137260460-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-137260460-1');
</script>
	<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/owl.theme.default.min.css">
	<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Srisakdi|Ubuntu" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
	<meta name="description" content="Professional portfolio of Alisa Yuldybaeva">
  <meta name="keywords" content="photography,media,visual,design,art,alisa">
  <meta name="author" content="Alisa Yuldybaeva">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-137260460-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-137260460-1');
</script>
</head>

<body>
  <header class="header-content">	
		<a href="index.html"><h1 class="titleay">Alisa Yuldybaeva</h1></a>
		
		<nav class="nav-container">
			<button class="menu-button"> &#x02261; </button>
			<ul class="navmenu">
				<li>
					<a href="visualdesign.html">visual design</a>
				</li>
				<hr>
				<li>
					<a href="sketchbook.html">sketchbook</a>
				</li>
				<hr>
				<li>
					<a href="product.html">product photo</a>
				</li>
				<hr>
				<li>
					<a href="fashion.html">fashion photo</a>
				</li>
				<hr>
				<li>
					<a href="macro.html">macro</a>
				</li>
				<hr>
				<li>
					<a href="portraits.html">portraits</a>
				</li>
				<hr>
				<li>
					<a href="about.html">about</a>
				</li>
			</ul>
		</nav>
	</header>
	<div id="main">
	 
		<div class="gallery owl-carousel owl-theme" >
			<div class="item" > <picture> <source srcset="images/featured/4-s.jpg" media="(max-height: 800px)"> <img src="images/featured/4-2.jpg" alt="4" >  </picture></div>
			<div class="item" > <picture> <source srcset="images/featured/5-s.jpg" media="(max-height: 800px)"> <img src="images/featured/5-2.jpg" alt="5" >  </picture></div>
			<div class="item" > <picture> <source srcset="images/featured/1-s.jpg" media="(max-height: 800px)"> <img src="images/featured/1-2.jpg" alt="1" >  </picture></div>
			<div class="item" > <picture> <source srcset="images/featured/2-s.jpg" media="(max-height: 800px)"> <img src="images/featured/2-2.jpg" alt="2" >  </picture></div>
			<div class="item" > <picture> <source srcset="images/featured/3-s.jpg" media="(max-height: 800px)"> <img src="images/featured/3-2.jpg" alt="3" >  </picture></div>
			<div class="item" > <picture> <source srcset="images/featured/6-s.jpg" media="(max-height: 800px)"> <img src="images/featured/6-2.jpg" alt="6" >  </picture></div>
			<div class="item" > <picture> <source srcset="images/featured/7-s.jpg" media="(max-height: 800px)"> <img src="images/featured/7-2.jpg" alt="7" >  </picture></div>
			<div class="item" > <picture> <source srcset="images/featured/8-s.jpg" media="(max-height: 800px)"> <img src="images/featured/8-2.jpg" alt="8" >  </picture></div>
			<div class="item" > <picture> <source srcset="images/featured/9-s.jpg" media="(max-height: 800px)"> <img src="images/featured/9-2.jpg" alt="9" >  </picture></div>
			<div class="item" > <picture> <source srcset="images/featured/10-s.jpg" media="(max-height: 800px)"> <img src="images/featured/10-2.jpg" alt="10" ></picture></div>
		</div>
	
	</div>
	
  	<footer>
		<div class="socialmedia">
			<a href="http://facebook.com/mizarii" class="new-window"><img src="images/icons/f-ogo_RGB_HEX-58.png" alt="Facebook" height="25px"></a>
			<a href="https://www.instagram.com/mizariiphotography/" class="new-window"><img src="images/icons/iconfinder_social_media_applications_3-instagram_4102579.png" alt="Instagram" height="25px"></a>
			<a href="https://www.linkedin.com/in/alisa-yuldybaeva/" class="new-window"><img src="images/icons/In-2C-54px-R.png" alt="LinkedIn" height="25px"></a>
			<a href="skype:alisayuldybaeva?userinfo" class="new-window"><img src="images/icons/iconfinder_social_media_applications_17-skype_4102589.png" alt="Skype" height="25px"></a>
			<a href="https://t.me/mizarii" class="new-window"><img src="images/icons/iconfinder_social_media_applications_19-telegram_4102591.png" alt="Telegram" height="25px"></a>
		</div>
		<div class="email">
		 <a href="">alisayuldybaeva@gmail.com</a>
		</div>
	</footer>
		
	<script src="scripts/jquery.js"></script>
	<script src="scripts/scripts.js"></script>
	<script src="scripts/owl.carousel.min.js"></script>
</body>
</html>

$(document).ready(function(){
externalLinks();
});
function externalLinks(){
    $('a.new-window').bind('click', function(e){
      var location = $(this).attr('href');  
      window.open(location);
      e.preventDefault();
    });
}

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
    center:true,
    stagePadding: 50,
    lazyLoad: true,
    loop:true,
    margin:10,
    nav:false,
    autoplay:true,
    autoWidth:true,
    autoplayTimeout:2500,
    autoplayHoverPause:true,
    responsive:{
        0:{
            items:1,
            autoplay:false
        },
        600:{
            items:3,
            autoplay:false
        },
        1000:{
            items:5
        }
    }
  });
});

* {
    box-sizing: border-box; 
   }
   body {
     margin: 0;
   }


   #main {
     display: flex;
     align-items: center;
     padding-top: 10vh;
     background-color: white;
     flex-shrink:1;
     max-width: 100vw; 
     height: 100vh; 
     display: block;
     align-content: center;
   }
  
   header, footer {
     padding: 1em;
   }

   header{
    background: white;
    height: 87px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
   }

   .header-content{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    align-items: center;
   }


   .h1{
    font-family: 'Playfair Display', serif;
   }

   a { color: rgb(14, 13, 13);
       text-decoration: none;
     }

   .titleay{
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: stretch;
    padding-left: 30px;
    padding-top: 5px;
    font-family: 'Playfair Display', serif;
    z-index: 900;
   }

.nav-container{
  position: relative;
  display: inline-block;
  padding-right: 10px;
  z-index: 1000;
}

.nav-container:hover .navmenu{
  display: block;
  
}

 .menu-button{
    height: 100%;
    width: 100%;
 }

   button{
    background-color: #ffffff;
    color: rgb(32, 32, 32);
    padding: 0px;
    margin: 0;
    font-size: 40px;
    border: none;
   }

   button:hover {
    background-color: white;
    color: black;
   }

  hr {
    border-width: 1px;
    width: 100%;
    background-color: rgb(197, 196, 196);
    margin-top: 0;
    margin-bottom: 0;
  }

   ul.navmenu {
    list-style-type: none;
    left: auto;
    right:0;
    margin: 0;
    padding: 0;
    text-align: left;
    background-color: #f5f5f0;
    display: none;
    position: absolute;
    min-width: 150px;
    z-index: 1;
    font-family: 'Montserrat', sans-serif;
  }

  li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    margin-left: 5px;
    text-decoration: none;
    font-family: Georgia;
    }

    li a:hover {
      background-color: white;
      color: black;
      font-family: Georgia;
    }

    .active {
      background-color: #666666;
      color: white;
      font-family: Georgia;
    }

    .gallery {
      z-index: 1;
    }

    .a_main {
      display: flex;
      /*background-color: aqua;*/
      max-width: 1100px;
      margin: 100px auto 0 auto;
      padding: 20px 50px 60px 50px;
      flex-wrap: wrap;
    }

    .a_left {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      flex: 1;
      order: 1;
      align-items: flex-end;
    }

    .a_right {
      /*background-color: #666666;*/
      flex: 3;
      order: 2;
      margin: 0 25px;
      min-width: 200px;
    }

    .a_right p {
      font-family: Georgia;
      font-style: italic;
      font-size: 16px;
    }
    .a_right h4 {
      font-family: Georgia;
      font-style: normal;
      font-weight: bold;
      font-size: 17px;
    }

    .a_pic {
      background-image: url("../images/about/1.jpg");
      background-size: cover;
      height: 320px;
      min-width: 320px;
    }

    .a_links {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      font-family: Georgia;
      font-style: bold;
      font-size: 13px;
      margin: 5px 5px;
    }

    .a_links a {
      font-family: Georgia;
      font-weight: bold;
      font-size: 14px;
      text-decoration: none;
    }

    .owl-carousel .owl-wrapper {
      z-index: 2;
      height: 80vh;
    }

  .owl-carousel .owl-item img {
      z-index: 3;
      width: 100%;
      object-fit: cover;
  }
  
    footer {
      background: white;
      position: fixed;
      height: 70px;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      font-family: Georgia;
      font-size: 14px;
      z-index: 900;
    }

    a.new-window{
      padding-left: 18px;
    }

    a.facebook{
      background: url(/images/icons/f-ogo_RGB_HEX-58.png) 100% 50% no-repeat;
    }

    a.insta{
      background: url(/images/icons/glyph-logo_May2016-150x150.png) 100% 50% no-repeat;
    }

    a.linkedin{
      background: url(images/icons/In-Black-54px-R.png) 100% 50% no-repeat;
    }

    @media only screen and (max-width: 500px)  {
      header{
        height: 67px;
       }
       .nav-container{
        padding-right: 0px;
      }
       button{
        padding-right: 0px;
        padding: 5px;  
        font-size: 37px;     
       }
       .titleay{
        padding-top: 0px;
        padding-left: 0px;
       }
       footer {
        min-height: 80px;
        flex-wrap: wrap;
        justify-content: space-evenly;
       }
       a.new-window{
        padding-left: auto;
      }
      .a_main {
        flex-direction: column;
       }
       .a_pic {
        margin: 10px;
      }
      .a_links {
        margin: 0 15px;
      }
      .a_left {
        align-items: center;
      }
    }

    @media only screen and (max-height: 800px)  {
      header{
        height: 67px;
       }
       .titleay{
        padding-top: 0px;
       }
       footer {
        height: 53px;
       }
       .a_main {
        max-width: 1200px;
      }
       .a_pic {
        margin: 10px;
      }
      .a_links {
        margin: 0 15px;
      }
      .a_left {
        align-items: center;
      }
    }
2

Hi, and welcome to the forums. :slight_smile:

One thing I would suggest is to reverse the order of your scripts at the bottom of the page. That is, change this:

<script src="scripts/scripts.js"></script>
<script src="scripts/owl.carousel.min.js"></script>

to this:

<script src="scripts/owl.carousel.min.js"></script>
<script src="scripts/scripts.js"></script>

The reason I suggest this is that scripts.js is calling the owl script before it is loaded. I can’t assure you this is the problem, but it’s the first thing I would try. :slight_smile:

3

Thanks for the tip. It didn’t solve the problem but that was still a good change to make for faster loading for sure.

Right now, it seems like it wants to load the images in two rows which seems to override the Owl scroller interface…maybe it’s because it takes too long to load the images? I guess I could try to reduce image quality and see if that helps as they are currently saved at highest settings.

4

Hm, I’m not too sure how to help with that. It may be that the CSS is taking a while to kick in, with default styles taking over to start with, but actually, it looks like JS is controlling the loading of everything, which isn’t great for accessibility.

(I say that because nothing loads if JS is turned off. Ideally, with JS off the gallery would just load in a fairly plain but accessible way. That would prompt me to look for a different gallery script. I haven’t used one for a while, but I did like BX Slider back in the day. I think it also works on on mobile screens, which is a bonus. Your current slider looks a bit broken on small screens, which is another problem. So I’d look for a gallery script that works well in all environments. I would think that Owl does this, as it’s well known, so it might be worth looking back through the docs to see if there’s anything you’ve missed.)

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.