JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="slidecontainer">
<div id="slides">
<img src="img/example-slide-1.jpg">
<img src="img/example-slide-2.jpg">
<img src="img/example-slide-3.jpg">
<img src="img/example-slide-4.jpg">
<a href="#" class="slidesjs-previous slidesjs-navigation"><img src="img/arriere.png" /></a>
<a href="#" class="slidesjs-next slidesjs-navigation"><img src="img/next.png" /></i></a>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 400,
height: 275,
navigation:false,
pagination:{
active: true,
effect: "slide"
},
play: {
interval: 4000,
auto: true,
restartDelay: 2000
},
start:1
});
});
</script>
</body>
CSS
<style>
/* Prevents slides from flashing */
#slides {
display:none;
position:relative;
}
#slidecontainer {
width: 400px;
height: 275px;
}
#slides .slidesjs-navigation {
margin-top:3px;
}
#slides .slidesjs-previous {
margin-right: 5px;
float: left;
}
#slides .slidesjs-next {
margin-right: 5px;
float: left;
}
.slidesjs-pagination {
margin: 6px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(img/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
#slides a:link,
#slides a:visited {
color: #333
}
#slides a:hover,
#slides a:active {
color: #9e2020
}
.navbar {
overflow: hidden
}
</style>