Slider Carrusel automatico

Excelente y buen Slider carrusel automatico de 3 posiciones y boton con logo.

<style> @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); .slider{ max-width: 1100px; display: flex; } .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: 10px 20px; } .card .content .title{ font-size: 2vw; font-weight: 600; } .card .content .sub-title{ font-size: 20px; font-weight: 600; color: #e74c3c; line-height: 20px; } .card .content { text-align: justify; margin: 10px 0; } .card .content .btn{ display: block; text-align: left; margin: 10px 30px; } .card .content .btn button{ background: transparent; color: #fff; border: none; outline: none; font-size: 17px; border-radius: 5px; cursor: pointer; transition: 0.2s; } .card .content .btn button:hover{ transform: scale(0.9); } .logos{ height: 60px; width: auto; object-fit: cover; text-align: center; } </style> <link rel="stylesheet" href="style.css"/> <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"/> <div class="slider owl-carousel"> <div class="card"><div class="img"> <img src="https://www.hojadellunes.com/wp-content/uploads/2019/05/expolio4.jpg" alt=""></div> <div class="content"> <div class="title">Alicante Histórica</div> <div class="sub-title">Benjamín Llorens</div> <div class="btn"> <button><img class="logos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9T-VFQAvdYl8bM3G_UtxQ_CscDf8ePWwhIMEj1O2bAzY3QLcoc5yZaK5Atw2iCMnzAKqyrY6EKBTBk6tWfiQ9tlIiFagbGhwlder46DCLWsioWz2GG6w_ZnOPhhDkk6eCD-c0SbR9O70BDUMiIHEIKTv88ubxYrXKrROaTIds3g7_92ZYQU3pPJf/s320/hdl-2.png" alt=""></button> </div></div></div> <div class="card"><div class="img"> <img src="https://www.hojadellunes.com/wp-content/uploads/2019/02/cloaque1.jpg" alt=""></div> <div class="content"> <div class="title">Alicante Histórica</div> <div class="sub-title">Eliana Maia</div> <div class="btn"> <button><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9T-VFQAvdYl8bM3G_UtxQ_CscDf8ePWwhIMEj1O2bAzY3QLcoc5yZaK5Atw2iCMnzAKqyrY6EKBTBk6tWfiQ9tlIiFagbGhwlder46DCLWsioWz2GG6w_ZnOPhhDkk6eCD-c0SbR9O70BDUMiIHEIKTv88ubxYrXKrROaTIds3g7_92ZYQU3pPJf/s320/hdl-2.png" alt=""></button> </div></div></div> <div class="card"><div class="img"> <img src="https://www.hojadellunes.com/wp-content/uploads/2019/05/expolio4.jpg" alt=""></div> <div class="content"> <div class="title">Alicante Histórica</div> <div class="sub-title">Eliana Maia</div> <div class="btn"> <button><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9T-VFQAvdYl8bM3G_UtxQ_CscDf8ePWwhIMEj1O2bAzY3QLcoc5yZaK5Atw2iCMnzAKqyrY6EKBTBk6tWfiQ9tlIiFagbGhwlder46DCLWsioWz2GG6w_ZnOPhhDkk6eCD-c0SbR9O70BDUMiIHEIKTv88ubxYrXKrROaTIds3g7_92ZYQU3pPJf/s320/hdl-2.png" alt=""></button> </div></div></div> <div class="card"><div class="img"> <img src="https://www.hojadellunes.com/wp-content/uploads/2019/05/expolio4.jpg" alt=""></div> <div class="content"> <div class="title">Alicante Histórica</div> <div class="sub-title">Eliana Maia</div> <div class="btn"> <button><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9T-VFQAvdYl8bM3G_UtxQ_CscDf8ePWwhIMEj1O2bAzY3QLcoc5yZaK5Atw2iCMnzAKqyrY6EKBTBk6tWfiQ9tlIiFagbGhwlder46DCLWsioWz2GG6w_ZnOPhhDkk6eCD-c0SbR9O70BDUMiIHEIKTv88ubxYrXKrROaTIds3g7_92ZYQU3pPJf/s320/hdl-2.png" alt=""></button> </div></div></div> <div class="card"><div class="img"> <img src="https://www.hojadellunes.com/wp-content/uploads/2019/05/expolio4.jpg" alt=""></div> <div class="content"> <div class="title">Alicante Histórica</div> <div class="sub-title">Eliana Maia</div> <div class="btn"> <button><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9T-VFQAvdYl8bM3G_UtxQ_CscDf8ePWwhIMEj1O2bAzY3QLcoc5yZaK5Atw2iCMnzAKqyrY6EKBTBk6tWfiQ9tlIiFagbGhwlder46DCLWsioWz2GG6w_ZnOPhhDkk6eCD-c0SbR9O70BDUMiIHEIKTv88ubxYrXKrROaTIds3g7_92ZYQU3pPJf/s320/hdl-2.png" alt=""></button> </div></div></div> <div class="card"><div class="img"> <img src="https://www.hojadellunes.com/wp-content/uploads/2019/05/expolio4.jpg" alt=""></div> <div class="content"> <div class="title">Alicante Histórica</div> <div class="sub-title">Eliana Maia</div> <div class="btn"> <button><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9T-VFQAvdYl8bM3G_UtxQ_CscDf8ePWwhIMEj1O2bAzY3QLcoc5yZaK5Atw2iCMnzAKqyrY6EKBTBk6tWfiQ9tlIiFagbGhwlder46DCLWsioWz2GG6w_ZnOPhhDkk6eCD-c0SbR9O70BDUMiIHEIKTv88ubxYrXKrROaTIds3g7_92ZYQU3pPJf/s320/hdl-2.png" alt=""></button> </div></div></div> <div class="card"><div class="img"> <img src="https://www.hojadellunes.com/wp-content/uploads/2019/05/expolio4.jpg" alt=""></div> <div class="content"> <div class="title">Alicante Histórica</div> <div class="sub-title">Eliana Maia</div> <div class="btn"> <button><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9T-VFQAvdYl8bM3G_UtxQ_CscDf8ePWwhIMEj1O2bAzY3QLcoc5yZaK5Atw2iCMnzAKqyrY6EKBTBk6tWfiQ9tlIiFagbGhwlder46DCLWsioWz2GG6w_ZnOPhhDkk6eCD-c0SbR9O70BDUMiIHEIKTv88ubxYrXKrROaTIds3g7_92ZYQU3pPJf/s320/hdl-2.png" alt=""></button> </div></div></div> <div class="card"><div class="img"> <img src="https://www.hojadellunes.com/wp-content/uploads/2019/05/expolio4.jpg" alt=""></div> <div class="content"> <div class="title">Alicante Histórica</div> <div class="sub-title">Eliana Maia</div> <div class="btn"> <button><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9T-VFQAvdYl8bM3G_UtxQ_CscDf8ePWwhIMEj1O2bAzY3QLcoc5yZaK5Atw2iCMnzAKqyrY6EKBTBk6tWfiQ9tlIiFagbGhwlder46DCLWsioWz2GG6w_ZnOPhhDkk6eCD-c0SbR9O70BDUMiIHEIKTv88ubxYrXKrROaTIds3g7_92ZYQU3pPJf/s320/hdl-2.png" alt=""></button> </div></div></div> <div class="card"><div class="img"> <img src="https://www.hojadellunes.com/wp-content/uploads/2019/05/expolio4.jpg" alt=""></div> <div class="content"> <div class="title">Alicante Histórica</div> <div class="sub-title">Eliana Maia</div> <div class="btn"> <button><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9T-VFQAvdYl8bM3G_UtxQ_CscDf8ePWwhIMEj1O2bAzY3QLcoc5yZaK5Atw2iCMnzAKqyrY6EKBTBk6tWfiQ9tlIiFagbGhwlder46DCLWsioWz2GG6w_ZnOPhhDkk6eCD-c0SbR9O70BDUMiIHEIKTv88ubxYrXKrROaTIds3g7_92ZYQU3pPJf/s320/hdl-2.png" alt=""></button> </div></div></div> <div class="card"><div class="img"> <img src="https://www.hojadellunes.com/wp-content/uploads/2019/05/expolio4.jpg" alt=""></div> <div class="content"> <div class="title">Alicante Histórica</div> <div class="sub-title">Eliana Maia</div> <div class="btn"> <button><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9T-VFQAvdYl8bM3G_UtxQ_CscDf8ePWwhIMEj1O2bAzY3QLcoc5yZaK5Atw2iCMnzAKqyrY6EKBTBk6tWfiQ9tlIiFagbGhwlder46DCLWsioWz2GG6w_ZnOPhhDkk6eCD-c0SbR9O70BDUMiIHEIKTv88ubxYrXKrROaTIds3g7_92ZYQU3pPJf/s320/hdl-2.png" alt=""></button> </div></div></div> </div> <script id="rendered-js" > $(".slider").owlCarousel({ loop: true, autoplay: true, autoplayTimeout: 2000, //2000ms = 2s; autoplayHoverPause: true }); //# sourceURL=pen.js </script>

ORIGEN DE LA PUBLICACION: https://codepen.io/immoking/pen/rNLQaGE