Bild Zoomer

Quellcode

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css'>
<script> window.console = window.console || function(t) {};</script>
<script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); }</script>

<style type="text/css">
.carousel {width: 300px; height: 260px; margin: 3px auto 0;}
.owl-item.in.active {z-index: 2 !important; opacity: 0.1;}
.item {width: 300px; height: 200px; overflow: hidden;}
.bg-image {background-size: 50%; background-position: center; background-repeat: no-repeat; height: inherit;}
.owl-carousel .owl-nav {text-align: center;}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {padding: 5px 10px !important; display: inline-block; font-size: 30px;}
.animated { -webkit-animation-duration: 2s !important; animation-duration: 2s !important; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.in .bg-image { -webkit-animation-name: slideIn; animation-name: slideIn; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
@-webkit-keyframes slideIn { from { transform: translateX(-50%);} to {transform: translateX(0%);}}
@keyframes slideIn { from { transform: translateX(-50%);} to { transform: translateX(0%);}}
@-webkit-keyframes slideInReverse { from { transform: translateX(50%);} to { transform: translateX(0%);}}
@keyframes slideInReverse { from { transform: translateX(50%);} to { transform: translateX(0%);}}
.out .bg-image {-webkit-animation-name: slideOut; animation-name: slideOut; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
@-webkit-keyframes slideOut { from { transform: translateX(0%);} to { transform: translateX(50%);}}
@keyframes slideOut { from { transform: translateX(0%);} to { transform: translateX(50%);}}
@-webkit-keyframes slideOutReverse { from { transform: translateX(0%);} to { transform: translateX(-50%);}}
@keyframes slideOutReverse { from { transform: translateX(0%);} to { transform: translateX(-50%);}}
.reverse .in .bg-image { -webkit-animation-name: slideInReverse; animation-name: slideInReverse;}
.reverse .out .bg-image { -webkit-animation-name: slideOutReverse; animation-name: slideOutReverse;}
</style>
</head>

<body>
<div class="carousel">
<div class="owl-carousel">
<div class="item">
<div class="bg-image" style="background-image:url('../Bilder/Marilyn Monroe.jpg');"></div>
</div>
<div class="item">
<div class="bg-image" style="background-image:url('../Bilder/Andie Macdowell.jpg');"></div>
</div>
<div class="item">
<div class="bg-image" style="background-image:url('../Bilder/Rene Russo.jpg');"></div>
</div>
</div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
<script id="rendered-js" >
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
nav: true,
smartSpeed: 2000,
responsive: {
0: { items: 1 } } });
owl.on('translate.owl.carousel', function (event) {
var index = event.item.index;
$('.owl-item').eq(index).addClass('in');
$('.owl-item').eq(index - 1).addClass('out'); // previous (this is the current slide)
$('.owl-next, .owl-prev').prop('disabled', true);});
owl.on('translated.owl.carousel', function (event) {
$('.carousel .in').removeClass('in');
$('.carousel .out').removeClass('out');
$('.owl-next, .owl-prev').prop('disabled', false);});
$('.owl-prev').on('click', function () {
owl.addClass('reverse');});
$('.owl-next').on('click', function () {
owl.removeClass('reverse');});
</script>
</body>

</html>