相关疑难解决方法(0)

我需要制作Bootstrap 3.0 Carousel以显示缩略图幻灯片.我怎样才能做到这一点？这是我正在寻找的图像:

这是Bootstrap 2的一个工作示例,但我需要这个用于Bootstrap 3.0:Bootstrap Thumbnail Slider

如何在Bootstrap 4中实现多项旋转木马？文档提到了多个旋转木马,但没有提到带有多个项目的旋转木马.

另一个问题是关于bootstrap 3 的相同需求(那个问题),但是提出的解决方案不适用于Bootstrap 4.

这篇文章的图片很好地解释了我想要的东西.

甚至更多这个bootply.

如何使用Bootstrap 4实现这一目标？

跳跃的标题和演示说明了一切.Bootstrap 4的新旋转木马没有响应.图像超出了它们的宽高比.

有人知道如何在不对css和html进行重大调整的情况下解决这个问题吗？

.wrapper {
  max-width:200px;
  width:100%;
}

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Third slide">
    </div>
  </div>
</div>
</div>

我正在尝试Twitter bootstrap 3.我是HTML,CSS和Javascript的新手.我有一个我创建的旋转木马,它的代码如下:

<div class="container">
    <div id="myCarousel2" class="carousel slide">
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="row text-center">
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->

                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->

                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->

                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div …

现在我已实现Twitter Bootstrap 3 Carousel显示一个项目,在转换期间,显示下一个元素,所以它看起来像:

 [1]    /transition/   [2]    /transition/   [3]   ...

我必须显示两个项目,转换后显示第二个元素与第三个元素:

[1][2]  /transition/  [2][3]  /transition/  [3][4] ...

甚至有可能实现吗？

我试图active在页面加载时将类应用于两个元素,但Carousel不再起作用.使用以下CSS也不起作用:

.item.active + .item {
  display: block !important;
}

我试图使用bootstrap创建多个项目轮播.我的问题是它将所有3个项目移动到1而不是一个.请在此处查看演示:

http://plnkr.co/edit/Fl0HZaU5x5ZkPEVo87u3?p=preview

  $('#myCarousel').carousel({
    interval: 10000
  })
  console.log($('.item'))
  $('.item').each(function() {

    var next = $(this).next();
    console.log(next);
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
      next.next().children(':first-child').clone().appendTo($(this));
    } else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
  });

我有这个 Bootstrap Carousel，它在桌面视图中每个显示 2 个项目。但是，我想在移动视图中一次显示一个项目。我怎样才能做到这一点？

https://jsfiddle.net/v9t2pz9b/

HTML

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <div class="col-sm-6">
          block1
        </div>
        <div class="col-sm-6">
          block2
        </div>
      </div>
      <div class="item">
        <div class="col-sm-6">
          block3
        </div>
        <div class="col-sm-6">
          block4
        </div>
      </div>

      <div class="item">
        <div class="col-sm-6">
          block5
        </div>
        <div class="col-sm-6">
          block6
        </div>
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" …

试图获得引导程序 4 轮播功能来执行此操作（下图是引导程序 3 变体）

我尝试将其转换为 bootstrap 4。我对它所做的是通过bootstrap 3运行它吗？在html上bootstrap 4 html转换工具，并调整CDN对bootstrap JS和CSS文件的引用。我还用颜色更改了图像引用，以便更容易区分我想要显示的图像。

下面是代码，它没有在一张幻灯片上显示所有 4 个图像

$(document).ready(function() {
    $('#Carousel').carousel({
        interval: 5000
    })
});

body{padding-top:20px;}
.carousel {
    margin-bottom: 0;
    padding: 0 40px 30px 40px;
}
/* The controlsy */
.carousel-control {
	left: -12px;
    height: 40px;
	width: 40px;
    background: none repeat scroll 0 0 #222222;
    border: 4px solid #FFFFFF;
    border-radius: 23px 23px 23px 23px;
    margin-top: 90px;
}
.carousel-control.right {
	right: -12px;
}
/* The …