"Mak nyus"
Bootstrap 3.3.0 Snippet by okebro

Post to Facebook Tweet this

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 ---------->
<body>
<!-- Add or remove "with-glare" class. Removing the glare makes the screen interactive -->
<div class="css-mb with-glare">
<div class="mb-display-position">
<div class="mb-display">
<div class="mb-screen-position">
<div class="mb-screen">
<!-- Image -->
<div class="container">
<div id="fadeSlider" class="sliderWrapper">
<div class="slider">
<div class="slide"><img src="http://rumart.weebly.com/files/theme/001.jpg"></div>
<div class="slide"><img src="http://rumart.weebly.com/files/theme/002.jpg"></div>
<div class="slide"><img src="http://rumart.weebly.com/files/theme/003.jpg"></div>
<div class="slide"><img src="http://rumart.weebly.com/files/theme/004.jpg"></div>
<div class="slide"><img src="http://rumart.weebly.com/files/theme/005.jpg"></div>
<div class="slide"><img src="http://rumart.weebly.com/files/theme/006.jpg"></div>
</div>
</div>
</div>
<!-- <Image -->
</div>
</div>
</div>
</div>
<div class="mb-body"></div>
<div class="mb-bottom-cover"></div>
</div>
<!-- Javascript -->
<script src="js/slider.js"></script>
<script>
var fadeSlider = new slider('#fadeSlider', {transition: {effect: 'fadeIn', easing: 'linear'}});
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
.sliderWrapper
{
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
left: 0;
right: 0;
}
.sliderWrapper .slider
{
background: #aaa;
overflow: hidden;
height: 100%;
position: relative;
width: 100%;
}
.sliderWrapper .slider .slide
{
display: none;
height: 100%;
position: absolute;
width: 100%;
}
.sliderWrapper .slider .slide img { width: 100%; height: 100%; }
.sliderWrapper .slider-directions .slider-directions-prev,
.sliderWrapper .slider-directions .slider-directions-next
{
cursor: pointer;
background: #eee;
color: #333;
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
function slider(slideIdentifier, custom_options){
/**
* Available options
*/
this.options_default = {
classes: {
navigation: 'slider-navigation',
navigationItem: 'slider-navigation-item',
direction: 'slider-directions',
directionPrev: 'slider-directions-prev',
directionNext: 'slider-directions-next',
slider: 'slider',
slide: 'slide',
},
transition: {
duration: 800,
effect: 'slideInHorizontal',
easing: 'easeInOut'
},
pause: 2000,
autoRun: true,
random: false,
direction: true,
navigation: true
};
this.options = {};
/**
* Data holder for current instance, do not touch
*/
this.data = {
currentSlide: null,
lastSlide: null,
slider: null,
slides: [],
navigation: null,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro BS3

Questions / Comments: