"Anirudha Bhowmik autometic slider"
Bootstrap 4.0.0 Snippet by anirudhabhowmik

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="slideshow_wrapper">
<div class="slideshow">
<div class="slide_one slide">
<img src="http://i1.ytimg.com/vi/hP9zimdPXtk/0.jpg" />
</div>
<div class="slide_two slide">
<img src="https://i1.ytimg.com/vi/HiS1-l2xadg/mqdefault.jpg" />
</div>
<div class="slide_three slide">
<img class="slide_img" src="http://i1.ytimg.com/vi/_di83KPJY3s/0.jpg" />
</div>
</div></div></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
.slideshow_wrapper {
width:500px;
height:280px;
overflow: hidden;
}
.slideshow {
width:1500px;
height:280px;
margin: 0 0 0 -1000px;
position: relative;
-webkit-animation-name: slide_animation;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state: running;
}
.slide {
width:500px;
height: 270px;
position:relative;
float:left;
overflow:hidden;
}
.slideshow img{
width:500px; height:270px;
}
@-webkit-keyframes slide_animation {
0% {left:0px;}
10% {left:500px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Black Dashboard
Client or Partners Logo Slider
Timely Login slider
tabbed macbook mockup slider

Questions / Comments: