1

製品スライダーにフクロウ カルーセル 2 を使用しました。製品は管理パネルから追加され、画像を含めてフロントエンドに表示する必要があります。画像を追加して前面に呼び出すことはできますが、フクロウのカルーセルに収まらず、サイトの外観が乱雑になります。画像ソースに直接配置すると機能しますが、Javascript からの呼び出しは機能しません。私が必要とするのは、製品情報と画像が収まる必要があり、フクロウのカルーセル 2 がサポートすることだけです。jquery 2.1.4 とブートストラップ 3 を使用しています。

HTML:

 <div class="col-sm-12">
        <div class="block block-tabs">
            <div class="block-head">
                <div class="block-title">
                    <div class="block-title-text text-lg">best selling</div>
                </div>
                <ul class="nav-tab">
                    <li class="active"><a data-toggle="tab" href="#tab-1">All</a></li>
                    <li ><a data-toggle="tab" href="#tab-2">Personalised</a></li>
                    <li><a data-toggle="tab" href="#tab-2">Photo Books</a></li>
                    <li><a data-toggle="tab" href="#tab-1">Calanders</a></li>
                    <li><a data-toggle="tab" href="#tab-2">LED Lights</a></li>
                </ul>
            </div>
            <div class="block-inner">
                <div class="tab-container">
                    <div id="tab-1" class="tab-panel fade in active">
                        <ul id="tab1" class="products kt-owl-carousel" data-margin="20" data-loop="true" data-nav="true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":5}}'>

                      </ul>
                    </div>
                    <div id="tab-2" class="tab-panel fade">
                        <ul class="products kt-owl-carousel" data-margin="20" data-loop="true" data-nav="true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":5}}'>
                            <li class="product">
                                <div class="product-container">
                                    <div class="product-left">
                                        <div class="product-thumb">
                                            <a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
                                            <a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
                                        </div>
                                    </div>
                                    <div class="product-right">
                                        <div class="product-name">
                                            <a href="#">Cotton Lycra Leggings</a>
                                        </div>
                                        <div class="price-box">
                                            <span class="product-price">139.98</span>
                                            <span class="product-price-old">169.00</span>
                                        </div>
                                        <div class="product-star">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star-half-o"></i>
                                        </div>
                                        <div class="product-button">
                                            <a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
                                            <a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
                                            <a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="product">
                                <div class="product-container">
                                    <div class="product-left">
                                        <div class="product-thumb">
                                            <a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
                                            <a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
                                        </div>
                                    </div>
                                    <div class="product-right">
                                        <div class="product-name">
                                            <a href="#">Cotton Lycra Leggings</a>
                                        </div>
                                        <div class="price-box">
                                            <span class="product-price">139.98</span>
                                            <span class="product-price-old">169.00</span>
                                        </div>
                                        <div class="product-star">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star-half-o"></i>
                                        </div>
                                        <div class="product-button">
                                            <a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
                                            <a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
                                            <a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="product">
                                <div class="product-container">
                                    <div class="product-left">
                                        <div class="product-thumb">
                                            <a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
                                            <a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
                                        </div>
                                    </div>
                                    <div class="product-right">
                                        <div class="product-name">
                                            <a href="#">Cotton Lycra Leggings</a>
                                        </div>
                                        <div class="price-box">
                                            <span class="product-price">139.98</span>
                                            <span class="product-price-old">169.00</span>
                                        </div>
                                        <div class="product-star">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star-half-o"></i>
                                        </div>
                                        <div class="product-button">
                                            <a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
                                            <a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
                                            <a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="product">
                                <div class="product-container">
                                    <div class="product-left">
                                        <div class="product-thumb">
                                            <a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
                                            <a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
                                        </div>
                                    </div>
                                    <div class="product-right">
                                        <div class="product-name">
                                            <a href="#">Cotton Lycra Leggings</a>
                                        </div>
                                        <div class="price-box">
                                            <span class="product-price">139.98</span>
                                            <span class="product-price-old">169.00</span>
                                        </div>
                                        <div class="product-star">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star-half-o"></i>
                                        </div>
                                        <div class="product-button">
                                            <a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
                                            <a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
                                            <a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="product">
                                <div class="product-container">
                                    <div class="product-left">
                                        <div class="product-thumb">
                                            <a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
                                            <a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
                                        </div>
                                    </div>
                                    <div class="product-right">
                                        <div class="product-name">
                                            <a href="#">Cotton Lycra Leggings</a>
                                        </div>
                                        <div class="price-box">
                                            <span class="product-price">139.98</span>
                                            <span class="product-price-old">169.00</span>
                                        </div>
                                        <div class="product-star">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star-half-o"></i>
                                        </div>
                                        <div class="product-button">
                                            <a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
                                            <a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
                                            <a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

