JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<button id="slider1next" >Next</button>
<li><img src="http://1.bp.blogspot.com/-MF9ADBA2lik/T15wyEfYUVI/AAAAAAAAAe8/SoK0Mrnf9_c/s640/simon-mint-01.jpg"></li>
<li><img src="http://4.bp.blogspot.com/-A7cq7WVmxGY/T15wnWFt9zI/AAAAAAAAAes/Sk1hksmB4b4/s640/girl_cute09.jpg"></li>
<li><img src="http://2.bp.blogspot.com/-tprlo9BMuwE/T15wlXYvcVI/AAAAAAAAAek/8vBomF41eLI/s640/draft_lens8040501module68327511photo_1258065997cute_girl_2.jpg"></li>
<li><img src="http://1.bp.blogspot.com/-sNeme3vh-xU/T15wkbyrQkI/AAAAAAAAAec/Zwr3dr3LXLQ/s640/cute_lovely_girl_146.jpg"></li>
<li><img src="http://4.bp.blogspot.com/-y-A4TWXSMy8/T15wdEsuZLI/AAAAAAAAAeE/BL18FeKv-4w/s640/SuperCuteGirls485250.jpg"></li>
<li><img src="http://1.bp.blogspot.com/-MF9ADBA2lik/T15wyEfYUVI/AAAAAAAAAe8/SoK0Mrnf9_c/s640/simon-mint-01.jpg"></li>
<li><img src="http://2.bp.blogspot.com/-AjFPygq_jdo/T15wRNjiiAI/AAAAAAAAAds/lLDnGGRdqGU/s640/1.1124121600.cute-girl-wilson-met.jpg"></li>
<button id="slider2next" >Prev</button>

CSS

li:not(:nth-of-type(1)){
 display:none;  
}
li{
position:absolute;
right:0px;   
}
img,li{
 width:100%;   
}

JavaScript

$("#slider1next").click(function() {
    var $next = $("li:visible").fadeOut('slow').next('li');

    $next.length ? $next.show() : $("li:first").fadeIn('slow');
});

$("#slider2next").click(function() {
    var $next = $("li:visible").fadeOut('slow').prev('li');
    $next.length ? $next.show() : $("li:last").fadeIn('slow');
});





//other
$(".goLeft").on('click', function () {
                    var i = $(".pointMenu div.active").index();
                                        i = i > $('.pointMenu div').length-1 ? 0 : i-1;
                    $('.pixiSlider figure img').eq(i).addClass('active').siblings('img').removeClass('active');
                                    $('.pointMenu div').eq(i).addClass('active').siblings('div').removeClass('active');
                });

                $(".goRight").on('click', function () {
                    var i = $(".pointMenu div.active").index();
                    i = i >= $('.pointMenu div').length-1 ? 0 : i+1;
                    $('.pointMenu div').eq(i).addClass('active').siblings('div').removeClass('active');
                                    $('.pixiSlider figure img').eq(i).addClass('active').siblings('img').removeClass('active');
                });