Bootstrap Snippet side animate 2 using HTML CSS

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 ---------->
<ul class="my-carousel">
        <li><img src="https://raw.githubusercontent.com/Kunano/js-carousel/master/img/coffee-1.png"/></li>
        <li><img src="https://raw.githubusercontent.com/Kunano/js-carousel/master/img/coffee-2.png"/></li>
        <li>        <img src="https://raw.githubusercontent.com/Kunano/js-carousel/master/img/coffee-3.png"/>   </li>
    </ul>
    <script>
        
        /**
* Simple Encapsulation Class template
*/
(function (root) {
    "use strict";
    /**
     * Common object params
     * @type {Object}
     */
    var common = {
            publicMethods: ['next', 'prev', 'goTo', 'setOptions', 'play', 'stop', 'getEffectsList', 'setEffect'],
            className: 'JsCarousel'
        },
        /**
         * Main constructor
         * @return {Object} - this handle
         */
        Protected = function (handle, options) {
            //main settings
            this.settings = {
                effect: 'carousel',
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
.js-carousel-container{
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 13px -4px rgba(0, 0, 0, .65);
}
.js-carousel-container:before,
.js-carousel-container:after{
    position: absolute;
    z-index: -1;
    bottom: 65px;
    left: 0;
    width: 50%;
    height: 20px;
    content: '';
    border-radius: 100%;
    box-shadow: 0 67px 20px -3px rgba(40, 40, 40, .63);
}
.js-carousel-container:after{
    right: 0;
    left: initial;
    transform: rotateZ(2deg);
}
.js-carousel-container:before{
    transform: rotateZ(-2deg);
}
/*JSCAROUSEL STYLES*/
.js-carousel{
    position: relative;
    z-index: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"side animate 2"
Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"side animate 2" Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"side animate 2"
Bootstrap 3.3.0 Snippet by evarevirus