Boxen-Karussell


Weather Icon
_ °C
_ _
_, _
_ °C

Feels like

_

Humidity

Quellcode
<html>
<head>
 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">

<style>
.wrapper{max-width: 700px; width: 100%; margin: 20px auto; }
.slider{width: 95%; display: flex; height:auto; }
.slider .card{flex: 1; margin: 0 10px; background: #fff;}
.slider .card .img{height: 200px; width: 100%;}
.slider .card .img img{height: 100%; width: 100%; object-fit: cover;}
.slider .card .content{padding: 1px 2px; }
.card .content .title{font-size: 0.9em; font-weight: bold;}
.card .content .sub-title{font-size: 0.8em; font-weight: bold; color: #e74c3c; line-height: 20px;}
.card .content p{font-size: 0.6em; text-align: justify; margin: 10px 0;}
.card .content .btn{display: block; text-align: left; margin: 10px 0;}
.card .content .btn button{background: #e74c3c; color: #fff; border: none; outline: none; font-size: 17px; padding: 5px 8px; border-radius: 5px; cursor: pointer; transition: 0.2s;}
.card .content .btn button:hover{transform: scale(0.9);}
</style>
</head>

<body>
<div class="wrapper">
<div class="slider owl-carousel">
<div class="card">
<div class="img"><img src="../bilder/Hans Busch 2022.jpg" alt=""></div>
<div class="content">
<div class="title">Hans Busch</div>
<div class="sub-title">Produzent von HKH</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.</p>
<div class="btn"><a href="#"><button>Read more</button></a></div>
</div>
</div>
<div class="card"><div class="img"><img src="../Bilder/Andie Macdowell.jpg" alt=""></div>
<div class="content">
<div class="title">Karin Lieberwirth</div>
<div class="sub-title">Bestes Stück</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.</p>
<div class="btn"><a href="#"><button>Read more</button></a></div>
</div>
</div>
<div class="card">
<div class="img"><img src="../Bilder/monroeoben.jpg" alt=""></div>
<div class="content">
<div class="title">Marylin</div>
<div class="sub-title">Schauspieler</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.</p>
<div class="btn"><a href="#"><button>Read more</button></a></div>
</div>
</div>
</div> </div>
<script>
$(".slider").owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2000, //2000ms = 2s;
autoplayHoverPause: true, });
</script>
</body>

</html>