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

Post to Facebook Tweet this

<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> <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> <div class="slide-box"> <img src="https://blog.fuertehoteles.com/wp-content/uploads/2018/04/cascada-compressor.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> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script> <script src="js/slick.js"></script> <script src="js/bootstrap.min.js"></script> <script src="custom.js"></script> </body> </html>
.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; }
$(".lazy").slick({ lazyLoad: 'ondemand', // ondemand progressive anticipated infinite: true, arrows: true, autoplay: true, autoplaySpeed: 5000, });

Related: See More

Paper Dashboard Angular
Client or Partners Logo Slider
Bootstrap 4 Carousel
Carousel with Search

Questions / Comments:

GOOD

ishu511 (1) - 4 years ago - Reply 0