Bootstrap Snippet slick slider banner Bootstrap 4 using HTML CSS Javascript

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 ---------->
<!-- Slick Slider-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<section>
<div class="banner_sec">
    <div class="slidr">
        <div class="slide1">
            <div class="slide_cont text-center">
                <h1>It Is More Difficult to Give Money Away </h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    <button class="btn btn-yelow my-2">Donate Now<span>
                        <i class="fa fa-long-arrow-right" ></i></span>
                    </button>
                    <button class="btn btn-white my-2">Join Now<span>
                        <i class="fa fa-long-arrow-right" ></i></span>
                    </button>
            </div>
        </div>
        <div class="slide2">
            <div class="slide_cont text-center">
                <h1>It Is More Difficult to Give Money Away </h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    <button class="btn btn-yelow my-2">Donate Now<span>
                        <i class="fa fa-long-arrow-right" ></i></span>
                    </button>
                    <button class="btn btn-white my-2">Join Now<span>
                        <i class="fa fa-long-arrow-right" ></i></span>
                    </button>
            </div>
        </div>
    </div>  
</div>
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
30
31
32
33
34
35
36
37
/* ==========================================================================
        Banner Css Start
========================================================================== */
.slide1 {
    height: 100vh;
    min-height: 751px;
    background: linear-gradient(rgb(0 0 0 / 72%), rgb(0 0 0 / 62%)), url("https://placeimg.com/1000/1000/nature") no-repeat center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position:relative;
}
.slide2 {
    height: 100vh;
    min-height: 751px;
    background: linear-gradient(rgb(0 0 0 / 72%), rgb(0 0 0 / 62%)), url("https://placeimg.com/1000/1000/nature") no-repeat center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position:relative;
}
.slide1 {
    color: #fff;
    display: flex !important;
    align-items: center;
    text-align: center;
}
.slide2 {
    color: #fff;
    display: flex !important;
    align-items: center;
    text-align: center;
}
.slide_cont {
    max-width: 600px;
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
30
31
32
33
34
35
36
$('.slidr').slick({
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
    touchThreshold: 100,
  dots: false,
  arrows: true,
  infinite: true,
    speed: 1500,
  fade:true,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"slick slider banner Bootstrap 4"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"slick slider banner Bootstrap 4" Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"slick slider banner Bootstrap 4"
Bootstrap 4.1.1 Snippet by Shivamsemisetia