【问题标题】:Bootstrap carousel vertical animation in jQueryjQuery中的Bootstrap轮播垂直动画
【发布时间】:2015-09-14 21:41:56
【问题描述】:

我想将 CSS 代码转换为 jQuery(Bootstrap carousel animate)。因为我有一个客户想要一个与 IE8 兼容的网站,而转换属性不是。

所以我尝试将 CSS 代码转换为 jQuery,但我是一个真正的菜鸟。

更多,我希望以前的“.item”比新的“.item”稍稍落后

if($(".carousel.vertical").is(".active"))
  $(this).animate({top:0});
});

if($(".carousel.vertical").is(".next"))
  $(this).animate({top:400px});
});

if($(".carousel.vertical").is(".prev"))
  $(this).animate({top:-400px});
});

等等……

【问题讨论】:

    标签: jquery twitter-bootstrap carousel


    【解决方案1】:

    类似这样的:

    var carousel_timer, // timer variable (in case you want to stop the animation)
        $carousel_container, // carousel container in jQuery object
        $carousel_slides; // all slides in jQuery object
    var carousel_activeslide = 0; // current slide (index)
    var carousel_interval = 5000; // time between scrolls
    var carousel_duration = 1000; // animation time
    
    
    function slideCarousel() {
    
      // Animate the current slide
      $carousel_slides.eq(carousel_activeslide).animate({
        'top': '0%'
      }, carousel_duration, function(){
        // Reset previous slide to neutral
        $carousel_slides.removeClass("prev");
    
        // set current slide to previous
        $(this).removeClass("cur").addClass("prev");
    
        // Calculate next slide's index
        carousel_activeslide++;
        if (carousel_activeslide == $carousel_slides.length) {
          // Get the first one to start over again
          carousel_activeslide = 0;
        }
    
        // Put the next slide in position and set it to current
        $carousel_slides.eq(carousel_activeslide).css({'top':'100%'}).removeClass("next").addClass("cur");
    
        // Calculate the new next slide index and put it in place
        var next = ((carousel_activeslide+1)==$carousel_slides.length)? 0: (carousel_activeslide+1);
        $carousel_slides.eq(next).css({'top':'100%'}).addClass("next");
    
        // Set-up the timer for the next slide action
        carousel_timer = setTimeout(slideCarousel, carousel_interval);
      });
      
    
    }
    
    
    $(document).ready(function(){
    
      // Init the carousel
      $carousel_slides = $("#carousel > div");
      
      // Check if there are enough slides to scroll
      if ($carousel_slides.length > 1) {
      
        // set current, previous and next slides
        $carousel_slides.first().addClass("cur");
        $carousel_slides.last().addClass("prev");
        $carousel_slides.eq(carousel_activeslide).next().addClass("next");
        
        // Start the carousel
        slideCarousel();
      }
    
    });
    #carousel {
      position: relative;
      width: 300px;
      height: 100px;
      overflow: hidden;
    }
    
    #carousel > div {
      display: block;
      width: 100%;
      height: 100%;
      z-index: 1;
      position: absolute;
      top: 0%;
    }
    
    #carousel > div.prev {
      z-index: 2;
    }
    #carousel > div.cur {
      z-index: 3;
    }
    #carousel > div.next {
      z-index: 4;
      top: 100%;
    }
    
    .red {
      background-color: red;
    }
    .purple {
      background-color: purple;
    }
    .green {
      background-color: green;
    }
    .yellow {
      background-color: yellow;
    }
    .blue {
      background-color: blue;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
    <div id="carousel">
      <div class="red">Item 1</div>
      <div class="yellow">Item 2</div>
      <div class="green">Item 3</div>
      <div class="blue">Item 4</div>
      <div class="purple">Item 5</div>
    </div>

    【讨论】:

    • 哇是完美的但是如何使用引导属性?
    • 我尝试使用 Bootstrap 中的 HTML 结构和您的代码。但是不兼容。 div id="myCarousel" 中的 HTML 结构
    • 啊,我明白了 :) 您可以用我脚本中的 DIV 替换 #myCarousel,或者:将 #carousel 更改为 #myCarousel 并将所有 .items 上移一层(所以没有轮播-inner-div)
    • 啊 :-) 我必须保留引导 HTML 结构,因为我必须添加指标 :-( 我试图在您的代码中更改它: $carousel_slides = $(".carousel-inner > div") ; 但只有第三项是显示
    • 别忘了更改我的 CSS,所以 #carousel 变成 .carousel-inner
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-04-01
    • 1970-01-01
    • 2018-02-05
    • 2013-08-27
    相关资源
    最近更新 更多