JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/rhinoslider/js/rhinoslider-1.04.min.js"></script>
<script src="http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/rhinoslider/js/mousewheel.js"></script>
<script src="http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/rhinoslider/js/easing.js"></script>
<div id="page">
<ul id="slider">
<li>
<img src="http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/rhinoslider/img/slider/01.jpg" alt="" />
</li>
<li>
<img src="http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/rhinoslider/img/slider/02.jpg" alt="" />
</li>
<li>
<img src="http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/rhinoslider/img/slider/03.jpg" alt="" />
</li>
<li>
<img src="http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/rhinoslider/img/slider/04.jpg" alt="" />
</li>
<li>
<img src="http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/rhinoslider/img/slider/05.jpg" alt="" />
</li>
</ul>
</div>
CSS
body {
background:#fff
}
/**
* Rhinoslider 1.04
* http://rhinoslider.com/
*
* Copyright 2012: Sebastian Pontow, Rene Maas (http://renemaas.de/)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://rhinoslider.com/license/
*/
.rhino-btn {
background:url(http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/rhinoslider/img/rhinoslider-sprite.png) 0 0 no-repeat;
z-index:10;
width:56px;
height:53px;
display:block;
text-indent:-999%;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
.rhino-prev, .rhino-next {
bottom:-4px;
}
.rhino-prev {
left:-6px;
background-position:-168px 0;
}
.rhino-next {
right:-6px;
background-position:-106px 0;
}
.rhino-prev:hover {
background-position:-168px -53px;
}
.rhino-next:hover {
background-position:-106px -53px;
}
.rhino-toggle {
top:-4px;
left:-6px;
}
.rhino-play {
background-position:0 0;
}
.rhino-play:hover {
background-position:0 -53px;
}
.rhino-pause {
background-position:-56px 0;
}
.rhino-pause:hover {
background-position:-56px -53px;
}
.rhino-container {
position:relative;
}
.rhino-caption {
position:absolute;
background: #000;
display:none;
left:0;
right:0;
top:0;
color:#fff;
padding:10px;
text-align:right;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
.rhino-bullets {
position: absolute;
bottom: -3px;
left: 50%;
margin:0 0 0 -50px;
z-index: 10;
background: #fff;
padding:0;
}
.rhino-bullets:before, .rhino-bullets:after {
position:absolute;
display:block;
left:-16px;
content:' ';
width:16px;
height:26px;
background:url(http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/rhinoslider/img/rhinoslider-sprite.png) -224px 0 no-repeat;
}
.rhino-bullets:after {
left:auto;
right:-16px;
background-position: -240px 0;
}
.rhino-bullets li {
...
JavaScript
$(document).ready(function () {
$('#slider').rhinoslider({
animateActive:true, // Нужно ли анимировать слайд (true, false)
effect: 'shuffle', // Эффект ('none', 'fade', 'slide', 'kick', 'transfer', 'shuffle', 'explode', 'turnOver', 'chewyBars')
easing:'swing', // Тип сглаживания анимации
partDelay:100, // Задержка между анимацией слайдов. Любое целое число
parts:'5,3', // На сколько частей будет разлетаться слайд
shiftValue:'150', // Дистанция между кусочками слайда
showTime:3000, // Задержка между сменой слайда
slideNextDirection:'toRight', // Тип сдвига анимации при клике "Вперёд" ('toLeft', 'toRight', 'toTop', 'toBottom')
slidePrevDirection:'toLeft' // Тип сдвига анимации при клике "Назад" ('toLeft', 'toRight', 'toTop', 'toBottom')
});
});