Owl-carousel Cards Slider in HTML CSS & jQuery

Hello readers, Today in this blog you'll learn how to create Owl Carousel with Image or Card Slider using HTML CSS & jQuery. Earlier I have shared a blog about how to create an image slider with controls or toggle buttons. Now it's time to create owl carousel slider.

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 with 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).

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (OWL Carousel Cards Slider).

Video Tutorial of OWL Carousel Cards Slider in  jQuery

If you're a beginner and you've basic knowledge of HTML & CSS then you can also create these types of carousel programs. There are no vast codes on this program to create it, there is only the use of jQuery plugin which allows us to create beautiful carousel sliders.

If you like this program (OWL Carousel Cards Slider) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this pre-built carousel slider on your projects and websites.

You might like this:

OWL Carousel Slider in jQuery [Source Codes]

As always, before sharing the codes of this program (OWL Carousel Cards Slider). Let's a few talk about the main tags and codes of this program. In the HTML File, first I created a <div> with the class name "slider" and placed all tags inside it. Then I created another <div> with the class name "card" and placed card contents inside it like I placed some dummy texts, button, title, etc. After that, I pasted the whole "card" codes three times to create three cards.

In the CSS File, first I placed all elements at the center. Then I did basic styling to the cards like I gave height-width, margin-padding, color, etc. And I placed all cards horizontally. Then I styling to image, title, sub-title, paragraph, and button. 

After all styling to elements, I put the JavaScript and CSS CDN Link of owl carousel in my HTML File. Then I gave the owl carousel class name to the main tag (<div class="slider">). After that, I wrote a loop: true and autoplay: true to slide cards automatically, Then I gave a certain time to the carousel autoplayTimeout: 2000; this means cards slide automatically after every 2 seconds. At last, I wrote autoplayHoverPause: true; this means it stops slide animation when we hover on the cards.

To create this program (OWL Carousel Cards Slider). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get the background images of this program. Click here to download source code files.

I recommend you to download the source code files from the above link instead of copying codes.



Thanks for visiting, Keep visiting.


We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

  1. Thanks for sharing. I really am in need of the codes of an auto images carousel slider.

    1. You can get images form above download link.

  2. what is the size of the pictures

  3. Hey your work is awesome keep doing!

  4. hey there .

    first off I'd like to say I really appreciate your content . keep up the great work .

    on another note though, I've been trying to resize my .card to at least width:250px but after so many trials I still can't seem to get them to spread apart evenly when using responsive .
    I would really appreciate your help with this .


Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post
Subscribe our YouTube Channel