Добавление предыдущей кнопки в Javascript

Question

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

Если пользователь нажмет на следующую кнопку, он начнет цикл от начала до конца и снова начнет снова, снова и снова, я просто хочу, чтобы prev btn сделал это, но наоборот.

codepen является http://codepen.io/heavymessing/pen/rxVOyN JavaScript:

var Boxlayout = (function() { 

     var $el = $('#bl-main'), 
     $sections = $el.children('section'), 
     // works section 
     $sectionWork = $('#bl-work-section'), 
     // work items 
     $workItems = $('#bl-work-items > li'), 
     // work panels 
     $workPanelsContainer = $('#bl-panel-work-items'), 
     $workPanels = $workPanelsContainer.children('div'), 
     totalWorkPanels = $workPanels.length, 
     // navigating the work panels 
     $nextWorkItem = $workPanelsContainer.find('nav > span.bl-next-work'), 
     $prevWorkItem = $workPanelsContainer.find('nav > span.bl-prev-work'), 
     // if currently navigating the work items 
     isAnimating = false, 
     // close work panel trigger 
     $closeWorkItem = $workPanelsContainer.find('nav > span.close'), 
     transEndEventNames = { 
      'WebkitTransition': 'webkitTransitionEnd', 
      'MozTransition': 'transitionend', 
      'OTransition': 'oTransitionEnd', 
      'msTransition': 'MSTransitionEnd', 
      'transition': 'transitionend' 
     }, 
     // transition end event name 
     transEndEventName = transEndEventNames[Modernizr.prefixed('transition')], 
     // support css transitions 
     supportTransitions = Modernizr.csstransitions; 

     function init() { 
     initEvents(); 
     } 

     function initEvents() { 

     $sections.each(function() { 

      var $section = $(this); 

      // expand the clicked section and scale down the others 
      $section.on('click', function() { 

      if (!$section.data('open')) { 
       $section.data('open', true).addClass('bl-expand bl-expand-top'); 
       $el.addClass('bl-expand-item'); 
      } 

      }).find('span.close').on('click', function() { 

      // close the expanded section and scale up the others 
      $section.data('open', false).removeClass('bl-expand').on(transEndEventName, function(event) { 
       if (!$(event.target).is('section')) return false; 
       $(this).off(transEndEventName).removeClass('bl-expand-top'); 
      }); 

      if (!supportTransitions) { 
       $section.removeClass('bl-expand-top'); 
      } 

      $el.removeClass('bl-expand-item'); 

      return false; 

      }); 

     }); 

     // clicking on a work item: the current section scales down and the respective work panel slides up 
     $workItems.on('click', function(event) { 

      // scale down main section 
      $sectionWork.addClass('bl-scale-down'); 

      // show panel for this work item 
      $workPanelsContainer.addClass('bl-panel-items-show'); 

      var $panel = $workPanelsContainer.find("[data-panel='" + $(this).data('panel') + "']"); 
      currentWorkPanel = $panel.index(); 
      $panel.addClass('bl-show-work'); 

      return false; 

     }); 

     // navigating the work items: current work panel scales down and the next work panel slides up 
     $nextWorkItem.on('click', function(event) { 

      if (isAnimating) { 
      return false; 
      } 
      isAnimating = true; 

      var $currentPanel = $workPanels.eq(currentWorkPanel); 
      currentWorkPanel = currentWorkPanel < totalWorkPanels - 1 ? currentWorkPanel + 1 : 0; 
      var $nextPanel = $workPanels.eq(currentWorkPanel); 

      $currentPanel.removeClass('bl-show-work').addClass('bl-hide-current-work').on(transEndEventName, function(event) { 
      if (!$(event.target).is('div')) return false; 
      $(this).off(transEndEventName).removeClass('bl-hide-current-work'); 
      isAnimating = false; 
      }); 

      if (!supportTransitions) { 
      $currentPanel.removeClass('bl-hide-current-work'); 
      isAnimating = false; 
      } 

      $nextPanel.addClass('bl-show-work'); 

      return false; 

     }); 

     // navigating the work items: current work panel scales down and the previous work panel slides up 
     $prevWorkItem.on('click', function(event) { 

      if (isAnimating) { 
      return false; 
      } 
      isAnimating = true; 

      var $currentPanel = $workPanels.eq(currentWorkPanel); 
      currentWorkPanel = currentWorkPanel > 0 ? currentWorkPanel - 1 : 8; // edit this number to your total number of panels -1 
      var $prevPanel = $workPanels.eq(currentWorkPanel); 

      $currentPanel.removeClass('bl-show-work').addClass('bl-hide-current-work').on(transEndEventName, function(event) { 
      if (!$(event.target).is('div')) return false; 
      $(this).off(transEndEventName).removeClass('bl-hide-current-work'); 
      isAnimating = false; 
      }); 

      if (!supportTransitions) { 
      $currentPanel.removeClass('bl-hide-current-work'); 
      isAnimating = false; 
      } 

      $prevPanel.addClass('bl-show-work'); 

      return false; 

     }); 

     // clicking the work panels close button: the current work panel slides down and the section scales up again 
     $closeWorkItem.on('click', function(event) { 

      // scale up main section 
      $sectionWork.removeClass('bl-scale-down'); 
      $workPanelsContainer.removeClass('bl-panel-items-show'); 
      $workPanels.eq(currentWorkPanel).removeClass('bl-show-work'); 

      return false; 

     }); 

     } 

     return { 
     init: init 
     }; 

    })(); 

