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
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="product-title">
                <h3>Ford Endeavour Top Class 2012</h3>
                <h5><i class="fa fa-map-marker"></i> Karali, Mahendru, New Delhi-110085</h5>
                
                <hr>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="swiper-zoom-container">
                    <img src="https://images.pexels.com/photos/249581/pexels-photo-249581.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swiper-zoom-container">
                    <img src="https://images.pexels.com/photos/861034/pexels-photo-861034.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swiper-zoom-container">
                    <img src="https://images.pexels.com/photos/50908/pexels-photo-50908.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
                </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
.swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        overflow: hidden;
  }
  
  /*** Add for CSS & Js in html head and js section **/
  
  <link rel="stylesheet" href="css/swiper.min.css">
  
<!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        zoom: true,
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev'
    });
    </script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"http://idangero.us/swiper/ - Product Page zoom slider"
Bootstrap 3.3.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"http://idangero.us/swiper/ - Product Page zoom slider" Bootstrap 3.3.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"http://idangero.us/swiper/ - Product Page zoom slider"
Bootstrap 3.3.0 Snippet by jeevan123456