JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<script src="http://rlexpert.ru/templates/real/javascript/jquery.carouFredSel-6.2.1-packed.js"></script>
<div class="carusel_box">
<div class="list_carousel">
	<ul id="foo2">
        <li><img src="http://rlexpert.ru/templates/real/images/icon1.png" class="li_img"/><span class="li_span">Калькулятор стоймости</span></li>
        <li><img src="http://rlexpert.ru/templates/real/images/icon2.png" class="li_img"/><span class="li_span">Калькулятор износа</span></li>
        <li><img src="http://rlexpert.ru/templates/real/images/icon3.png" class="li_img"/><span class="li_span">Наши акции</span></li>
		<li><img src="http://rlexpert.ru/templates/real/images/icon1.png" class="li_img"/><span class="li_span">Калькулятор стоймости</span></li>
        <li><img src="http://rlexpert.ru/templates/real/images/icon2.png" class="li_img"/><span class="li_span">Калькулятор износа</span></li>
        <li><img src="http://rlexpert.ru/templates/real/images/icon3.png" class="li_img"/><span class="li_span"> Наши акции</span></li>
	</ul>
	<div class="clearfix"></div>
</div>
    <img src="http://rlexpert.ru/templates/real/images/blu_arrow_left.png" class="carusel_arr_left"/>
    <img src="http://rlexpert.ru/templates/real/images/blu_arrow_right.png" class="carusel_arr_right"/>
</div>

CSS

.list_carousel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.list_carousel li {
	font-size: 14px;
    font-family:arial;
	color: #666;
	width: 100px;
	height: 50px;
	padding: 0;
	margin-right: 50px;
    margin-left:10px;
	display: block;
	float: left;
    position:relative;
}
.clearfix {
	float: none;
	clear: both;
}
.li_img{
    position:absolute;
    left:0px;
}
.li_span {
    left:60px;
    position:relative;
    top:10px;
    text-align:left;
    width:40px;
}
.carusel_box {
    padding:5px 30px;
}
.carusel_arr_left {
    position: absolute;
    left: 10px;
    top: 20px;
    cursor: pointer;
}
.carusel_arr_right {
    position: absolute;
    right: 10px;
    top: 20px;
    cursor: pointer;
}
.carusel_box {
position: relative;
width: 480px;
}

JavaScript

$("#foo2").carouFredSel({
	width	: 470,
	items	: 3,
	scroll	: 1,
    auto : {
        duration    : 1000,
        timeoutDuration: 3000,
        pauseOnHover: true
    },
    prev	: {	
		button	: ".carusel_arr_left",
		key		: "left"
	},
	next	: { 
		button	: ".carusel_arr_right",
		key		: "right"
	},
});