Owl Carousel Responsive CSS-Only Team Section Showcase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team Carousel Section</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
</head>
<body>
<div class="team-container">
<h2 class="team-title">Team Members</h2>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="member-card">
<div class="member-image-container">
<img src="https://avatar.iran.liara.run/public/girl" alt="Team Member 1" class="member-image">
</div>
<div class="member-name">Sophia Williams</div>
<div class="member-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo, ullam.</div>
<a href="#" class="learn-more-btn">Learn More</a>
</div>
</div>
<div class="item">
<div class="member-card">
<div class="member-image-container">
<img src="https://avatar.iran.liara.run/public/boy" alt="Team Member 2" class="member-image">
</div>
<div class="member-name">Ethan Jones</div>
<div class="member-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo, ullam.</div>
<a href="#" class="learn-more-btn">Learn More</a>
</div>
</div>
<div class="item">
<div class="member-card">
<div class="member-image-container">
<img src="https://avatar.iran.liara.run/public/girl" alt="Team Member 3" class="member-image">
</div>
<div class="member-name">Olivia Davis</div>
<div class="member-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo, ullam.</div>
<a href="#" class="learn-more-btn">Learn More</a>
</div>
</div>
<div class="item">
<div class="member-card">
<div class="member-image-container">
<img src="https://avatar.iran.liara.run/public/boy" alt="Team Member 4" class="member-image">
</div>
<div class="member-name">Liam Miller</div>
<div class="member-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo, ullam.</div>
<a href="#" class="learn-more-btn">Learn More</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</body>
</html>
body {
font-family: 'Poppins', sans-serif;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.team-container {
width: 100%;
max-width: 1200px;
text-align: center;
position: relative;
}
.team-title {
font-family: 'Playfair Display', serif;
font-size: 3rem;
margin-bottom: 40px;
color: #333;
}
.owl-carousel .item {
padding: 20px;
}
.member-card {
background-color: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
height: 100%;
}
.member-card:hover {
transform: translateY(-5px);
}
.member-image-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.member-name {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 10px;
color: #444;
}
.member-bio {
font-size: 0.9rem;
color: #777;
line-height: 1.5;
margin-bottom: 20px;
}
.learn-more-btn {
background-color: #007bff;
color: #fff;
padding: 10px 25px;
border-radius: 20px;
text-decoration: none;
font-weight: 600;
display: inline-block;
transition: background-color 0.3s ease;
}
.learn-more-btn:hover {
background-color: #0056b3;
}
/* Custom Navigation Arrows with Boxicons */
.owl-prev {
margin-left: -1rem !important;
}
.owl-theme .owl-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
padding: 0 10px;
line-height: 0;
}
.owl-theme .owl-nav .owl-prev,
.owl-theme .owl-nav .owl-next {
background: rgba(0, 123, 255, 0.8) !important;
color: #fff !important;
/* Set icon color to white */
border: none;
border-radius: 50%;
font-size: 1.5rem;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background 0.3s;
}
/* Specific styling for the icons within the buttons */
.owl-theme .owl-nav .owl-prev i,
.owl-theme .owl-nav .owl-next i {
color: #fff;
/* Ensure icon is white */
font-size: 2rem;
/* Adjusted for better visibility and centering */
line-height: 1;
/* Helps with vertical alignment */
transform: translateY(2px);
/* Slight adjustment for perfect vertical centering */
}
.owl-theme .owl-nav .owl-prev:hover,
.owl-theme .owl-nav .owl-next:hover {
background: #0056b3 !important;
}
.owl-theme .owl-dots {
display: none;
}
$(document).ready(function () {
$(".owl-carousel").owlCarousel({
loop: true,
margin: 20,
nav: true,
dots: false,
navText: [
'<i class="bx bx-chevron-left"></i>',
'<i class="bx bx-chevron-right"></i>'
],
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
});
This snippet provides a modern and responsive team members display. It's designed to elegantly showcase individual profiles, complete with photos, names, and professional titles. The component is fully responsive, using the Owl Carousel library to create a dynamic and interactive slider.
Key Features
- Responsive Design: The team members' display automatically adjusts its layout to fit different screen sizes, providing a consistent and optimal user experience on desktops, tablets, and mobile devices.
- CSS-Only Styling: The entire component is styled using pure CSS, ensuring a lightweight and fast-loading solution without any external styling libraries.
- Owl Carousel Integration: The use of Owl Carousel provides smooth and interactive navigation between team member profiles, enhancing the overall user experience.
Implementation
- Include Owl Carousel: Ensure you have the Owl Carousel CSS and JavaScript files linked in your project.
- Create the HTML Structure:Set up the main container with the required Owl Carousel classes. Inside, create a
divfor each team member card. - Apply CSS Styles: Use CSS to style the page elements. Customize the appearance of each team member card, including the circular photo, name, and title.
- Add JavaScript for Functionality: Implement JavaScript to initialize the Owl Carousel. You can use native JavaScript or a library like jQuery for this purpose.
- Customize as Needed: Replace the placeholder content, including image URLs, names, and titles, to fit your specific team.
Join Our Community Call-to-Action Banner Section With Tailwind CSS
Bootstrap 5 Responsive Service Pricing Table Block
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
