Owl 旋转木马自定义缩略图背景图片在 window 调整大小时消失

Question

我为 owl 旋转木马制作了自定义缩略图。缩略图是 owl 轮播的分页点，我只是将其样式设置为看起来像缩略图，并将缩略图中的图像作为背景图像。我的问题是每当我调整浏览器大小时，图像就会消失。有谁知道如何解决这个问题，请帮助我，在此先感谢！

这是页面Website

这是我的 Jquery 代码：

$j(document).ready(function() {
    var owl;
    owl = $j("#owl-sub-categories");
    owl.owlCarousel({

  navigation : false, // don't Show next and prev buttons
  slideSpeed : 500,
  paginationSpeed : 400,
  singleItem:true,
  autoHeight : true,
  afterInit: afterOWLinit

});

function afterOWLinit() {

    // adding A to div.owl-page
    $j('.owl-controls .owl-page').append('<a class="item-link" href="#"/>');

    var pafinatorsLink = $j('.owl-controls .owl-page');

    /**
     * this.owl.userItems - it's your HTML <div class="item"><img src="http://www.ow...t of us"></div>
     */
    $j.each(this.owl.userItems, function (i) {

        $j(pafinatorsLink[i])
            // i - counter
            // Give some styles and set background image for pagination item
            .css({
                'background': 'url(' + $j(this).find('img').attr('src') + ') no-repeat'
            })
    });

}


$j(".owl-controls").appendTo(".sub-thumbnail-col");

});

这是我的 HTML:

       <?php foreach ($categories as $categ): ?>
           <div class="item">

                <div class = "item-header">
                      <div class = "item-header-extra item_child">

                      </div>
                      <div class = "item-header-inner item_child">
                          <h1><?php echo $categ->getName()?></h1>
                      </div>

                </div>

                <div class = "item-content">
                       <div class = "sub_main_img_inner item_child">
                            <a href="<?php echo $this->getCategoryUrl($categ)?>">
                                <?php 
                                if($imgUrl = Mage::getModel('catalog/category')->load($categ->getId())->getThumbnail()):?>
                                    <img src="<?php echo $this->getBaseUrl()."media/catalog/category/".$imgUrl ?>" alt="" />
                                <?php endif; ?>
                            </a>
                       </div>

                       <div class = "sub_desc_inner item_child">
                           <?php $desc = Mage::getModel('catalog/category')->load($categ->getId())?>
                           <?php echo $desc->getFeatures();?>

                       </div>

                </div>

           </div>
       <?php endforeach; ?>


<div class = "sub-thumbnail-col col-md-1">
    <!-- This div is the container for the appended thumbnail -->
</div>

Answer 1

我怀疑将 "afterUpdate: afterOWLinit" 放入您的 owl 配置中可以解决您的问题。我只是在做一些与我自己非常相似的事情，并且在几个小时的绕圈子试图解决这个问题后发现。

Owl 旋转木马自定义缩略图背景图片在 window 调整大小时消失

Owl Carousel custom thumbnail background image disappears on window resize

jquery

resize

thumbnails

carousel

owl-carousel