Lorem ipsum

Carousel Classic s přepínacíma textama

https://www.kolasvorada.cz/

 

 

<style>
@media (min-width:992px) {
.carousel-inner .item {width: 75%;}
.extended-banner-title {
position: absolute;
left: 100%;
width: 33%;
height: 20%;
font-size: 20px;
line-height: 29px;
padding-left: 20px;
border-bottom: solid 1px #239ceb;
box-shadow: none;
}
.carousel-inner>.item {display:block;position:absolute;}
.item:nth-child(1) .extended-banner-title {top: 0;}
.item:nth-child(1) {z-index:5;}
.item:nth-child(2) .extended-banner-title {top: 20%;}
.item:nth-child(2) {z-index:4;}
.item:nth-child(3) .extended-banner-title {top: 40%;}
.item:nth-child(3) {z-index:3;}
.item:nth-child(4) .extended-banner-title {top: 60%;}
.item:nth-child(4) {z-index:2; }
.item:nth-child(5) .extended-banner-title {top: 80%;}
.item:nth-child(5) {z-index:1;}
.item_clicked {z-index:6 !important;}
}
</style>

 

<script>
$(function() {
$(".extended-banner-title").click(function() {
event.preventDefault();
$(".item.item_clicked").removeClass("item_clicked");
$(this).closest( '.item' ).addClass("item_clicked");
});
});
</script>