Bootstrap Snippet One by one carousel with indicators & controler using HTML CSS Bootstrap jQuery

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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
    <div class="col-md-12">
               
                    <div id="myCarousel" class="carousel fdi-Carousel slide">
                     <!-- Carousel items -->
                        <div class="carousel fdi-Carousel slide" id="theCarousel" data-interval="0">
                            <div class="carousel-inner onebyone-carosel">
                                
                                
                                <div class="item active">
                                    <div class="col-md-4">
                                        <a href="#"><img src="http://placehold.it/380x237" class="img-responsive center-block"></a>
                                        <div class="text-center">1</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-md-4">
                                        <a href="#"><img src="http://placehold.it/380x237" class="img-responsive center-block"></a>
                                        <div class="text-center">2</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-md-4">
                                        <a href="#"><img src="http://placehold.it/380x237" class="img-responsive center-block"></a>
                                        <div class="text-center">3</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-md-4">
                                        <a href="#"><img src="http://placehold.it/380x237" class="img-responsive center-block"></a>
                                        <div class="text-center">4</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:gray;
}
.carousel-inner.onebyone-carosel { margin: auto; width:100%; }
.onebyone-carosel .active.left { left: -33.33%; }
.onebyone-carosel .active.right { left: 33.33%; }
.onebyone-carosel .next { left: 33.33%; }
.onebyone-carosel .prev { left: -33.33%; }
#myCarousel .col-md-4{
    position: relative;
    min-height: 1px;
    padding-right: 0;
    padding-left: 0;
}
.carousel-control.right {
   background-image:none !important;
   filter:none !important;
}
#myCarousel{
    margin-top:105px;
}
.carousel-control {
    background-color: #cacaca  !important;
    font-size: 1.5em;
    height: 32px;
    line-height: 1.4;
    margin: -55px 2px 0px 1112px;
    padding: 0px 0px;
    width: 32px;
    -webkit-transition: color .2s;
    -moz-transition: color .2s;
    -ms-transition: color .2s;
    -0-transition: color .2s;
    transition: color .2s;
    border-radius: 3px;
    opacity: 1 !important;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function () {
        $('#myCarousel').carousel({
            interval: 10000
        })
        $('.fdi-Carousel .item').each(function () {
            var next = $(this).next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));
            if (next.next().length > 0) {
                next.next().children(':first-child').clone().appendTo($(this));
            }
            else {
                $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
            }
        });
    });
        
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"One by one carousel with indicators & controler"
Bootstrap 3.3.0 Snippet by sakib00123

Related: See More

Questions / Comments:

"One by one carousel with indicators & controler" Bootstrap 3.3.0 Snippet by sakib00123

Related: See More

Questions / Comments:

"One by one carousel with indicators & controler"
Bootstrap 3.3.0 Snippet by sakib00123