jQuery предыдущий / следующий слайдер, как отключить предыдущий / следующий на первом / последнем слайде? - PullRequest
0 голосов
/ 22 сентября 2019

Я хочу отключить следующие / предыдущие кнопки в следующих случаях:

отключить предыдущую кнопку, когда первый слайд присутствует в пределах границы;

отключить следующую кнопку, когда анимация достигла последнего слайда;

Другими словами:

на первом пресете слайда внутри секции, я хочу, чтобы слайдер не двигался дальше вправо, и ...

на последнем слайде, присутствующем внутри секции Iхотите, чтобы ползунок не двигался дальше влево

<pre>
   <code>
<div class="AMcarousel" id="carousel-container">                                                                                     
 <div class="left-container prev ">                                                                                      
  <div class="left-btn">                                                                                                 
   <i class="fas  custom-chev fa-chevron-left"></i>                                                                                      
  </div>                                                                                 
 </div>

  <div class="right-container prev ">                                                                                        
   <div class="right-btn">                                                                                               
    <i class="fas  custom-chev fa-chevron-right"></i>                                                                                        
   </div>                                                                                
  </div>


  <div id="slide2" class="slide">                                                                                    
   <div class="hour-table">                                                                                              
    <ul class="hour-list" >                                                                                                  
     <li><a href="#" class="active-btn">Tue 24 Step</a></li>                                                                                                     
     <li><a href="#">Mon 27 Step</a></li>                                                                                                    
     <li><a href="#">Wend 28 Step</a></li>                                                                                                   
    </ul>                                                                                                
   </div>                                                                                
  </div>

  <div id="slide3" class="slide">                                                                                    
   <div class="hour-table">                                                                                              
    <ul class="hour-list" >                                                                                                  
     <li><a href="#" class="active-btn">Tue 24 Step</a></li>                                                                                                     
     <li><a href="#">Mon 27 Step</a></li>                                                                                                    
     <li><a href="#">Wend 28 Step</a></li>                                                                                                   
    </ul>                                                                                                
   </div>                                                                                
  </div>
</div>
   

/ *********** Custom Carousel ********* /

$ (окно) .on ('load', function () {

var Stack = new Array();
var count = 0;

$('img').attr('draggable', false);

$('.TAMcarousel').each(function(){
    carousel(count, this);
    count++;    
});


function carousel(count, TAMcarousel){

Stack[count] = new Array();

$( TAMcarousel ).height($(TAMcarousel).find('#slide3').height());

$(window).resize(function() {
  $( TAMcarousel ).height($(TAMcarousel).find('#slide3').height());
});


$(TAMcarousel).find('.slide').each(function(){
Stack[count].push($(this));
})


var animating=false;

var child = $(TAMcarousel).find(".right-btn");

$(TAMcarousel).find(".right-btn").on('click', moveright);

function moveright(){   

    if(animating)return;
    animating=true;

    // Move the slides
    Stack[count][1].animate({left: '-100%'},
                            {step: function( now, fx )
                            {
                             Stack[count][2].css( "left", 
   ((now+100)+'%'));
                            },done: function()
                            {
                            // move slide references in arrays
                            Stack[count].push(Stack[count][0]); // move 
  first slide to the end
                            Stack[count].shift();//remove first element 
 in array
                            // move actual slides 
                            Stack[count][0].css({left: '-100%'},0);
                            Stack[count][2].css({left: '100%'},0);
                            animating=false;
                            }
                            });
};  

$(TAMcarousel).find(".left-btn").on('click', moveleft);

function moveleft(){

    console.log(Stack[count]);

    if(animating)return;
    animating=true; 

    Stack[count][1].animate({left: '100%'},
                            {step: function( now, fx )
                            {
                             Stack[count][0].css( "left", ((now- 
100)+'%'));
                            }
                            ,done: function()
                            {
                            // move slide references in arrays
                            Stack[count].unshift(Stack[count] 
[((Stack[count].length)-1)]); // copy last slide to the start
                            Stack[count].pop();//remove first slide in 
array
                            // move actual slides 
                            Stack[count][0].animate({left: '-100%'},0);
                            Stack[count][2].animate({left: '100%'},0);
                            animating=false;
                            }
                            });
};  


// cheack for display none the left chevron button 

// End cheack for display none the left chevron button



} /* END of carousel function */


}); /* END of window onload */
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...