Есть у меня слайдер owl каруселька, хочу сделать так, чтобы крайние элементы были наполовину видимые, т.е. половина была видимой, а половина уходила за горизонт (чтобы юзер понимал, что в карусели есть еще элементы) - как это можно сделать?
$("#owl-example").owlCarousel({
itemsCustom: [[600,5],[500,4],[400,3],[300,2],[200,1]]
});
.block {
display: block;
width: 100px;
height: 100px;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 100px;
color: #888888;
}
.red {
background: #FFCCCC;
}
.green {
background: #CCFFCC;
}
.blue {
background: #CCCCFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<div id="owl-example" class="owl-carousel">
<div class="block red">1</div>
<div class="block green">2</div>
<div class="block blue">3</div>
<div class="block red">4</div>
<div class="block green">5</div>
<div class="block blue">6</div>
<div class="block red">7</div>
<div class="block green">8</div>
<div class="block blue">9</div>
<div class="block red">10</div>
<div class="block green">11</div>
<div class="block blue">12</div>
</div>