DEV Community

Cover image for Owl-carousel Cards Slider in HTML CSS & jQuery
CodingNepal
CodingNepal

Posted on • Edited on

3

Owl-carousel Cards Slider in HTML CSS & jQuery

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 class="slider owl-carousel">
      <div class="card">
        <div class="img">
<img src="#" alt=""></div>
<div class="content">
          <div class="title">
Briana Tozour</div>
<div class="sub-title">
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 class="btn">
            <button>Read more</button>
          </div>
</div>
</div>
<div class="card">
        <div class="img">
<img src="#" alt=""></div>
<div class="content">
          <div class="title">
Pricilla Preez</div>
<div class="sub-title">
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 class="btn">
            <button>Read more</button>
          </div>
</div>
</div>
<div class="card">
        <div class="img">
<img src="#" alt=""></div>
<div class="content">
          <div class="title">
Eliana Maia</div>
<div class="sub-title">
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 class="btn">
            <button>Read more</button>
          </div>
</div>
</div>
</div>
<script>
      $(".slider").owlCarousel({
        loop: true,
        autoplay: true,
        autoplayTimeout: 2000, //2000ms = 2s;
        autoplayHoverPause: true,
      });
    </script>

  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
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);
}
Enter fullscreen mode Exit fullscreen mode

Reinvent your career for the AI era. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay