"baner-slick slider , slick-carousel, slider"
Bootstrap 4.1.1 Snippet by ishu511

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>unifiiss</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<body>
<h1 style="text-align:center; color:black;">AYUSH TAHKUR</h1>
<section class="main-slider">
<div class="lazy slider" data-sizes="50vw">
<div class="slide-box">
<img src="https://i.pinimg.com/originals/3c/7a/06/3c7a0609934cb393ba776267cf6ef8ae.jpg">
<div class="text-box-slider">
<samp class="welcome-font">Welcome To</samp>
<h1>Slick slider</h1>
<p>Specialists in design and manufacture of all types of window applications and furnishings for both residential and commercial projects.</p>
<a href="#" class="btn-slider">Contact Us</a>
</div>
</div>
<div class="slide-box">
<img src="http://renatures.com/wp-content/uploads/2016/11/waterfalls-trees-scenery-falls-sunshine-beauty-beautiful-lake-nature-waters-water-waterfall-aquamarine-blue-sunset-background.jpg">
<div class="container slider-container">
<div class="text-box-slider">
<samp class="welcome-font">Welcome To</samp>
<h1>Slick slider</h1>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.main-slider {overflow: hidden;display:block;overflow:hidden;width:100%;}
s.welcome-font{color: red;}
.slide-box {position: relative;}
.text-box-slider {position: absolute;top: 50%;left: 0;text-align: center;width: 100%;transform: translateY(-50%);line-height: 36px;}
samp.welcome-font {font-family: 'Great Vibes', cursive;color: #FFF;font-size: 44px;font-weight: 600;}
.text-box-slider h1 {
color: red;
text-transform: uppercase;
margin-top: 13px;
background: yellow;
width: 26%;
margin: auto;
font-size: 51px;
font-weight: 600;
display: block;
line-height: 71px;
margin-bottom: 21px;
margin-top: 14px;
}
.text-box-slider p {color: red;font-size: 17px;text-align: center;width: 51%;margin: auto;font-weight: 300;line-height: 24px; margin-bottom: 20px;}
.btn-slider {background:yellow;color:red;padding: 10px 30px;border: solid 1px;display: inline-block;margin-top: 13px;font-size: 18px;transition: all ease-in-out 0.5s;
text-transform: uppercase; font-weight: normal;}
.btn-slider:hover { background: transparent;color: white;transition: all ease-in-out 0.5s; color:#fff; border:solid 1px;}
.main-slider img {
width: 100%;
height: 738px;
object-fit: cover;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
$(".lazy").slick({
lazyLoad: 'ondemand', // ondemand progressive anticipated
infinite: true,
arrows: true,
autoplay: true,
autoplaySpeed: 5000,
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard PRO React
Client or Partners Logo Slider
Bootstrap 4 Carousel
Carousel with Search

Questions / Comments:

GOOD

ishu511 (1) - 5 years ago - Reply 0