Bootstrap Snippet animated slider using HTML CSS

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 ---------->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">
 <div class="swiper-container">
                <div class="swiper-wrapper">
              <!--     <div class="swiper-slide">
                    <div class="slide-inner" style="background-image:url(http://cs412624.vk.me/v412624691/4117/RWBNZL6CLtU.jpg)"></div>
                  </div>
                  <div class="swiper-slide">
                    <div class="slide-inner" style="background-image:url(http://cs412624.vk.me/v412624691/41ad/atM6w55Z9Xg.jpg)"></div>
                  </div> -->
                  <div class="swiper-slide">
                    <div class="slide-inner">
                      <img src="https://pp.userapi.com/c836139/v836139003/63ce1/QThPx7qPzvU.jpg">
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="slide-inner" style="background-image:url(https://pp.userapi.com/c412624/v412624691/4136/_da_uAA6ha8.jpg)"></div>
                  </div>
                  <div class="swiper-slide">
                    <div class="slide-inner">
                       <img src="https://pp.userapi.com/c637331/v637331691/48f5f/spHnV42iYVw.jpg">
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="slide-inner">
                      <img src="https://pp.userapi.com/c837139/v837139407/67f52/fFqjq4U2mEk.jpg">
                    </div>
                  </div>
              <!--     <div class="swiper-slide">
                    <div class="slide-inner" style="background-image:url(http://cs412624.vk.me/v412624691/415d/X7YuVilSl4k.jpg)"></div>
                  </div> -->
                </div>
                <div class="swiper-button-next swiper-button-white"></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
 body {
                background: #eee;
                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                font-size: 14px;
                color: #000;
                background: #404449;
                margin: 0;
                padding: 0;
              }
              
              .swiper-container {
                height: calc(100vh - 120px);
                margin: 60px;
              }
              
              .swiper-slide {
                overflow: hidden;
              }
              
              .slide-inner {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                background-size: cover;
                background-position: center;
              }
              img{
                display:block;
                width:100%;
                height:auto;
              }
              .copy {
                position: absolute;
                bottom: 15px;
                left: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"animated slider "
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"animated slider " Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"animated slider "
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY