Customized Owl Slider not displaying on Chrome (works in Safari)

[Maribel G]

Basically I have customized the Owl Slider to display a randomized set of slides. So that every time someone refreshes the page, they may see a different set of slides in the slider.

It works totally fine in Safari. I couldn't get it to work at all on Firefox so I just have the slider replaced by a single image. And while it worked initially in Chrome, now the images won't display at all. The first text only "slide" shows but the rest of the slides are blank.

I tried to isolate the code to a JS fiddle but basically the way I coded the site makes it too complicated to do so and get it to work. You can find the site at https://studioa.com/ and inspect the code from there.

This is my javascript:

<script> var images1 = ['sliderset_1-1.jpg', 'sliderset_2-1.jpg', 'sliderset_3-1.jpg', 'sliderset_4-1.jpg', 'sliderset_5-1.jpg']; var images2 = ['sliderset_1-2.jpg', 'sliderset_2-2.jpg', 'sliderset_3-2.jpg', 'sliderset_4-2.jpg', 'sliderset_5-2.jpg']; var images3 = ['sliderset_1-3.jpg', 'sliderset_2-3.jpg', 'sliderset_3-3.jpg', 'sliderset_4-3.jpg', 'sliderset_5-3.jpg']; var images4 = ['sliderset_1-4.jpg', 'sliderset_2-4.jpg', 'sliderset_3-4.jpg', 'sliderset_4-4.jpg', 'sliderset_5-4.jpg']; var link1 = ['client_npg.html', 'client_freer.html', 'client_usps.html#project_14', 'client_corcoran.html', 'client_usps.html#project_13']; var link2 = ['client_usps.html#project_16', 'client_usps.html#project_15', 'client_american.html', 'client_hirshhorn.html', 'client_sibooks.html']; var link3 = ['client_scala.html', 'client_nova.html', 'client_folger.html', 'client_athenaeum.html', 'client_nmwa.html']; var link4 = ['client_nga.html', 'client_cornell.html', 'client_saam.html', 'client_usps.html#project_11', 'client_sioadv.html']; var alt1 = ['Cover of the Hide Seek catalogue for the National Portrait Gallery','Interior spread Yoga the Art of Transformation for the Freer Sackler Galleries','Emancipation Proclamation stamp sheet','Modernism exhibit at the Corcoran Gallery of Art','10 dollar Waves of Color stamp']; var alt2 = ['Total Eclipse of the Sun sheet of stamps','Janis Joplin Stamp','Cover of Living Legacy for the American University Art Museum','Cover of the Shirin Neshat: Facing History catalogue for the Hirshhorn Museum','Interior spread from Smithsonian Civil War for Smithsonian Books']; var alt3 = ['Cover of the Judy Chicago catalogue for Scala Books','American Stories American Stamps exhibition panel for NoVA Community College','Cover for Infinite Variety for the Folger Shakespeare Library','Covers of the Athenaeum brochures','Spread from the Women in the Arts Magazine featuring Huang Liu in Print for NMWA']; var alt4 = ['Catalogue spread for the National Gallery of Art featuring sculptures by Jean Antoine Houdon','Object Page for African Apparel for the Cornell Fine Arts Museum','Interior spread for Harlem Heroes for the Smithsonian American Art Museum','Love Forever Hearts stamp','2017 Smithsonian Institution Annual Report featuring Obliteration by Yayoi Kusama']; var randomNumber = Math.floor(Math.random() * 5) $('

We specialize in the creation of quality graphic design.

Our work is rich in content, visually innovative, substantive, and successful.

').appendTo('#slide-set'); </script>

And my OWL settings:

<script> $('.owl-carousel').owlCarousel({ items: 1, lazyLoad: true, autoplay: true, loop: true, nav: true, checkVisibility: true, margin: 10 }); </script>

But it works totally fine in Safari. So I am not sure why the Chrome browser would have an issue. Thanks in advance!