JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<ul class="mf1_ui" style="width: 3355.582507916454px; left: 0px;">
<li><img src="http://farm6.staticflickr.com/5333/9509968984_39f271e72e_m.jpg" alt="" class="mf1_f30_li" style="height: 88px;"></li>
<li><img src="http://farm8.staticflickr.com/7320/9507172741_b869095bb1_m.jpg" alt="" class="mf1_f29_li" style="height: 88px;"></li>
<li><img src="http://farm6.staticflickr.com/5328/9507168757_22b6b7fc4c_m.jpg" alt="" class="mf1_f28_li" style="height: 88px;"></li>
<li><img src="http://farm3.staticflickr.com/2830/9509968588_b11cc4d925_m.jpg" alt="" class="mf1_f27_li" style="height: 88px;"></li>
<li><img src="http://farm4.staticflickr.com/3758/9509964156_684f190b8a_m.jpg" alt="" class="mf1_f25_li" style="height: 88px;"></li>
<li><img src="http://farm8.staticflickr.com/7433/9509965790_b6103e5431_m.jpg" alt="" class="mf1_f24_li" style="height: 88px;"></li>
<li><img src="http://farm4.staticflickr.com/3778/9509963902_af7174270c_m.jpg" alt="" class="mf1_f22_li" style="height: 88px;"></li>
<li><img src="http://farm3.staticflickr.com/2834/9507172221_0a9061158e_m.jpg" alt="" class="mf1_f18_li" style="height: 88px;"></li>
<li><img src="http://farm4.staticflickr.com/3687/9507172565_4c16634337_m.jpg" alt="" class="mf1_f23_li" style="height:...
CSS
.wrapper{
overflow: hidden;
position: relative;
width: 288px;
height:108px;
left: 100px;
top: 100px;
}
ul{
position: relative;
list-style: none;
margin: 0;
padding: 0;
z-index: 1;
float: left;
height: 100px;
}
li{
float: left;
height: 88px;
padding: 2px 1px;
}
ul li:first-child {
padding-left: 0;
}
.previous{
width:20px;
height:20px;
position: absolute;
left:0px;
top:38px;
background-color:black;
z-index: 2;
cursor:pointer;
}
.next{
width:20px;
height:20px;
position: absolute;
right:0px;
top:38px;
background-color:black;
z-index: 2;
cursor:pointer;
}
JavaScript
var index = 0;
if(index==0){
$( '.mf1_ui li:eq('+($( '.mf1_ui li').size()-1)+')' ).hide();
$( '.mf1_ui li img:eq('+(index+1)+')' ).animate({
width: ($(".mf1_ui li img").width() + 20)+"px",
height: "108px"
}, {
duration: 100,
step: function( now, fx ){
}
});
}
$('.next').click(function(){
var photoWidth = parseInt($(".mf1_ui li:eq("+index+")").css("width"),10);
if(index != 0) photoWidth += 2;
console.log(($( '.mf1_ui li').size()-1));
console.log(index);
if(index < ($( '.mf1_ui li').size()-2)){
$( '.mf1_ui' ).animate({
left: "-="+photoWidth+"px"
}, {
duration: 1000,
queue : false,
step: function( now, fx ){
}
});
$( '.mf1_ui li img:eq('+(index+1)+')' ).animate({
width: ($(".mf1_ui li img").width() - 20)+"px",
height: "88px"
}, {
duration: 1000,
step: function( now, fx ){
}
});
$( '.mf1_ui li img:eq('+(index+2)+')' ).animate({
width: ($(".mf1_ui li img").width() + 20)+"px",
height: "108px"
}, {
duration: 1000,
step: function( now, fx ){
}
});
index++;
}
});
$('.previous').click(function(){
var photoWidth = parseInt($(".mf1_ui li:eq("+(index - 1)+")").css("width"),10);
if(index != 0) photoWidth += 2;
if(parseInt($(".mf1_ui").css("left"),10) <= 0){
$( '.mf1_ui' ).animate({
left: "+="+photoWidth+"px"
}, {
duration: 1000,
queue : false,
step: function( now, fx ){
}
});
$( '.mf1_ui li img:eq('+(index+1)+')' ).animate({
width: ($(".mf1_ui li img").width() - 20)+"px",
height: "88px"
}, {
duration: 1000,
step: function( now, fx ){
}
});
$( '.mf1_ui li img:eq('+(index)+')' ).animate({
width: ($(".mf1_ui li img").width()...