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 id="bottom_blocks">
<div class="bottom_block big">
<p class="bottom_block_descr">Наша акредитация</p>
<div class="small_carusel_box">
<div class="small_list_carousel">
<ul id="car1">
<li><img src="http://rlexpert.ru/templates/real/images/Audatex.png" class="li_img"/></li>
<li><img src="http://rlexpert.ru/templates/real/images/Audatex.png" class="li_img"/></li>
<li><img src="http://rlexpert.ru/templates/real/images/Audatex.png" class="li_img"/></li>
<li><img src="http://rlexpert.ru/templates/real/images/Audatex.png" class="li_img"/></li>
</ul>
<div class="clearfix"></div>
</div>
<img src="http://rlexpert.ru/templates/real/images/blu_arrow_left.png" class="small_carusel_arr_left" id="scal1"/>
<img src="http://rlexpert.ru/templates/real/images/blu_arrow_right.png" class="small_carusel_arr_right" id="scar1"/>
</div>
</div>
<div class="bottom_block">
<a href="#">
<img src="http://rlexpert.ru/templates/real/images/bottom_icon1.png" id="bi1"/>
<p class="bottom_block_descr">Книга жалоб</p>
</a>
</div>
<div class="bottom_block big">
<p class="bottom_block_descr">Нам доверяют</p>
<div class="small_carusel_box">
<div class="small_list_carousel">
<ul id="car2">
<li><img src="http://rlexpert.ru/templates/real/images/dhllogo.png" class="li_img"/></li>
<li><img src="http://rlexpert.ru/templates/real/images/dhllogo.png" class="li_img"/></li>
<li><img src="http://rlexpert.ru/templates/real/images/dhllogo.png" class="li_img"/></li>
<li><img src="http://rlexpert.ru/templates/real/images/dhllogo.png" class="li_img"/></li>
</ul>
<div class="clearfix"></div>
</div>
<img...CSS
#bottom_blocks {
height: 120px;
border-top: 1px solid #d1d9e0;
border-bottom: 1px solid #d1d9e0;
width: 940px;
}
.small_list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
height: 50px;
overflow: hidden;
}
.small_list_carousel li {
font-size: 14px;
font-family:arial;
color: #666;
width: 140px;
height: 50px;
padding: 0;
margin-right: 10px;
margin-left: 10px;
display: block;
float: left;
position:relative;
}
.clearfix {
float: none;
clear: both;
}
.li_img{
position:absolute;
left:0px;
}
.small_carusel_box {
padding:5px 20px 5px 27px;
}
.small_carusel_arr_left {
position: absolute;
left: 10px;
top: 20px;
cursor: pointer;
}
.small_carusel_arr_right {
position: absolute;
right: 0px;
top: 20px;
cursor: pointer;
}
.small_carusel_box {
position: relative;
width: 140px;
}
.bottom_block {
display: inline-block;
background: url('http://rlexpert.ru/templates/real/images/gray_border.png') 0 50px no-repeat;
padding: 40px 0px 11px 0px;
width: 115px;
height: 50px;
margin: 0 10px;
position: relative;
}
.bottom_block:first-child {
background:none;
margin: 0 10px 0 0px;
}
.bottom_block.big {
width: 170px;
}
.bottom_block_descr {
position: absolute;
top: 5px;
text-align: center;
width: 100%;
text-indent: 20px;
font-family: arial;
font-style: italic;
font-size: 13px;
color:#000;
}
.bottom_block img {
}
#bi1 {
margin-left: 30px;
}
#bi2 {
margin-left: 27px;
}
#bi3 {
margin-left: 40px;
}
#bi4 {
margin-left: 35px;
}JavaScript
$("#car1").carouFredSel({
width : 140,
items : 1,
scroll : 1,
auto : {
duration : 1000,
timeoutDuration: 3000,
pauseOnHover: true
},
prev : {
button : "#scal1",
key : "left"
},
next : {
button : "#scar1",
key : "right"
},
});
$("#car2").carouFredSel({
width : 140,
items : 1,
scroll : 1,
auto : {
duration : 1000,
timeoutDuration: 3000,
pauseOnHover: true
},
prev : {
button : "#scal2",
key : "left"
},
next : {
button : "#scar2",
key : "right"
},
});