Jquery滑块问题 - 禁用最后一张幻灯片上的下一个按钮和第一张幻灯片上的prev按钮

时间:2016-09-22 09:26:31

标签: javascript jquery css slider



$(document).ready(function(){    
  //     if ($(".slick-slide").hasClass('slick-current') ) {
  //         $(".slick-arrow").click(function(){
  //          $(".slick-current .maintoggle").slideUp("slow");
  //        });
  //            }


  $(".nav-next").click(function(){         
    $(".slide.active img").animate({left: "-100%"}, 1000, "linear"); 
    $(".slide.active + div img").animate({left: "0"}, 1000, "linear", function(){


      $(".slide.active").removeClass('active').addClass('prev-slide').delay(1000).next().addClass('active');  
    });        
  });
  $(".nav-prev").click(function(){         
    $(".slide.active img").animate({left: "100%"}, 1000, "linear"); 
    $(".prev-slide img").animate({left: "0"}, 1000, "linear", function(){
      $(".slide.active").removeClass('active').delay(1000).prev().addClass('active');  
    });        
  });

  $('.nav-next').click(function(){
    $('.maintoggle').slideUp();
    setTimeout(function(){
      $('.maintoggle').slideDown();
    }, 1500);
  });
  $('.nav-prev').click(function(){
    $('.maintoggle').slideUp();
    setTimeout(function(){
      $('.maintoggle').slideDown();
    }, 1500);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-main">
  <div class="slider-main">
    <div class="slide active"> 
      <img src="images/1.jpg" class="img-width">
      <div class="maintoggle">
        <div  class="showdiv">
          <div class="row">
            <div class="col-sm-4">
              <h5 class="tggl">1. When something is designed to look beautiful, it tends to work that way, too.</h5>
            </div>
            <div class="col-sm-8">
              <div class="row">
                <div class="col-sm-6">
                  <p>Lorem Ipsum is simply dummy text </p>
                </div>
                <div class="col-sm-6">
                  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="slide"> 
      <img src="images/2.jpg" class="img-width">
      <div class="maintoggle">
        <div  class="showdiv">
          <div class="row">
            <div class="col-sm-4">
              <h5 class="tggl">2. When something is designed to look beautiful, .</h5>
            </div>
            <div class="col-sm-8">
              <div class="row">
                <div class="col-sm-6">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                </div>
                <div class="col-sm-6">
                  <p>It was popularised in the 1960s with the release</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="slide"> 
      <img src="images/3.jpg" class="img-width">
      <div class="maintoggle">
        <div  class="showdiv">
          <div class="row">
            <div class="col-sm-4">
              <h5 class="tggl">3. When something is designed to look beautiful, it tends to work that way, too.</h5>
            </div>
            <div class="col-sm-8">
              <div class="row">
                <div class="col-sm-6">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.  </p>
                </div>
                <div class="col-sm-6">
                  <p>It was popularised in the 1960s with the release of Letraset sheets </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  <div class="section-box">
    <div class="row">
      <div class="col-sm-2 col-xs-12">
        <div id="right-blk">
          <div class="hidebtn">Hide</div>             
          <div class="slide-nav">
            <a class="nav-prev nav-arrow"><i class="fa fa-angle-left"></i></a>
            <span>&nbsp;</span>
            <a class="nav-next nav-arrow"><i class="fa fa-angle-right"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

尝试这样的事情:

@Override
    public ing getChildrenCount(int groupPosition){
         return 1;
    }