HTML-:

 <body> 
     <div class="container"> 
      <div id="bl-main"> 
      <section> 

       <div class="bl-content"> 
       <h2>My Works</h2> 
       <p>Mung bean maize dandelion sea lettuce catsear bunya nuts ricebean tatsoi caulie horseradish pea.</p> 
       <ul id="bl-work-items"> 
        <li data-panel="panel-1"> 
        <a href="#"><img src="http://lorempixel.com/g/400/300/abstract/" /></a> 
        </li> 
        <li data-panel="panel-2"> 
        <a href="#"><img src="http://lorempixel.com/400/300/" /></a> 
        </li> 
        <li data-panel="panel-3"> 
        <a href="#"><img src="http://lorempixel.com/g/400/300/" /></a> 
        </li> 
        <li data-panel="panel-4"> 
        <a href="#"><img src="http://lorempixel.com/400/300/sports/" /></a> 
        </li> 
       </ul> 
       <p>Illustrations by <a href="http://dribbble.com/isaac317/click">Isaac Montemayor</a></p> 
       </div> 
      </section> 


      <!-- Panel items for the works --> 
      <div class="bl-panel-items" id="bl-panel-work-items"> 
       <div data-panel="panel-1"> 
       <div> 
        <img src="http://lorempixel.com/g/400/300/abstract/" /> 
        <h3>Fixie bespoke</h3> 
        <p>Iphone artisan direct trade ethical Austin. Fixie bespoke banh mi ugh, deep v vinyl hashtag. Tumblr gentrify keffiyeh pop-up iphone twee biodiesel. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. 
        Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p> 
       </div> 
       </div> 
       <div data-panel="panel-2"> 
       <div> 
        <img src="http://lorempixel.com/400/300/" /> 
        <h3>Chillwave mustache</h3> 
        <p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats 
        irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p> 
       </div> 
       </div> 
       <div data-panel="panel-3"> 
       <div> 
        <img src="http://lorempixel.com/g/400/300/" /> 
        <h3>Austin hella</h3> 
        <p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin 
        craft beer ugh chambray.</p> 
       </div> 
       </div> 
       <div data-panel="panel-4"> 
       <div> 
        <img src="http://lorempixel.com/400/300/sports/" /> 
        <h3>Brooklyn dreamcatcher</h3> 
        <p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland 
        pug selvage flannel seitan tousled mcsweeney's.</p> 
       </div> 
       </div> 
       <nav> 
       <span class="bl-prev-work">&lt; Previous Project</span> 
       <span class="bl-next-work">Next Project &gt;</span> 
       <span class="close fa fa-close"></span> 
       </nav> 
      </div> 

      </div> 
     </div> 
     <!-- /container --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script src="js/boxlayout.js"></script> 
     <script> 
      $(function() { 
        Boxlayout.init(); 
       }); 
     </script> 
     <script src="http://tympanus.net/codrops/adpacks/csscustom.js"></script> 
     <script src="http://tympanus.net/codrops/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script> 
     </body> 

     </html> 

Благодаря

Answer 1

Вы должны заметить эту строку: currentWorkPanel = currentWorkPanel > 0 ? currentWorkPanel - 1 : 8; // edit this number to your total number of panels -1

Как комментарий говорит вам, следует изменить 8 к 4 (number of your items) - 1 = 3

Итак, наконец, вы должны получить это:

currentWorkPanel = currentWorkPanel > 0 ? currentWorkPanel - 1 : 3;

UPDATE:

чистого раствора whould будет рассчитать конечное число в зависимости от общего количества элементов COUNT с помощью переменной totalWorkPanels:

currentWorkPanel = currentWorkPanel > 0 ? currentWorkPanel - 1 : totalWorkPanels-1;