Как встроить слайдер в карточку товара?

Question

[devilwish]

var cart = {};
function init() {
	//Считывание товаров и вывод
	$.getJSON("cargo.json", out); //получает данные json, методом get и запускает функцию out    
}
// OUT & CAT
function out(data) {
   var out = '';
for (var key in data){
    var item = data[key];
    if (item.cat == "cat1"){
   out += `<div class="product product-grid" data-sort="${item.cost}" data-this="${key}" data-rating="${item.rating}">
                                        <div class="product-media">
                                            <div class="product-thumbnail">
                                                <a href="javascript:void(0);" title="" class="owl-carousel">
                                                    <img src="${item.img1}" alt="" class="current">
                                                    <img src="${item.img2}" alt="" class="current">
                                                </a>

                                            </div>
                                            <!-- /.product-thumbnail -->


                                            <div class="product-hover">
                                                <div class="product-actions">
                                                    <a href="javascript:void(0);" data-id="${key}" class="awe-button product-add-cart add_to_cart" data-toggle="tooltip" title="Add to cart">
                                                        <i class="icon icon-shopping-bag"></i>
                                                    </a>

                                                </div>
                                            </div>
                                            <!-- /.product-hover -->



                                        </div>
                                      <!-- /.product-media -->

                                       <div class="product-body">
                                            <h2 class="product-name">
                                   <a href="javascript:void(0);" title="${item.name}">${item.name}</a>
                              </h2>
                                            <!-- /.product-product -->

                                            <div class="product-category">
                                               <span></span>
                                       </div>
                                           <!-- /.product-category -->

                                         <div class="product-price">

                                               <span class="amount">${item.cost} р.(м3)</span>

                                         </div>
                                       <!-- /.product-price -->
                                   </div>
                                <!-- /.product-body -->
                          </div>
                        <!-- /.product -->`
     };
}
$('.out').html(out);

Пишу тестовый интернет магазин, хочу встроить в карточку товара слайдер для фото, инициализирую owl-carousel,но не работает.Почему?

Comments

[Максим]

Вы если Алексу Лущенко заплатите - он объяснит как это сделать - по курсам с youtube он разумеется не помогает

И к тому же а почему ваш owl должен работать ?

[devilwish]

Максим Ленский, Ну как почему?Слайдер инициализирован, при выводе в html на прямую все работает.Проблемы возникают с даннымми которые передаются из js

[Максим]

devilwish, а данные из json выводятся ? картинки например

[devilwish]

Максим Ленский, Конечно, это и есть item_ы слайдера, но выводится только последнее изображение(img2)

<img src="${item.img1}" alt="" class="current">
                                                    <img src="${item.img2}" alt="" class="current">

[Максим]

devilwish, https://codepen.io/topicstarter/pen/PoZwbpQ?editor... так вроде - да ?