This jQuery code snippet helps you to create a profile card with a carousel drag effect. It defines an immediately invoked function expression that wraps a jQuery plugin for a carousel with three items. The plugin is initialized with the “.owl-carousel1” class, and its properties are configured to include a loop, centering, and responsive behavior for different screen sizes.
The carousel displays one item on screens up to 680 pixels wide, two items on screens between 680 and 1000 pixels wide, and three items on screens larger than 1000 pixels. The function is executed immediately after it is defined, which initializes the carousel plugin.
How to Create jQuery Profile Cards with Carousel Drag Effect
First of all, load the following assets into the head tag of your HTML document.
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css'>
Create the HTML structure for the profile card as follows:
<div class="gtco-testimonials">
<h2>Testimonials Carousel - Cards Comments</h2>
<div class="owl-carousel owl-carousel1 owl-theme">
<div>
<div class="card text-center"><img class="card-img-top" src="https://images.unsplash.com/photo-1572561300743-2dd367ed0c9a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=300" alt="">
<div class="card-body">
<h5>Ronne Galle <br />
<span> Project Manager </span>
</h5>
<p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
impedit quo minus id quod maxime placeat ” </p>
</div>
</div>
</div>
<div>
<div class="card text-center"><img class="card-img-top" src="https://images.unsplash.com/photo-1588361035994-295e21daa761?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=301&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=301" alt="">
<div class="card-body">
<h5>Missy Limana<br />
<span> Engineer </span>
</h5>
<p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
impedit quo minus id quod maxime placeat ” </p>
</div>
</div>
</div>
<div>
<div class="card text-center"><img class="card-img-top" src="https://images.unsplash.com/photo-1575377222312-dd1a63a51638?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=302&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=302" alt="">
<div class="card-body">
<h5>Martha Brown<br />
<span> Project Manager </span>
</h5>
<p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
impedit quo minus id quod maxime placeat ” </p>
</div>
</div>
</div>
<div>
<div class="card text-center"><img class="card-img-top" src="https://images.unsplash.com/photo-1549836938-d278c5d46d20?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=303&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=303" alt="">
<div class="card-body">
<h5>Hanna Lisem<br />
<span> Project Manager </span>
</h5>
<p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
impedit quo minus id quod maxime placeat ” </p>
</div>
</div>
</div>
</div>
</div>
Now, style the profile card using the following CSS styles:
body {
background: aliceblue;
}
.gtco-testimonials {
position: relative;
margin-top: 30px;
}
.gtco-testimonials h2 {
font-size: 30px;
text-align: center;
color: #333333;
margin-bottom: 50px;
}
.gtco-testimonials .owl-stage-outer {
padding: 30px 0;
}
.gtco-testimonials .owl-nav {
display: none;
}
.gtco-testimonials .owl-dots {
text-align: center;
}
.gtco-testimonials .owl-dots span {
position: relative;
height: 10px;
width: 10px;
border-radius: 50%;
display: block;
background: #fff;
border: 2px solid #01b0f8;
margin: 0 5px;
}
.gtco-testimonials .owl-dots .active {
box-shadow: none;
}
.gtco-testimonials .owl-dots .active span {
background: #01b0f8;
box-shadow: none;
height: 12px;
width: 12px;
margin-bottom: -1px;
}
.gtco-testimonials .card {
background: #fff;
box-shadow: 0 8px 30px -7px #c9dff0;
margin: 0 20px;
padding: 0 10px;
border-radius: 20px;
border: 0;
}.cd__main{
display: block !important;
}
.gtco-testimonials .card .card-img-top {
max-width: 100px;
border-radius: 50%;
margin: 15px auto 0;
box-shadow: 0 8px 20px -4px #95abbb;
width: 100px;
height: 100px;
}
.gtco-testimonials .card h5 {
color: #01b0f8;
font-size: 21px;
line-height: 1.3;
}
.gtco-testimonials .card h5 span {
font-size: 18px;
color: #666666;
}
.gtco-testimonials .card p {
font-size: 18px;
color: #555;
padding-bottom: 15px;
}
.gtco-testimonials .active {
opacity: 0.5;
transition: all 0.3s;
}
.gtco-testimonials .center {
opacity: 1;
}
.gtco-testimonials .center h5 {
font-size: 24px;
}
.gtco-testimonials .center h5 span {
font-size: 20px;
}
.gtco-testimonials .center .card-img-top {
max-width: 100%;
height: 120px;
width: 120px;
}
@media (max-width: 767px) {
.gtco-testimonials {
margin-top: 20px;
}
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
outline: 0;
}
.owl-carousel button.owl-dot {
outline: 0;
}
Load the following scripts before closing the body tag:
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
Finally, add the following JavaScript function:
(function () {
"use strict";
var carousels = function () {
$(".owl-carousel1").owlCarousel({
loop: true,
center: true,
margin: 0,
responsiveClass: true,
nav: false,
responsive: {
0: {
items: 1,
nav: false
},
680: {
items: 2,
nav: false,
loop: false
},
1000: {
items: 3,
nav: true
}
}
});
};
(function ($) {
carousels();
})(jQuery);
})();
That’s all! hopefully, you have successfully created jQuery profile cards with crousel drag effect. If you have any questions or suggestions, feel free to comment below.
