Пользовательское фоновое изображение миниатюры Owl Carousel исчезает при изменении размера окна

Я сделал миниатюру для своей карусели с совами. Миниатюра — это точки разбиения на страницы карусели совы, я просто стилизовал ее так, чтобы она выглядела как миниатюра, и поместил изображения в миниатюру в качестве фонового изображения. Моя проблема в том, что всякий раз, когда я изменяю размер браузера, изображения исчезают. Кто-нибудь знает, как решить эту проблему, пожалуйста, помогите мне, заранее спасибо!

вот страница Веб-сайт

вот мой код 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>

person Ken Avila    schedule 03.02.2015    source источник


Ответы (1)


Я подозреваю, что добавление «afterUpdate: afterOWLinit» в конфигурацию вашей совы решит вашу проблему. Я просто делаю что-то действительно похожее и обнаружил, что через несколько часов ходил по кругу, пытаясь решить эту проблему.

person Peter Hay    schedule 04.02.2015
comment
ДА, СПАСИБО БОЛЬШОЕ, МНЕ ОЧЕНЬ ПОНРАВИЛОСЬ - person Ken Avila; 09.03.2015