Bootstrap Snippet carousel with Next Previous button using HTML CSS 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
<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 ---------->
<!-- Include in Header(ignore if already done) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Include in body -->
<div class="todayTrainings">
                            <h4 class="title2 text-uppercase">Carousel </h4>
                            <div class="control-buttons btn-nextPrev">
                                <a type="button" class="prev-slide" value="Previous Slide"><i class="glyphicon glyphicon-arrow-left"></i></a>
                                <a type="button" class="next-slide" value="Next Slide"><i class="glyphicon glyphicon-arrow-right"></i></a>
                            </div>
                            <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
                                <!-- Wrapper for carousel items -->
                                <div class="carousel-inner">
                                    <div class="active item">
                                       Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
                                    </div>
                                    <div class="item">
                                        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
                                    </div>
                                    <div class="item">
                                        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
                                    </div>
                                </div>
                            </div>
                        </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
.todayTrainings{width:400px; margin:auto; position: relative; overflow: hidden; background: #639636; color: #ffffff; padding: 20px; height: 167px; margin-bottom: 20px}
.btn-nextPrev{position: absolute; right: 7px;  top: 10px; width: 60px; text-align: right;}
.btn-nextPrev a{ cursor:pointer; padding: 5px; border: 1px solid rgba(225, 225, 225, 0.5); color: rgba(225, 225, 225, 0.5)}
.btn-nextPrev a:hover{ border: 1px solid rgba(225, 225, 225, 0.9); color: rgba(225, 225, 225, 0.9)}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
$(document).ready(function () {
            // Cycles to the previous item
            $(".prev-slide").click(function () {
                $("#myCarousel").carousel('prev');
            });
            // Cycles to the next item
            $(".next-slide").click(function () {
                $("#myCarousel").carousel('next');
            });
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"carousel with Next Previous button"
Bootstrap 3.3.0 Snippet by subhash4web

Related: See More

Questions / Comments:

"carousel with Next Previous button" Bootstrap 3.3.0 Snippet by subhash4web

Related: See More

Questions / Comments:

"carousel with Next Previous button"
Bootstrap 3.3.0 Snippet by subhash4web