Bootstrap Snippet Bootstrap Product Thumbnail Slider 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.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 ---------->
<div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div id="carousel" class="carousel slide carousel-fade" data-touch="true" data-interval="3000" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://unsplash.it/400/300?image=0">
                        </div>
                        <div class="carousel-item">
                            <img src="https://unsplash.it/400/300?image=1">
                        </div>
                        <div class="carousel-item">
                            <img src="https://unsplash.it/400/300?image=2">
                        </div>
                        <div class="carousel-item">
                            <img src="https://unsplash.it/400/300?image=3">
                        </div>
                        <div class="carousel-item">
                            <img src="https://unsplash.it/400/300?image=4">
                        </div>
                        <div class="carousel-item">
                            <img src="https://unsplash.it/400/300?image=5">
                        </div>
                        <div class="carousel-item">
                            <img src="https://unsplash.it/400/300?image=6">
                        </div>
                        <div class="carousel-item">
                            <img src="https://unsplash.it/400/300?image=7">
                        </div>
                    </div>
                </div>
                <div class="clearfix">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* CSS used here will be applied after bootstrap.css */
.carousel {
    margin-top: 10px;
}
.carousel-item .thumb {
    width: 25%;
    cursor: pointer;
    float: left;
}
.carousel-item .thumb img {
    width: 100%;
    margin: 2px;
}
.carousel-item img {
    width: 100%;    
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
var myCarousel = document.querySelector('#thumbcarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  touch: true
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Product Thumbnail Slider"
Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Bootstrap Product Thumbnail Slider" Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Bootstrap Product Thumbnail Slider"
Bootstrap 4.1.1 Snippet by tieusuquay79