#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
background-attachment: fixed;
однако навигация срабатывает только в первый раз
$('.owl-carousel-news-catalog .owl-item.active').first().prev()function callback(event) {
// Provided by the core
var element = event.target; // DOM element, in this example .owl-carousel
var name = event.type; // Name of the event, in this example dragged
var namespace = event.namespace; // Namespace of the event, in this example owl.carousel
var items = event.item.count; // Number of items
var item = event.item.index; // Position of the current item
// Provided by the navigation plugin
var pages = event.page.count; // Number of pages
var page = event.page.index; // Position of the current page
var size = event.page.size; // Number of items per page
}И только на одну позицию смещается. Когда как пагинация у меня по 4 слайда стоит
prev.owl.carousel смещает на одну позицию. 
<section>
<h2>Свежие статьи</h2>
<article>
<h2>Заголовок статьи 1</h2>
<p>Текст статьи</p>
</article>
<article>
<h2>Заголовок статьи 2</h2>
<p>Текст статьи</p>
</article>
</section>
$('.item').click( function(event){ // ловим клик по ссылки с id="go"
event.preventDefault(); // выключаем стандартную роль элемента
$('#overlay').fadeIn(400, // сначала плавно показываем темную подложку
function(){ // после выполнения предъидущей анимации
$('#modalPhoto').css('display', 'block');// убираем у модального окна display: none;
$('#modalPhoto').animate({opacity: 1, top: '10%'}, 200);// плавно прибавляем прозрачность одновременно со съезжанием вниз
slider.reloadSlider();
});
});