Coding BD given How to use Slick Slider for your Website. We created a jquery slick slider tutorial. It is the most important part Of image slider. We have given more importance to How to use Slick Slider for your website. They used a pure jquery carousel. because they need a highly effective carousel. Thank you so much.
😍😍 If You like this video Please like, share and subscribe This video.😍😍
😍😍 Check Others Programming Video👇
➡️ Parallax Animation effects: https://www.youtube.com/watch?v=pRvNZ6aMBoo
➡️ Sticky Navigation Bar On Scroll Using Vanilla Javascript: https://www.youtube.com/watch?v=XQJSc–XgO8
➡️ How to Download Source code in Coding BD: https://www.youtube.com/watch?v=WXAZ-BScKBE&t=3s
➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART…
➡️ Responsive Services Section: https://www.youtube.com/watch?v=wvLky…
➡️ Plane animation only html css: https://www.youtube.com/watch?v=XcYlfp8sFX0
➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5…
➡️ Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF…
➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuV…
➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript: https://www.youtube.com/watch?v=6A6Hp…
➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR…
➡️Scroll top button : https://www.youtube.com/watch?v=9fDEJ…
➡️ Animated eid mubarak 2021 using Html CSS & Javascript: https://www.youtube.com/watch?v=60H2g…
Here is all Source code. You can follow this steps:
- Create 1 folder
- create 1 HTML file: index.html
- create 1 CSS file: style.css
- copy HTML code and pest HTML file, copy CSS code and past CSS file
- Now give a smile and jump out loud. 😍😍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slick Slider | Coding BD</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="client-area">
<div class="container">
<h2>Our <span>Clients</span></h2>
<section class="logo-area slider">
<div class="slide"><img src="./logo1.png" alt=""></div>
<div class="slide"><img src="./logo2.png" alt=""></div>
<div class="slide"><img src="./logo3.png" alt=""></div>
<div class="slide"><img src="./logo4.png" alt=""></div>
<div class="slide"><img src="./logo5.png" alt=""></div>
<div class="slide"><img src="./logo6.png" alt=""></div>
<div class="slide"><img src="./logo7.png" alt=""></div>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>body{
margin: 0;
padding: 0;
background: #000;
}
h2{
text-align: center;
padding: 0 0 70px;
color: #fff;
text-transform: uppercase;
font-size: 70px;
font-weight: bold;
}
h2 span{
color: #ff3;
}
.client-area{
padding: 150px 0 0 ;
}
.slick-slide{
margin: 0 20px;
}
.slick-slide img{
width: 100%;
}
.slick-list{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus{
outline: none;
}
.slick-slide{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
.slick-slide img{
display: block;
}
.slick-initialized .slick-slide{
display: block;
}
.slick-loading .slick-slide{
visibility: hidden;
}Don’t Forget to Follow me on all Social Network
YouTube: https://www.youtube.com/channel/UCw9etYfx-25oKB_qt1fFNWw
Facebook Page: https://www.facebook.com/codingbd2021
LinkedIn: https://www.linkedin.com/in/sajjat-ho…
GitHub: https://github.com/cgsaleh8383
You can see Plane animation only html css
