HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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.2.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script>
  <div class="swiper-container" dir="rtl">
    <div class="swiper-wrapper">
      <div class="swiper-slide"> <div class="swiper-zoom-container"><img src="https://images.pexels.com/photos/355887/pexels-photo-355887.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"></div></div>
      <div class="swiper-slide"> <div class="swiper-zoom-container"><img src="https://images.pexels.com/photos/132197/pexels-photo-132197.jpeg?auto=compress&cs=tinysrgb&h=650&w=940 "></div></div>
      <div class="swiper-slide"> <div class="swiper-zoom-container"><img src="https://images.pexels.com/photos/633409/pexels-photo-633409.jpeg?auto=compress&cs=tinysrgb&h=350 "></div></div>
      <div class="swiper-slide"> <div class="swiper-zoom-container"><img src="https://images.pexels.com/photos/544117/pexels-photo-544117.jpeg?auto=compress&cs=tinysrgb&h=350 "></div></div>
      <div class="swiper-slide"> <div class="swiper-zoom-container"><img src="https://images.pexels.com/photos/355887/pexels-photo-355887.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"></div></div>
      <div class="swiper-slide"> <div class="swiper-zoom-container"><img src="https://images.pexels.com/photos/132197/pexels-photo-132197.jpeg?auto=compress&cs=tinysrgb&h=650&w=940 "></div></div>
      <div class="swiper-slide"> <div class="swiper-zoom-container"><img src="https://images.pexels.com/photos/633409/pexels-photo-633409.jpeg?auto=compress&cs=tinysrgb&h=350 "></div></div>
      <div class="swiper-slide"> <div class="swiper-zoom-container"><img src="https://images.pexels.com/photos/544117/pexels-photo-544117.jpeg?auto=compress&cs=tinysrgb&h=350 "></div></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Navigation -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></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
 .swiper-container {
      width: 50%;
      height: 50%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
 var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"swiper - Slider "
Bootstrap 4.0.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"swiper - Slider " Bootstrap 4.0.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"swiper - Slider "
Bootstrap 4.0.0 Snippet by jeevan123456