Bootstrap Snippet ruseller- slider 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
<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 ---------->
http://ruseller.com/lessons/les1814/demo/demos/full.html
<div id="owl-demo" class="owl-carousel owl-theme">
          
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
 
</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
/* 
 *  Core Owl Carousel CSS File
 *  v1.15
 */
/* clearfix */
.owl-carousel:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* display none until init */
.owl-carousel{
    display: none;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.owl-carousel .owl-wrapper{
    position: relative;
    display: inline-block;
    -webkit-transform: translate3d(0px, 0px, 0px);
    -webkit-perspective: 1000;
}
.owl-carousel .owl-item{
    float: left;
}
.owl-controlls .owl-page,
.owl-controlls .owl-buttons{
    cursor: pointer;
}
.owl-controlls {
    -webkit-user-select: none;
    -khtml-user-select: none;
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
$(document).ready(function() {
 
  /*
 *  jQuery OwlCarousel v1.15
 *  
 *
 */
// Object.create function
if ( typeof Object.create !== 'function' ) {
    Object.create = function( obj ) {
        function F() {};
        F.prototype = obj;
        return new F();
    };
}
(function( $, window, document, undefined ) {
    
    var Carousel = {
        init :function(options, el){
            var base = this;
            base.options = $.extend({}, $.fn.owlCarousel.options, options);
            var elem = el;
            var $elem = $(el);
            base.$elem = $elem;
            base.baseClass();
            
            //Hide and get Heights
            base.$elem
            .css({opacity: 0,
                "display":"block"})
            base.checkTouch();
            base.support3d();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"ruseller- slider"
Bootstrap 3.3.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"ruseller- slider" Bootstrap 3.3.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"ruseller- slider"
Bootstrap 3.3.0 Snippet by ASDAFF