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