Как синхронно добавить html в карусель - PullRequest
Новая
       10

Как синхронно добавить html в карусель

0 голосов
/ 19 февраля 2019

Попытка создать функциональность для сайта электронной коммерции, где рекомендуемые продукты добавляются в совую карусель.В настоящее время все 4 продукта будут объединены в 1 карусельный див.

Есть ли способ синхронно добавить каждый продукт в отдельный элемент класса owl-item? 

<script type="text/javascript">
    (function (d) {
        if (document.addEventListener) document.addEventListener('ltkAsyncListener', d);
        else {
            e = document.documentElement; e.ltkAsyncProperty = 0; e.attachEvent('onpropertychange', function (e) {
                if (e.propertyName == 'ltkAsyncProperty') { d(); }
            });
        }
    })(function () {
        /********** Begin Custom Code **********/
        _ltk.Recommender.Render();
        /********** End Custom Code **********/
    });
</script>

См. JSFiddle https://jsfiddle.net/czkrfga4/

1 Ответ

0 голосов
/ 19 февраля 2019

Хорошо, подготовьте содержимое, которое вы хотите отображать на слайде, представьте изображение, цену и описание, поэтому создайте свой слайд, как показано ниже, прежде чем добавить его на карусель 

    var slide = $('div.item');
    var img  = $('img').attr('src','http://...');
    slide.append(img);
    var descr = $('p').text('I am a description here..');
    slide.append(descr);
    var price = '$3.3';
    slide.append($('div').append(price));
    //and then add this slide object to your carousel container with 
    $('owl-carousel').append(slide);
    //Hopeful this will give you some light
...