How to add next and prev controls to a slideshow

Question

I'm still relative new to coding in general. I need to create a slider with controls but I'm having problems writing the script for the next and previous button. I'm pretty much clueless.

  $(function () { $('#slideshow .show').hide(); // hide all slides $('#slideshow .show:first-child').show(); // show first slide setInterval(function () { $('#slideshow .show:first-child').fadeOut(0) .next('.show').fadeIn(1500) .end().appendTo('#slideshow'); }, 8500); // slide duration $(".control_next").click( //Not sure what to write here for the slider to fade to next slider ); $(".control_prev").click( //Not sure what to write here for the slider to fade to previous slider ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slideshow"> <div class="show"> <div class="slidertext"> <span style="color:#007E5C; font-weight:800;">hello</span> <p>Lorem Ipsum</p> </div> <div class="textbg"></div> <figure class="fixedratio"></figure> </div> <div class="show"> <div class="slidertext"> <span style="color:#007E5C; font-weight:800;">hello</span> <p>Lorem Ipsum</p> </div> <div class="textbg2"></div> <figure class="fixedratio2"></figure> </div> <div class="show"> <div class="slidertext"> <span style="color:#007E5C; font-weight:800;">hello</span> <p>Lorem Ipsum</p> </div> <div class="textbg3"></div> <figure class="fixedratio3"></figure> </div> </div> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> 

I appreciate all help, thank you!

Answer 1

I have written code for next and previous buttons please check it. Code for the next button is pretty easy. But the code for displaying the previous element is the little bit tricky.

 var slideUpdating = false; $(function () { $('#slideshow .show').hide(); // hide all slides $('#slideshow .show:first-child').show(); // show first slide setInterval( function () { if (slideUpdating) { return; } $('#slideshow .show:first-child') .fadeOut(0) .next('.show').fadeIn(1500) .end().appendTo('#slideshow'); }, 8500 ); // slide duration $(".control_next").click( function () { if(slideUpdating) return; slideUpdating = true; $('#slideshow .show:first-child') .fadeOut(0) .next('.show').fadeIn(1500, function () { slideUpdating = false; }) .end().appendTo('#slideshow'); }); $(".control_prev").click( function () { if(slideUpdating) return; slideUpdating = true; $('#slideshow .show:first-child') .fadeOut(0) .siblings(':last').fadeIn(1500, function () { $("#slideshow .show:visible").prependTo("#slideshow"); slideUpdating = false; }); } ); }); 

 .active { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slideshow"> <div class="show"> <div class="slidertext"> <span style="color:#007E5C; font-weight:800;">hello</span> <p>Lorem Ipsum1</p> </div> <div class="textbg"></div> <figure class="fixedratio"></figure> </div> <div class="show"> <div class="slidertext"> <span style="color:#007E5C; font-weight:800;">hello</span> <p>Lorem Ipsum2</p> </div> <div class="textbg2"></div> <figure class="fixedratio2"></figure> </div> <div class="show"> <div class="slidertext"> <span style="color:#007E5C; font-weight:800;">hello</span> <p>Lorem Ipsum3</p> </div> <div class="textbg3"></div> <figure class="fixedratio3"></figure> </div> </div> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a>