Question

我想在单击图像滑块的右箭头时将图像向左滑动。我无法应用幻灯片左侧动画。当单击右箭头当前图像隐藏并显示下一个图像但不会发生幻灯片动画

＆＃13;

$('#image-content img:first').addClass('active');
        //ON CLICK ON RIGHT ARROW DISPLAY NEXT
        currentIndex = $('#image-content img').index(this) + 1;
        
        $('.right-arrow').on('click', function() {
        if($('#image-content img.active').index() < ($('#image-content img').length - 1)){
        currentIndex++;
        $('#image-content img.active').animate({width: 'toggle'}).removeClass('active').next('#image-content img').addClass('active');     
        }
        else {
        currentIndex = 1;
        $("#image-content img").removeClass("active");
        $('#image-content img').eq(currentIndex - 1).addClass('active');          
        }
        });
        //ON CLICK LEFT ARROW DISPLAY PREVIOUS IMAGE
    
       $('.left-arrow').on('click', function() {
        if ($('#image-content img.active').index() > 0) {
        currentIndex--;
        $('#image-content img.active').removeClass('active').prev('#image-content img').addClass('active');
        } else {
        currentIndex = $('#image-content img').length;
        $("#image-content img").removeClass("active");
        $('#image-content img').eq(currentIndex - 1).addClass('active')
        }
        });

＆＃13;

#image-content{
    height: 400px;
    width: 100%;
}
#image-content img{
    position: absolute;
    height: auto;
    width: auto;
    max-height: 380px;
    max-width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none
}
#image-content img.active{
    display: block
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
                <div class="col-1 text-right nav-direction">
                   <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/136304-200.png" class="img-fluid left-arrow" alt="">
                </div> 
                  <div class="col-9 text-center">
                    <!-- Main Images -->  
                    <div id="image-content"> 
                     <!--(start foreach)-->
                       <img src="http://letssunday.com/assets/upload/product/5aa63613ea17a107011.jpg" class="img-fluid"> 
                       <img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dc88ad258479.jpeg" class="img-fluid"> 
                       <img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" class="img-fluid"> 
                       <img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" class="img-fluid"> 
                       <img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" class="img-fluid"> 
                     <!-- (end foreach)-->
                    </div> 
                    <!-- End main Images-->  
  
                  </div>   
                   <div class="col-1 text-left nav-direction">
                   <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png" class="img-fluid right-arrow" alt="">
                </div> 
              </div>

＆＃13;

我只想把它滑到左侧。目前正常工作，除了动画。请帮助

Answer 1

还有另一种方式。使用bootstrap：

＆＃13;

div#myCarousel, div#myCarousel > div.carousel-inner, div#myCarousel > div.carousel-inner > div.item{
 /* selector to edit divs */
}
div#myCarousel > div.carousel-inner > div.item > img{
 /* selector to edit images */
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Carousel Example</h2>  
  <div class="row">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" alt="Los Angeles" style="width:100%;">
      </div>
      <div class="item">
        <img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" alt="Chicago" style="width:100%;">
      </div>
      <div class="item">
        <img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" alt="New york" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
</div>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

它像魅力一样工作

Answer 2

css似乎有效，我认为你的问题就是问题。

＆＃13;

$('#image-content img:first').addClass('active');
        //ON CLICK ON RIGHT ARROW DISPLAY NEXT
        currentIndex = $('#image-content img').index(this) + 1;
        
        $('.right-arrow').on('click', function() {
        if($('#image-content img.active').index() < ($('#image-content img').length - 1)){
        currentIndex++;
        $('#image-content img.active').animate({width: 'toggle'}).removeClass('active').next('#image-content img').addClass('active');     
        }
        else {
        currentIndex = 1;
        $("#image-content img").removeClass("active");
        $('#image-content img').eq(currentIndex - 1).addClass('active');          
        }
        });
        //ON CLICK LEFT ARROW DISPLAY PREVIOUS IMAGE
    
       $('.left-arrow').on('click', function() {
        if ($('#image-content img.active').index() > 0) {
        currentIndex--;
        $('#image-content img.active').removeClass('active').prev('#image-content img').addClass('active');
        } else {
        currentIndex = $('#image-content img').length;
        $("#image-content img").removeClass("active");
        $('#image-content img').eq(currentIndex - 1).addClass('active')
        }
        });

＆＃13;

#image-content{
    height: 400px;
    width: 100%;
}
#image-content img{
    position: absolute;
    height: auto;
    width: auto;
    max-height: 380px;
    max-width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none;
    transition: 1s;
}
#image-content img.active{
    display: block;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
                <div class="col-1 text-right nav-direction">
                   <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/136304-200.png" class="img-fluid left-arrow" alt="">
                </div> 
                  <div class="col-9 text-center">
                    <!-- Main Images -->  
                    <div id="image-content"> 
                     <!--(start foreach)-->
                       <img src="http://letssunday.com/assets/upload/product/5aa63613ea17a107011.jpg" class="img-fluid"> 
                       <img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dc88ad258479.jpeg" class="img-fluid"> 
                       <img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" class="img-fluid"> 
                       <img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" class="img-fluid"> 
                       <img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" class="img-fluid"> 
                     <!-- (end foreach)-->
                    </div> 
                    <!-- End main Images-->  
  
                  </div>   
                   <div class="col-1 text-left nav-direction">
                   <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png" class="img-fluid right-arrow" alt="">
                </div> 
              </div>

＆＃13;

幻灯片的最佳选择是将内容从页面外移到内部，而滑动对象则相反。

图像幻灯片不起作用

2 个答案: