Reading time 19 minutes
Owl Carousel: In today’s web design landscape, engaging and informative content is crucial for capturing user attention. A well-designed doctor card slider can be an effective way to showcase your medical team, providing key information in an attractive and user-friendly format. This tutorial will guide you through the process of creating a responsive doctor card slider using Owl Carousel, a popular and versatile JavaScript library.
What is Owl Carousel?
Owl Carousel is a touch-enabled jQuery plugin that lets you create beautiful responsive carousel sliders. It’s highly customizable, supports various features like autoplay, loop, and different navigation options, and is relatively easy to implement.
Prerequisites
Before we begin, make sure you have the following:
- Basic knowledge of HTML, CSS, and JavaScript: A fundamental understanding of these languages is essential.
- A code editor: Any code editor will work, such as VS Code, Sublime Text, or Atom.
- Web browser: To view and test your slider.
- Internet connection: To access the required libraries and fonts.
Step 1: Set up Your HTML Structure
First, create an HTML file (e.g., index.html) and include the necessary links to Bootstrap, Owl Carousel CSS, Font Awesome, and jQuery. Also include your custom CSS file.
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>Doctor Card Slider</title>
<meta name="robots" content="noindex">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Slider Section -->
<section class="container-fluid mx-auto px-5 first-section pm-doctor-slider-section pmbg">
<h2>Meet Our Doctors</h2>
<div class="owl-carousel owl-theme">
<!-- Doctor Cards will be added here -->
</div>
<button class="pm-doctor-slider-see-more">See More Doctors</button>
</section>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Owl Carousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="script.js"></script>
</body>
</html>Explanation:
- We link to Bootstrap for basic styling and responsive layout.
- We include the Owl Carousel CSS for the slider’s appearance.
- Font Awesome is used for icons (like the WhatsApp icon).
- We include jQuery (required by Owl Carousel), Bootstrap JS (required by Bootstrap) and Owl Carousel JS for the slider’s functionality.
- We add custom CSS in style.css and javascript in script.js
Step 2: Add Doctor Card HTML
Now, let’s add the HTML for the doctor cards inside the owl-carousel div. Each card will be an item within the carousel.
<div class="owl-carousel owl-theme">
<!-- Doctor Card 1 -->
<div class="item">
<div class="pm-doctor-slider-card">
<img src="https://placehold.co/120" alt="Dr. Chandran Gnanamuthu" class="pm-doctor-slider-img">
<h5 class="mb-1">Dr. Chandran Gnanamuthu</h5>
<p class="text-muted mb-1">Neurologist</p>
<p class="mb-1">Fortis Hospital, Bangalore</p>
<p class="mb-3 text-muted">(Bannerghatta Road)</p>
<p class="mb-3">38 years of experience</p>
<button class="pm-doctor-slider-btn-whatsapp mb-3">
<i class="fab fa-whatsapp"></i> Chat
</button>
<button class="pm-doctor-slider-btn-contact">Contact Doctor</button>
</div>
</div>
<!-- Doctor Card 2 (Example) -->
<div class="item">
<div class="pm-doctor-slider-card">
<img src="https://placehold.co/120" alt="Dr. John Doe" class="pm-doctor-slider-img">
<h5 class="mb-1">Dr. John Doe</h5>
<p class="text-muted mb-1">Cardiologist</p>
<p class="mb-1">Apollo Hospital, Mumbai</p>
<p class="mb-3 text-muted">(Worli Road)</p>
<p class="mb-3">25 years of experience</p>
<button class="pm-doctor-slider-btn-whatsapp mb-3">
<i class="fab fa-whatsapp"></i> Chat
</button>
<button class="pm-doctor-slider-btn-contact">Contact Doctor</button>
</div>
</div>
<!-- Doctor Card 3 (Example) -->
<div class="item">
<div class="pm-doctor-slider-card">
<img src="https://placehold.co/120" alt="Dr. Jane Smith" class="pm-doctor-slider-img">
<h5 class="mb-1">Dr. Jane Smith</h5>
<p class="text-muted mb-1">Pediatrician</p>
<p class="mb-1">Max Hospital, Delhi</p>
<p class="mb-3 text-muted">(Saket Road)</p>
<p class="mb-3">20 years of experience</p>
<button class="pm-doctor-slider-btn-whatsapp mb-3">
<i class="fab fa-whatsapp"></i> Chat
</button>
<button class="pm-doctor-slider-btn-contact">Contact Doctor</button>
</div>
</div>
<!-- Doctor Card 4 (Example, to match the image) -->
<div class="item">
<div class="pm-doctor-slider-card">
<img src="https://placehold.co/120" alt="Dr. Chandran Gnanamuthu" class="pm-doctor-slider-img">
<h5 class="mb-1">Dr. Chandran Gnanamuthu</h5>
<p class="text-muted mb-1">Neurologist</p>
<p class="mb-1">Fortis Hospital, Bangalore</p>
<p class="mb-3 text-muted">(Bannerghatta Road)</p>
<p class="mb-3">38 years of experience</p>
<button class="pm-doctor-slider-btn-whatsapp mb-3">
<i class="fab fa-whatsapp"></i> Chat
</button>
<button class="pm-doctor-slider-btn-contact">Contact Doctor</button>
</div>
</div>
</div>Explanation:
- Each doctor’s information is contained within a <div class=”item”> and then a <div class=”pm-doctor-slider-card”>.
- We use Bootstrap’s CSS classes (like mb-1, text-muted, mb-3) for basic spacing and text styling.
- Placeholder images from https://placehold.co/120 are used for doctor images. Replace these with actual doctor photos.
- The “Chat” and “Contact Doctor” buttons provide call-to-actions.
Step 3: Add Custom CSS
Create a file named style.css and add the following CSS to style the slider and doctor cards:
.pmbg {
background: linear-gradient(to bottom, #f5e7bc, #f8f9fa);
padding-top: 20px;
padding-bottom: 20px;
}
.pm-doctor-slider-section {
padding: 40px 0;
text-align: center;
position: relative;
max-width: 1400px; /* Ensure enough width for 4 cards + margins + arrows */
margin: 0 auto;
}
.pm-doctor-slider-section h2 {
color: #8b6f47;
font-size: 24px;
margin-bottom: 30px;
font-weight: bold;
}
.pm-doctor-slider-card {
background-color: white;
border-radius: 15px;
padding: 20px;
max-width: 280px; /* Slightly reduced to fit 4 cards better */
margin: 0 auto;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
}
.pm-doctor-slider-img {
width: 120px !important;
height: 120px !important;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto 15px;
}
.pm-doctor-slider-btn-whatsapp {
background-color: #25d366;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
}
.pm-doctor-slider-btn-whatsapp:hover {
background-color: #1da851;
color: white;
}
.pm-doctor-slider-btn-contact {
background-color: #f4c430;
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
width: 100%;
font-size: 14px;
margin-top: 10px;
}
.pm-doctor-slider-btn-contact:hover {
background-color: #d9a406;
color: white;
}
/* Owl Carousel custom styling */
.owl-carousel {
overflow: visible; /* Prevent clipping of navigation arrows */
}
.owl-carousel .owl-item .pm-doctor-slider-card {
margin-right: 10px; /* Reduce margin to fit 4 cards better */
}
.owl-carousel .pm-doctor-slider-owl-nav {
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none; /* Ensure arrows don't interfere with card clicks */
}
.owl-carousel .pm-doctor-slider-owl-nav button {
background: rgba(0, 0, 0, 0.5) !important;
color: white !important;
border: none !important;
font-size: 24px !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
z-index: 10; /* Ensure arrows stay on top */
pointer-events: auto; /* Allow arrows to be clickable */
}
/* Hide arrows on mobile (screens < 600px) only */
@media (max-width: 599px) {
.owl-carousel .pm-doctor-slider-owl-nav {
display: none;
}
}
/* Position arrows at the middle left and right of the cards */
.owl-carousel .pm-doctor-slider-owl-nav button.owl-prev {
left: 0;
margin-left: 10px; /* Small margin to avoid touching the edge */
transform: translateY(-50%) translateX(-50%); /* Center vertically and move left to middle of left edge */
}
.owl-carousel .pm-doctor-slider-owl-nav button.owl-next {
right: 0;
margin-right: 10px; /* Small margin to avoid touching the edge */
transform: translateY(-50%) translateX(50%); /* Center vertically and move right to middle of right edge */
}
/* Override disabled class to keep arrows visible and clickable */
.owl-nav.disabled {
pointer-events: auto !important;
opacity: 1 !important;
}
.owl-nav.disabled button {
background: rgba(0, 0, 0, 0.5) !important;
color: white !important;
}
.pm-doctor-slider-see-more {
background-color: #f4c430;
color: white;
border: none;
padding: 10px 30px;
border-radius: 25px;
font-size: 16px;
margin-top: 30px;
display: inline-block;
}
.pm-doctor-slider-see-more:hover {
background-color: #d9a406;
color: white;
}
.owl-nav {
display: flex !important;
justify-content: space-between !important;
position: relative !important;
top: -300px !important;
}
.owl-prev,
.owl-next{
height:30px !important;
width:30px !important;
border-radius:30px !important;
padding-left:20px !important;
padding-right:20px !important;
}Explanation:
- .pmbg: Sets the background style for the slider section.
- .pm-doctor-slider-section: Styles the main slider section, setting padding, text alignment, a maximum width, and centering the content.
- .pm-doctor-slider-section h2: Styles the heading of the slider section, setting color, font size, margin, and font weight.
- .pm-doctor-slider-card: Styles the individual doctor cards, setting background color, border radius, padding, maximum width, margin, box shadow, and border.
- .pm-doctor-slider-img: Styles the doctor images, setting width, height, border radius, object fit, display, and margin.
- .pm-doctor-slider-btn-whatsapp and .pm-doctor-slider-btn-contact: Styles the WhatsApp and Contact Doctor buttons, setting background color, color, border, padding, border radius, font size, and margin.
- .owl-carousel: Allows overflow: visible to keep the navigation arrows from being cut off.
- .owl-carousel .pm-doctor-slider-owl-nav: Styles the owl carousel navigation, positioning it absolutely, centering it vertically with transform: translateY(-50%), distributing the arrows with justify-content: space-between, and preventing the arrows from interfering with card clicks by setting pointer-events: none;.
- .owl-carousel .pm-doctor-slider-owl-nav button: Styles the owl carousel navigation buttons, setting background color, color, border, font size, width, height, border radius, and z-index.
- @media (max-width: 599px): Hides the owl carousel navigation on mobile devices with a screen width of 599px or less.
- .owl-carousel .pm-doctor-slider-owl-nav button.owl-prev and .owl-carousel .pm-doctor-slider-owl-nav button.owl-next: Positions the owl carousel navigation buttons at the middle left and right edges of the cards, using transform: translateY(-50%) translateX(-50%) and transform: translateY(-50%) translateX(50%) respectively.
- .owl-nav.disabled and .owl-nav.disabled button: Overrides the disabled class to keep the arrows visible and clickable, setting pointer events and opacity, and styling the button appearance.
- .pm-doctor-slider-see-more: Styles the See More Doctors button, setting background color, color, border, padding, border radius, font size, margin, and display.
Step 4: Initialize Owl Carousel with JavaScript
Create a file named script.js and add the following JavaScript code to initialize the Owl Carousel:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots: false, // Hide dots
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:4
}
},
navText: [
'<i class="fa fa-chevron-left"></i>',
'<i class="fa fa-chevron-right"></i>'
]
});
});Explanation:
- $(document).ready(function(){ … });: Ensures the code runs after the DOM is fully loaded.
- $(‘.owl-carousel’).owlCarousel({ … });: Initializes Owl Carousel on the element with the class owl-carousel.
- loop: true: Enables infinite loop sliding.
- margin: 10: Sets the margin between items.
- nav: true: Displays navigation arrows.
- dots: false: Hides navigation dots.
- responsive: Defines the number of items to display at different screen sizes:
- 0:{items:1}: 1 item on screens smaller than 600px.
- 600:{items:2}: 2 items on screens between 600px and 1000px.
- 1000:{items:4}: 4 items on screens larger than 1000px.
- navText: Sets custom text for the navigation arrows, using Font Awesome icons.
Step 5: Test Your Slider
Open your index.html file in a web browser. You should see a doctor card slider with navigation arrows. The number of visible cards should change depending on your screen size.
Full Code Listing
Here’s the complete code for your convenience:
index.html:
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>Doctor Card Slider</title>
<meta name="robots" content="noindex">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Slider Section -->
<section class="container-fluid mx-auto px-5 first-section pm-doctor-slider-section pmbg">
<h2>Meet Our Doctors</h2>
<div class="owl-carousel owl-theme">
<!-- Doctor Card 1 -->
<div class="item">
<div class="pm-doctor-slider-card">
<img src="https://placehold.co/120" alt="Dr. Chandran Gnanamuthu" class="pm-doctor-slider-img">
<h5 class="mb-1">Dr. Chandran Gnanamuthu</h5>
<p class="text-muted mb-1">Neurologist</p>
<p class="mb-1">Fortis Hospital, Bangalore</p>
<p class="mb-3 text-muted">(Bannerghatta Road)</p>
<p class="mb-3">38 years of experience</p>
<button class="pm-doctor-slider-btn-whatsapp mb-3">
<i class="fab fa-whatsapp"></i> Chat
</button>
<button class="pm-doctor-slider-btn-contact">Contact Doctor</button>
</div>
</div>
<!-- Doctor Card 2 (Example) -->
<div class="item">
<div class="pm-doctor-slider-card">
<img src="https://placehold.co/120" alt="Dr. John Doe" class="pm-doctor-slider-img">
<h5 class="mb-1">Dr. John Doe</h5>
<p class="text-muted mb-1">Cardiologist</p>
<p class="mb-1">Apollo Hospital, Mumbai</p>
<p class="mb-3 text-muted">(Worli Road)</p>
<p class="mb-3">25 years of experience</p>
<button class="pm-doctor-slider-btn-whatsapp mb-3">
<i class="fab fa-whatsapp"></i> Chat
</button>
<button class="pm-doctor-slider-btn-contact">Contact Doctor</button>
</div>
</div>
<!-- Doctor Card 3 (Example) -->
<div class="item">
<div class="pm-doctor-slider-card">
<img src="https://placehold.co/120" alt="Dr. Jane Smith" class="pm-doctor-slider-img">
<h5 class="mb-1">Dr. Jane Smith</h5>
<p class="text-muted mb-1">Pediatrician</p>
<p class="mb-1">Max Hospital, Delhi</p>
<p class="mb-3 text-muted">(Saket Road)</p>
<p class="mb-3">20 years of experience</p>
<button class="pm-doctor-slider-btn-whatsapp mb-3">
<i class="fab fa-whatsapp"></i> Chat
</button>
<button class="pm-doctor-slider-btn-contact">Contact Doctor</button>
</div>
</div>
<!-- Doctor Card 4 (Example, to match the image) -->
<div class="item">
<div class="pm-doctor-slider-card">
<img src="https://placehold.co/120" alt="Dr. Chandran Gnanamuthu" class="pm-doctor-slider-img">
<h5 class="mb-1">Dr. Chandran Gnanamuthu</h5>
<p class="text-muted mb-1">Neurologist</p>
<p class="mb-1">Fortis Hospital, Bangalore</p>
<p class="mb-3 text-muted">(Bannerghatta Road)</p>
<p class="mb-3">38 years of experience</p>
<button class="pm-doctor-slider-btn-whatsapp mb-3">
<i class="fab fa-whatsapp"></i> Chat
</button>
<button class="pm-doctor-slider-btn-contact">Contact Doctor</button>
</div>
</div>
</div>
<button class="pm-doctor-slider-see-more">See More Doctors</button>
</section>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Owl Carousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="script.js"></script>
</body>
</html>style.css:
.pmbg {
background: linear-gradient(to bottom, #f5e7bc, #f8f9fa);
padding-top: 20px;
padding-bottom: 20px;
}
.pm-doctor-slider-section {
padding: 40px 0;
text-align: center;
position: relative;
max-width: 1400px; /* Ensure enough width for 4 cards + margins + arrows */
margin: 0 auto;
}
.pm-doctor-slider-section h2 {
color: #8b6f47;
font-size: 24px;
margin-bottom: 30px;
font-weight: bold;
}
.pm-doctor-slider-card {
background-color: white;
border-radius: 15px;
padding: 20px;
max-width: 280px; /* Slightly reduced to fit 4 cards better */
margin: 0 auto;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
}
.pm-doctor-slider-img {
width: 120px !important;
height: 120px !important;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto 15px;
}
.pm-doctor-slider-btn-whatsapp {
background-color: #25d366;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
}
.pm-doctor-slider-btn-whatsapp:hover {
background-color: #1da851;
color: white;
}
.pm-doctor-slider-btn-contact {
background-color: #f4c430;
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
width: 100%;
font-size: 14px;
margin-top: 10px;
}
.pm-doctor-slider-btn-contact:hover {
background-color: #d9a406;
color: white;
}
/* Owl Carousel custom styling */
.owl-carousel {
overflow: visible; /* Prevent clipping of navigation arrows */
}
.owl-carousel .owl-item .pm-doctor-slider-card {
margin-right: 10px; /* Reduce margin to fit 4 cards better */
}
.owl-carousel .pm-doctor-slider-owl-nav {
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none; /* Ensure arrows don't interfere with card clicks */
}
.owl-carousel .pm-doctor-slider-owl-nav button {
background: rgba(0, 0, 0, 0.5) !important;
color: white !important;
border: none !important;
font-size: 24px !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
z-index: 10; /* Ensure arrows stay on top */
pointer-events: auto; /* Allow arrows to be clickable */
}
/* Hide arrows on mobile (screens < 600px) only */
@media (max-width: 599px) {
.owl-carousel .pm-doctor-slider-owl-nav {
display: none;
}
}
/* Position arrows at the middle left and right of the cards */
.owl-carousel .pm-doctor-slider-owl-nav button.owl-prev {
left: 0;
margin-left: 10px; /* Small margin to avoid touching the edge */
transform: translateY(-50%) translateX(-50%); /* Center vertically and move left to middle of left edge */
}
.owl-carousel .pm-doctor-slider-owl-nav button.owl-next {
right: 0;
margin-right: 10px; /* Small margin to avoid touching the edge */
transform: translateY(-50%) translateX(50%); /* Center vertically and move right to middle of right edge */
}
/* Override disabled class to keep arrows visible and clickable */
.owl-nav.disabled {
pointer-events: auto !important;
opacity: 1 !important;
}
.owl-nav.disabled button {
background: rgba(0, 0, 0, 0.5) !important;
color: white !important;
}
.pm-doctor-slider-see-more {
background-color: #f4c430;
color: white;
border: none;
padding: 10px 30px;
border-radius: 25px;
font-size: 16px;
margin-top: 30px;
display: inline-block;
}
.pm-doctor-slider-see-more:hover {
background-color: #d9a406;
color: white;
}
.owl-nav {
display: flex !important;
justify-content: space-between !important;
position: relative !important;
top: -300px !important;
}
.owl-prev,
.owl-next{
height:30px !important;
width:30px !important;
border-radius:30px !important;
padding-left:20px !important;
padding-right:20px !important;
}script.js:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots: false, // Hide dots
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:4
}
},
navText: [
'<i class="fa fa-chevron-left"></i>',
'<i class="fa fa-chevron-right"></i>'
]
});
});Enhancements and Customization
- Replace Placeholder Images: Use actual doctor photos for a professional look.
- Dynamic Content: Load doctor data dynamically from a database or API using JavaScript.
- Custom Styling: Further customize the CSS to match your website’s design.
- Accessibility: Ensure the slider is accessible to users with disabilities by adding ARIA attributes.
- Autoplay: Add autoplay:true to the Owl Carousel configuration to enable automatic sliding.
- Different Transitions: Experiment with different transition effects in Owl Carousel.
- Lazy Loading: Implement lazy loading for images to improve page performance.
- Clickable Cards: Make the doctor cards clickable, linking to detailed profiles.
- Add a Description: Include a short bio or specialization summary to make the card more informative.
- More Navigation: Show the number of doctors on each side.
Conclusion
By following this step-by-step guide, you can create a visually appealing and functional doctor card slider using Owl Carousel. This slider will not only enhance the user experience on your website but also provide an effective way to showcase your medical team. Remember to customize the slider to match your website’s design and to provide the most relevant information to your users.
