Для своего
сайта на Opencart 2 своими силами решил сделать миниатюры для слайдшоу.
Для реализации использовал решение, найденное в интернете:
<script type="text/javascript">
var owl;
$(document).ready(function () {
owl = $('#slideshow<?php echo $module; ?>');
owl.owlCarousel({
items: 6,
autoPlay: 3000,
singleItem: true,
slideSpeed: 1300,
paginationSpeed: 1400,
afterInit: afterOWLinit // do some work after OWL init
});
function afterOWLinit() {
// adding A to div.owl-page
$('.owl-controls .owl-page').append('<a class="item-link" href="#"/>');
$('#slideshow<?php echo $module; ?> .owl-pagination a').click(function() {
$('#slideshow<?php echo $module; ?>').trigger('slideTo', '#' + this.href.split('#').pop() );
return false;
});
var pafinatorsLink = $('.owl-controls .item-link');
$.each(this.owl.userItems, function (i) {
$(pafinatorsLink[i])
// i - counter
// Give some styles and set background image for pagination item
.css({
'background': 'url(' + $(this).find('img').attr('src') + ') center center no-repeat',
'-webkit-background-size': 'cover',
'-moz-background-size': 'cover',
'-o-background-size': 'cover',
'background-size': 'cover'
})
// set Custom Event for pagination item
.click(function () {
owl.trigger('owl.goTo', i);
});
});
};
});
</script>
И добавил оформление:
.owl-theme .owl-controls {
position: relative;
}
.owl-theme .owl-controls .item-link {
position: relative;
display: block;
width: 100px;
height: 40px;
margin: 0 2px;
border-bottom: 4px solid #ccc;
outline: none;
}
.owl-theme .owl-controls .active .item-link {
border-bottom: 4px solid #cc4895;
}
.owl-theme .owl-controls .owl-page span {
display: none;
}
Все получилось так как я хотел. Единственная ПРОБЛЕМА в том, что при изменении размеров окна браузера миниатюры пропадают. При обновлении страницы снова появляются. Не могу понять, в чем дело.((
Может, кто поможет решить проблему?
