个人中心
gpt4 book ai didi

javascript - Jquery/Bootstrap 3 Slider(移动单个元素)

转载 作者：太空宇宙 更新时间：2023-11-03 17:43:24 24 4
gpt4 key购买 nike

JSFiddle of Problem

我有一个 slider ，它是我从另一篇有非常相似问题的帖子中摘下来的。 slider 的目的是在屏幕上同时显示多个元素，而不是一个。然后它们会一个接一个地移出屏幕，被另一个替换。

示例

1 - 2 - 3 - 4 - 5 - 6 >>> 2 - 3 - 4 - 5 - 6 - 7 >>> 3 - 4 - 5 - 6 - 7 - 8

目前， slider 一次移动整行，而不是只向右/向左滑动一个。任何帮助将不胜感激。

谢谢

html:

<!DOCTYPE html>
<html>
    <head>
    <title> Spotlight Productions  </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="icon" type="image/png" href="img/favicon2.png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,800,700,600,200' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
    <link href = "css/styles.css" rel = "stylesheet">
    </head>
    <body style = "background-color: green">        
        <div class="col-sm-12">
          <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
              <div class="item active">
                <div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
              </div>
              <div class="item">
                <div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div>
              </div>
              <div class="item">
                <div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
              </div>
              <div class="item">
                <div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
              </div>
              <div class="item">
                <div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div>
              </div>
              <div class="item">
                <div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
              </div>
              <div class="item">
                <div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>
              </div>
              <div class="item">
                <div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a></div>
              </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
          </div>
        </div>
    </body>
</html>

CSS

/** Client Slider **/

.carousel-inner .active.left { left: -16%; }
.carousel-inner .next        { left:  16%; }
.carousel-control.left,.carousel-control.right {background-image:none;}

.col-sm-2 {width: 16%;}

Javascript

$(document).ready(function(){
  $('#myCarousel').carousel({
    interval: 2000
  })

  $('.carousel .item').each(function(){
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (var i=0;i<4;i++) {
      next=next.next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }

      next.children(':first-child').clone().appendTo($(this));
    }
  });
});

最佳答案

您以正确的方式开始了 CSS，但错过了一些“100%”的表现。所以在任何地方 bootstrap 使用“100%”定位或转换你只需用你的“16%”替换它:

/** Client Slider **/
.carousel-control.left,.carousel-control.right {background-image:none;}
.col-sm-2 {width: 16%;}

@media all and (transform-3d), (-webkit-transform-3d) {
  #myCarousel .carousel-inner > .item.next,
  #myCarousel .carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(16%, 0, 0);
            transform: translate3d(16%, 0, 0);
  }
  #myCarousel .carousel-inner > .item.prev,
  #myCarousel .carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: translate3d(-16%, 0, 0);
            transform: translate3d(-16%, 0, 0);
  }
  #myCarousel .carousel-inner > .item.next.left,
  #myCarousel .carousel-inner > .item.prev.right,
  #myCarousel .carousel-inner > .item.active {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

#myCarousel .carousel-inner > .active {
  left: 0;
}

#myCarousel .carousel-inner > .next {
  left: 16%;
}
#myCarousel .carousel-inner > .prev {
  left: -16%;
}
#myCarousel .carousel-inner > .next.left,
#myCarousel .carousel-inner > .prev.right {
  left: 0;
}
#myCarousel .carousel-inner > .active.left {
  left: -16%;
}
#myCarousel .carousel-inner > .active.right {
  left: 16%;
}

更新的fiddle

关于javascript - Jquery/Bootstrap 3 Slider(移动单个元素)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28701957/

24 4 0
文章推荐： jquery - 在不影响 dom 的情况下使用 jQuery 向上滑动元素淡入淡出
文章推荐： c# - 复选框上的数据绑定(bind)
文章推荐： c# - 类型的代表，或如何给笨拙的类型更好的名称
文章推荐： python - 调用自身的函数仅返回其调用的第一个结果
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com