Hello Jake,

I have a product_page.php, that displays an owl-carousel product image gallery on the left and product info section on the right:

<div class="row mb-5">

 <div class="col-lg-5 mb-5 mb-lg-0">

<div class="owl-carousel owl-theme manual dots-style-2 nav-style-2 nav-color-dark mb-3" id="thumbGalleryDetail">

<div>

<img src="img/products/pr-gdesktop-1.jpg" class="img-fluid" alt="">

</div>

<div>

<img src="img/products/pr-gdesktop-2.jpg" class="img-fluid" alt="">

</div>

<div>

<img src="img/products/pr-gdesktop-3.jpg" class="img-fluid" alt="">

</div>

<div>

<img src="img/products/pr-gdesktop-4.jpg" class="img-fluid" alt="">

</div>

</div>

<div class="owl-carousel owl-theme manual thumb-gallery-thumbs mt" id="thumbGalleryThumbs">

<div>

<span class="d-block">

<img alt="Product Image" src="img/products/pr-gdesktop-1.jpg" class="img-fluid">

</span>

</div>

<div>

<span class="d-block">

<img alt="Product Image" src="img/products/pr-gdesktop-2.jpg" class="img-fluid">

</span>

</div>

<div>

<span class="d-block">

<img alt="Product Image" src="img/products/pr-gdesktop-3.jpg" class="img-fluid">

</span>

</div>

<div>

<span class="d-block">

<img alt="Product Image" src="img/products/pr-gdesktop-4.jpg" class="img-fluid">

</span>

</div>

</div>

 </div>

 <div class="col-lg-7">

<h2 class="line-height-1 font-weight-bold mb-2">Gaming PC NVIDIA GTX1060 GDDR5 6G Intel i7 7700HQ Windows 10 32G RAM 512G SSD 2T HDD WiFi LAN</h2>

<div class="product-info-rate d-flex mb-3">

<i class="fas fa-star text-color-dark mr-1"></i>

<i class="fas fa-star text-color-dark mr-1"></i>

<i class="fas fa-star text-color-dark mr-1"></i>

<i class="fas fa-star text-color-dark mr-1"></i>

<i class="fas fa-star-half text-color-dark"></i>

</div>

<span class="price font-primary text-4"><strong class="text-color-dark">$1,579.04 - 1,603.40</strong></span>

<span class="old-price font-primary text-line-trough text-2"><strong class="text-color-default">$1,679.04 - 1,703.40</strong></span>

<p class="mt-4">Universal fanless Silent Mini PC in high grade Brushed Ribbed Aluminum Alloy case, silver or black. Can run 24x365 as office workstation, HTPC, surveillance monitor, etc.</p>

<ul>

<li>CPU - low temperature Intel Core i7 Quad Core</li>

<li>RAM - up to 32Gb</li>

<li>SSD - up to 512Gb</li>

<li>HDD - can be added, up to 1Tb</li>

<li>Light weight</li>

<li>Easily portable</li>

<li>Can be mounted on monitor back</li>

</ul>

<hr class="my-4">

<ul class="list list-unstyled">

<li>AVAILABILITY: <strong>In stock</strong></li>

<li>SKU: <strong>123456789</strong></li>

</ul>

 </div>

</div>

Let's call it a product card. I have quite a lot of those cards and I want to store them in a separate file - e.g. product_cards.php

I am going to use a script to load product cards into the product page. The info section loads fine, while the owl-carousel gallery does not show images after loading this way.

If you search Google for "how to use owl carousel with ajax", you'll find all you need to make it work.

Please help me load product cards that contain product info and a json array holding image filenames for the owl-carousel!

The script is called "Ajax Slide & Fade Content with jQuery", the description: https://perishablepress.com/slide-fade-content/ - the download link is in the end.

Demo: https://perishablepress.com/demos/slide-fade-content/

I want to use this script because I don’t know any other script that would allow storing product cards in divs in one file and loading them into the product page. This script does a bit too much sliding, which I will need to disable. If you know a better script of this kind – please advise.

Thanks in advance!