Bootstrap Snippet carousel animate 2 using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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="c-carousel">
  <div class="c-carousel__arrow c-carousel__arrow--left"></div>
  <div class="c-carousel__arrow c-carousel__arrow--right"></div>
  <ul class="c-carousel__slides">
    <li><img src="//unsplash.it/300/450?random=1"/></li>
    <li><img src="//unsplash.it/300/450?random=2"/></li>
    <li><img src="//unsplash.it/300/450?random=3"/></li>
    <li><img src="//unsplash.it/300/450?random=4"/></li>
    <li><img src="//unsplash.it/300/450?random=5"/></li>
    <li><img src="//unsplash.it/300/450?random=6"/></li>
  </ul>
</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 {
  margin: 0;
  background-color: #333;
}
img {
  display: block;
  height: 400px;
  margin-right: 10px;
}
.c-carousel {
  width: 100%;
  position: relative;
  margin-top: 30px;
}
.c-carousel__arrow {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  z-index: 1;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  background-color: white;
}
.c-carousel__arrow--left {
  left: 15px;
}
.c-carousel__arrow--right {
  right: 15px;
}
.c-carousel__slides {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
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
'use strict';
var carousel = function carousel(options) {
    var _carousel = {
        paused: false,
        stopped: false,
        options: {
            speed: 3000,
            acceleration: 5,
            reverse: false,
            selector: '.c-carousel',
            slidesSelector: '.c-carousel__slides',
            leftArrowSelector: '.c-carousel__arrow--left',
            rightArrowSelector: '.c-carousel__arrow--right'
        },
        init: function init() {
            var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
            // Copy options to this.options
            for (var prop in options) {
                if (!options.hasOwnProperty(prop)) break;
                this.options[prop] = options[prop];
            }
            // Cache nodes
            var carousel = document.querySelector(options.selector || this.options.selector);
            var slides = this._slides = carousel.querySelector(this.options.slidesSelector);
            this._leftArrow = carousel.querySelector(this.options.leftArrowSelector);
            this._rightArrow = carousel.querySelector(this.options.rightArrowSelector);
            // Multiply speed value by the number of slides
            this.options.speed = this.options.speed * slides.children.length;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"carousel animate 2"
Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"carousel animate 2" Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"carousel animate 2"
Bootstrap 3.3.0 Snippet by evarevirus