OWL Carousel is a touch-enabled jQuery plugin that allows you to create beautiful responsive carousel sliders. A carousel is a collection of rotating banners, or a slideshow, that represents on the homepage of your store. It lets you display up to five slides consisting of images and text, which can be linked to particular products or pages.
Today in this blog I'll share this program (OWL Carousel Cards Slider). In this program, there are three profile-cards on the webpage and after every 2 seconds, they slide automatically and we can also slide each card in any direction (right or left).
You can copy the codes from the given boxes or download the code files from the given link but I recommend you to download the source code files instead of copying codes because you won't get images if you copy the codes.Click here to download code files.
You might like this:
Image Slider with Slide Controls
Responsive Owl-carousel Slider
Image Clip Animation with Sliders
Awesome Image Comparison Slider
HTML CODE:
<!DOCTYPE html><!-- Created By CodingNepal --><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Owl-carousel Cards Slider | CodingNepal</title> <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"> </head> <body> <div> <div> <div><img src="#" alt=""></div><div> <div>Briana Tozour</div><div>Graphic Designer</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.</p><div> <button>Read more</button> </div></div></div><div> <div><img src="#" alt=""></div><div> <div>Pricilla Preez</div><div>Web Developer</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.</p><div> <button>Read more</button> </div></div></div><div> <div><img src="#" alt=""></div><div> <div>Eliana Maia</div><div>App Developer</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.</p><div> <button>Read more</button> </div></div></div></div><script> $(".slider").owlCarousel({ loop: true, autoplay: true, autoplayTimeout: 2000, //2000ms = 2s; autoplayHoverPause: true, }); </script> </body></html>CSS CODE:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}html,body{ display: grid; height: 100%; place-items: center; text-align: center; background: #f2f2f2;}.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: 25px; font-weight: 600;}.card .content .sub-title{ font-size: 20px; font-weight: 600; color: #e74c3c; line-height: 20px;}.card .content p{ 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);}Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
