Bootstrap Snippet 1. single product final bs4 using HTML CSS Bootstrap 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.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="pt-5"></div>
<div class="container">
    <div class="row">
        <div class="col-md-8">
           <div class="individual-car-title">
                <h3>Kia Soul, Brand New Model 2016</h3>
                <h4>4.85 Lakh</h4>
                <ul class="list-unstyled list-inline">
                    <li class="list-inline-item">  Ahmedabad (reg) </li>
                    <li class="list-inline-item"> | </li>
                    <li class="list-inline-item">   Second Owner </li>
                    <li class="list-inline-item"> | </li>
                    <li class="list-inline-item">  36 Views  </li>
                    <li class="list-inline-item"> | </li>
                    <li class="list-inline-item"> <!-- AddToAny BEGIN -->
    <a class="a2a_dd" href="https://www.addtoany.com/share"><i class="fa fa-share-alt"></i> Share </a>
    <script async src="https://static.addtoany.com/menu/page.js"></script>
    <!-- AddToAny END --> </li>
                    
                </ul>
            </div> 
            <div class="cars-gallery">
               <div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
    <div class="swiper-slide">
        <div class="swiper-zoom-container">
          <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg">
        </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
  img {width:100%;}
  /*******************
  SWIPPER 
  ********************/
  .swiper-container {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
    .gallery-top {
      height: 80%;
      width: 100%;
    }
    .gallery-thumbs {
      height: 20%;
      box-sizing: border-box;
      padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-active {
      opacity: 1;
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
    });
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"1. single product final bs4"
Bootstrap 4.0.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"1. single product final bs4" Bootstrap 4.0.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"1. single product final bs4"
Bootstrap 4.0.0 Snippet by jeevan123456