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>
<script src="http://rlexpert.ru/plugins/content/jw_sig/jw_sig/includes/js/jquery_fancybox/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="http://rlexpert.ru/plugins/content/jw_sig/jw_sig/includes/js/jquery_fancybox/fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<div id="tb_slider">
<img src="http://rlexpert.ru/templates/real/images/gray_arrow_left.png" id="tb_arrow_left" />
<div id="tb_lic_slider">
<ul>
<li><a class="grouped_elements" rel="group1" href="http://rlexpert.ru/images/lic/1_big.jpg"><img src="http://rlexpert.ru/images/lic/1_small.jpg" alt="" /></a></li>
<li><a class="grouped_elements" rel="group1" href="http://rlexpert.ru/images/lic/2_big.jpg"><img src="http://rlexpert.ru/images/lic/2_small.jpg" alt="" /></a></li>
<li><a class="grouped_elements" rel="group1" href="http://rlexpert.ru/images/lic/3_big.jpg"><img src="http://rlexpert.ru/images/lic/3_small.jpg" alt="" /></a></li>
<li><a class="grouped_elements" rel="group1" href="http://rlexpert.ru/images/lic/4_big.jpg"><img src="http://rlexpert.ru/images/lic/4_small.jpg" alt="" /></a></li>
<li><a class="grouped_elements" rel="group1" href="http://rlexpert.ru/images/lic/5_big.jpg"><img src="http://rlexpert.ru/images/lic/5_small.jpg" alt="" /></a></li>
<li><a class="grouped_elements" rel="group1" href="http://rlexpert.ru/images/lic/6_big.jpg"><img src="http://rlexpert.ru/images/lic/6_small.jpg" alt="" /></a></li>
<li><a class="grouped_elements" rel="group1" href="http://rlexpert.ru/images/lic/7_big.jpg"><img src="http://rlexpert.ru/images/lic/7_small.jpg" alt="" /></a></li>
...CSS
body {
width:940px;
}
#tb_slider {
width: 940px;
height: 350px;
display: inline-block;
vertical-align: top;
background: #f3f3f3;
}
#tb_lic_slider {
position: absolute;
top: 25px;
left: 45px;
width: 825px;
height: 280px;
overflow: hidden;
}
#tb_slider {
position: relative;
}
#tb_lic_slider li {
list-style: none;
height: 250px;
display:inline-block;
margin-left: 30px;
}
#tb_arrow_left,#tb_arrow_right {
position: absolute;
top: 130px;
cursor:pointer;
}
#tb_arrow_left {
left: 20px;
}
#tb_arrow_right {
right: 20px;
}
.gray_p2 {
font-size: 14px;
color: #58585A;
margin-bottom: 15px;
margin-left: 10px;
}
.tb_red {
color: rgb(231, 31, 31);
font-size: 22px;
margin: 10px 10px;
font-style: italic;
font-weight: bold;
text-align: center;
}
p.it {
font-style: italic;
}
.tb_acc_head {
margin-top: 30px;
margin-bottom: 20px;
font-size: 20px;
font-style: italic;
background: rgb(233, 239, 245);
z-index: 1;
position: relative;
display: inline-block;
padding-right: 10px;
}
#tb_acc_head_holder {
position: relative;
}
.tb_acc_border {
height: 0px;
width: 100%;
position: absolute;
top: 42px;
border-top: 1px solid #d2d7dd;
}
#tb_acc {
width: 940px;
height: 110px;
margin-bottom: 20px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.8);
-moz-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.8);
box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.8);
margin-top: 10px;
display: table;
}
.tb_acc_inner {
height: 110px;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
width: 145px;
}
.tb_acc_inner img {
max-width: 140px;
height: auto;
max-height: 70px;
display: block;
margin: 0 auto;
}
.tb_acc_inner p {
text-align: center;
font-size: 13px;
letter-spacing: -0.21px;
color: #58585A;
margin-top: 7px;
}
.tb_acc_inner.auda {
position: relative;
...JavaScript
$("#tb_lic_slider ul").carouFredSel({
width : 825,
items : 2,
scroll : 1,
auto : {
duration : 1000,
timeoutDuration: 10000,
pauseOnHover: true
},
prev : {
button : "#tb_arrow_left",
key : "left"
},
next : {
button : "#tb_arrow_right",
key : "right"
},
});
$("#tb_lic_slider a").fancybox({});