Как добавить следующие и предыдущие элементы управления в слайд-шоу

Question

Я по-прежнему относительно новый для кодирования в целом. Мне нужно создать слайдер с элементами управления, но у меня возникают проблемы с написанием сценария для следующей и предыдущей кнопки. Я почти не знаю.

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

Я ценю помощь, спасибо!

Answer 1

Я написали код для следующих и предыдущих кнопок, пожалуйста, проверьте его. Код для следующей кнопки довольно прост. Но код для отображения предыдущего элемента немного сложнее.

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>