Javascript:

$(function () {
    init_carousel();
    var url = '../Home/FrontProduct';
    var data1 = {};
    $.post(url, data1, function (data) {
        OnSuccess(data);
    });
    function OnSuccess(data) {
        var xmlDoc = $.parseXML(data);
        var xml = $(xmlDoc);
        var All = xml.find("All");
        var AllrowCount = Math.ceil(All.length);
        var content_g = '';
        for (var p = 0; p < AllrowCount; p++) {
            var Allrow = $(All[p]);
            var content = '';
            content = '<div class="item">' +
                      ' <div class="product-container">' +
                      ' <div class="product-left">' +
                      ' <div class="product-thumb">' +
                      ' <a class="product-img" href="#"><img  src="http://ashish81.honestteam.com/products/pro_img/' + Allrow.find("ProductImages").text() + '"></a>' +
                      '<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>' +
                      '</div>' +
                      ' </div>' +
                      '<div class="product-right">' +
                      ' <div class="product-name">' +
                      ' <a href="#">Cotton Lycra Leggings</a>' +
                      '  </div>' +
                      '  <div class="price-box">' +
                      '   <span class="product-price">139.98</span>' +
                      '  <span class="product-price-old">169.00</span>' +
                      '  </div>' +
                      '<div class="product-star">' +
                      '<i class="fa fa-star"></i>' +
                      '<i class="fa fa-star"></i>' +
                      '<i class="fa fa-star"></i>' +
                      '<i class="fa fa-star"></i>' +
                      '<i class="fa fa-star-half-o"></i>' +
                      '</div>' +
                      '<div class="product-button">' +
                      '<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>' +
                      '<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>' +
                      '<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>' +
                      '    </div>' +
                      ' </div>' +
                      '</div>' +
                      '</div>';
            content_g = content_g + content;
        }
        var owl = $('.kt-owl-carousel');
        owl.prepare().trigger('add.owl.carousel', content_g);
    }
});

/* Functions */
function init_carousel() {
    $('.kt-owl-carousel').each(function () {
        var config = $(this).data();
        //config.navText = ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'];
        var animateOut = $(this).data('animateout');
        var animateIn = $(this).data('animatein');

        if (typeof animateOut != 'undefined') {
            config.animateOut = animateOut;
        }
        if (typeof animateIn != 'undefined') {
            config.animateIn = animateIn;
        }
        var owl = $(this);
        owl.owlCarousel(config);
        $(this).find('.owl-item').removeClass('last-item');
        $(this).find('.owl-item.active').last().addClass('last-item');

        var t = $(this);
        owl.on('changed.owl.carousel', function (event) {
            var item = event.item.index;
            t.find('.owl-item').removeClass('last-item');
            setTimeout(function () {
                t.find('.owl-item.active').last().addClass('last-item');
            }, 100);
        });
    });
};

ここにjfiddleがあります

4

1 に答える 1

0

問題は、コンテンツを取得する前にのinit関数を呼び出すことです。owlcarouselしたがって、これを解決するには、呼び出しが戻ったinitialize直後にプラグインを使用する必要があります。ajax

このようなもの：

function ajaxLike() {
$('body').append('<div class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> </div>');
  // just after the html appears in the DOM you can initialize the owl plugin
  ajaxCallback();
}

// add the html with script, just like you do after the ajax's call return 
ajaxLike();

function ajaxCallback() {
  $('.owl-carousel').owlCarousel({
    margin:10
  });
}
.owl-item {
  width:100px;
  height:100px;
  line-height:100px;
  text-align:center;
  background:red;
}
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.min.js"></script>
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>

http://jsbin.com/jetane

于 2015-12-10T13:33:59.820 に答える