Bootstrap Snippet Boostrap slick slider, slick-carousel, responsive slider, using HTML CSS Bootstrap jQuery

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="css/style.css" />                 
<body>
<!--slider-1-->
<h2 class="ayush">AYUSH THAKUR</h2>
        <section id="features" class="blue">
                <div class="content">
                  <div class="slider slider-1">
                    
                       <div class="container">
                         <div class="row as">
                           <div class="col-lg-9">
                             <div class="strat">
                               <div class="image">
                               <img src="http://www.111ideas.com/wp-content/uploads/2018/07/nature-images-download-for-free.jpg">
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
.image img {
    width: 100%;
}
.text {
    background: blak;
    padding: 22px 14px;
    text-align: justify;
    margin-top: 0px;
}
.text h2 {
    text-transform: capitalize;
    font-weight: 600;
}
.text p {
    font-size: 18px;
}
.text a {
    color: red;
    font-size: 20px;
    text-transform: capitalize;
}
.asa img {
    width: 100%;
    margin-top: 72px;
    height: 700px;
    object-fit: contain;
}
.slider.slider-2 h2 {
    color: red;
}
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
$(document).ready(function() {
    $('.as').slick({
      dots: true,
      infinite: false,
      autoplay: true,
      autoplaySpeed: 2000,
      pauseOnFocus: false,
      pauseOnHover: false,
      pauseOnDotsHover: false,
      slidesToShow: 3,
      slidesToScroll: 1,
      responsive: [
    
        {
         breakpoint: 991,
         settings: {
           slidesToShow: 1,
           slidesToScroll: 1
         }
        },
       {
         breakpoint: 700,
         settings: {
           slidesToShow: 1,
           slidesToScroll: 1
         }
       },
       {
         breakpoint: 480,
         settings: {
           slidesToShow: 1,
           slidesToScroll: 1
         }
       }
       // You can unslick at a given breakpoint now by adding:
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Boostrap slick slider, slick-carousel, responsive slider, "
Bootstrap 4.1.1 Snippet by ishu511

Related: See More

Questions / Comments:

"Boostrap slick slider, slick-carousel, responsive slider, " Bootstrap 4.1.1 Snippet by ishu511

Related: See More

Questions / Comments:

"Boostrap slick slider, slick-carousel, responsive slider, "
Bootstrap 4.1.1 Snippet by ishu511