<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<title>
slider
</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title></title>
<meta content="" name="description" />
<meta content="" name="keywords" />
<!-- Favicons -->
<link href="" rel="icon" />
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
</head>
<body>
<section class="team-slider">
<div class="container">
<div class="white-bg">
<div class="release-product-slider">
<div class="tabs">
<div class="person-detail">
<h4>slide1</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
</div>
</div>
<div class="tabs">
<div class="person-detail">
<h4>slide2</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
</div>
</div>
<div class="tabs">
<div class="person-detail">
<h4>slide3</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
</div>
</div>
<div class="tabs">
<div class="person-detail">
<h4>slide4</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
</div>
</div>
<div class="tabs">
<div class="person-detail">
<h4>slide5</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
</body>
</html>
.white-bg {
position: relative;
z-index: 1;
background: #FFFFFF;
box-shadow: 0px 0px 6px 7px rgba(0, 0, 0, 0.04);
border-radius: 5px;
padding: 50px 30px;
margin-top: 30px;
}
.a-left {
position: absolute;
top: 50%;
bottom: 0;
transform: translate(50%);
left: 0px;
z-index: 1;
}
.a-right {
position: absolute;
top: 50%;
bottom: 0;
transform: translate(50%);
right: 0px;
z-index: 1;
}
.slick-slide.slick-current.slick-active.slick-center {
background: #efdce0;
border-radius: 5px;
}
.person-detail {
text-align: center;
padding: 20px;
}
$('.release-product-slider').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 3000,
prevArrow:"<img class='a-left control-c prev slick-prev' src='images/arrow.png'>",
nextArrow:"<img class='a-right control-c next slick-next' src='images/arrow2.png'>",
focusOnSelect: false,
centerMode: true,
centerPadding: 0,
responsive: [
{
breakpoint: 1199,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 575,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
$(function() {
$('#ChangeToggle').click(function() {
$('#navbar-hamburger').toggleClass('hidden');
$('#navbar-close').toggleClass('hidden');
});
});
