标签: bootstrap-carousel

我正在使用自举滑块.

• 在桌面上,它有三个幻灯片,每个幻灯片有4个磁贴

• 在标签上,它们必须是4张幻灯片,每张3张

• 在移动设备上,需要有12个不同的幻灯片

我正在考虑实现这一目标的最有效和最优化的方法.

选项1 - 创建3组不同的滑块.一次只能看到一个

选项2 - 使用jquery检测屏幕宽度,并以编程方式将额外的图块添加为幻灯片,隐藏额外的图块.我想这会非常复杂.

如果有更好的方法来实现这一点,请提供帮助.

我试图通过我自己的旋转木马实现这种效果,旋转木马的左右两侧都有半透明的图像; 但是当我在幻灯片之间移动时,我对自己的项目产生了这种不良影响:这里.

这是我写的HTML代码:

<header class="container"> 
  <div class="row">
  <div id="carousel1" class="carousel slide" data-ride="carousel">  <!--Carousel begin-->
  <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
    <div class="item active">
    <div class="carousel-caption carouselTextBackground">
      <h2>Hangars</h2>
      </div>
    <div class="slideRight hidden-xs">
        <img src="images/carousel-home/Bridge -  1200 by 420.jpg" class="img-responsive">
        </div>
        <div class="slideLeft hidden-xs">      
        <img src="images/carousel-home/Frame - 1200 by 420.jpg" class="img-responsive">
       </div>
    <img src="images/carousel-home/Hangar - 1200 by 420.jpg" alt="First slide image" class="center-block img-responsive">
      </div> <!-- end of item -->
      <div class="item">
      <div class="carousel-caption carouselTextBackground">
      <h2>Bridges</h2>
      </div> …

只是一个简单的问题

当我尝试创建旋转木马时,我注意到许多示例代码是:

<div class="carousel-inner" role="listbox">

在上面的代码中,role ="listbox"有什么作用？请给我一个见解.

如果旋转木马在第一个项目上,如何隐藏左控件,如何在旋转木马位于最后一个项目时隐藏右控件.

我的下面的代码成功地隐藏了控件,但是在页面加载时,就好像旋转木马的第一个项目在中间,用户可以通过左或右控件一直进入.

http://bootply.com/99354

谢谢

我喜欢使用Bootstrap轮播滑块.是否可以在第一张图像中没有活动类的情况下启动滑块？代码使用TYPOSCRIPT设置,我无法将第一项设置为活动.有没有JavaScript的方法？

Thanx寻求帮助

基督教

HTML代码

<div class="carousel slide article-slide" id="myCarousel">
    <div class="carousel-inner cont-slider">
        <div class="item">
          <img class="img-responsive" src="http://placehold.it/800x300/cccccc/ffffff">
        </div>
       <div class="item">
          <img class="img-responsive" src="http://placehold.it/800x300/999999/cccccc">
        </div>
        <div class="item">
          <img class="img-responsive" src="http://placehold.it/800x300/dddddd/333333">
        </div>              
    </div>
</div>

我正在使用引导程序 4.0 版本。我想隐藏第一个项目的左侧控件，并隐藏最后一个项目的右侧控件。我认为使用jQuery可以解决。

左控制将一直隐藏，它只显示在最后一个项目上。右控制将一直显示但隐藏在最后一个项目中。

HTML：

<div id="carousel-1" class="carousel slide" data-ride="carousel">

      <div class="carousel-inner">
        <div class="carousel-item active">
          Slide 1
        </div>
        <div class="carousel-item">
          Slide 2
        </div>
        <div class="carousel-item">
          Slide 3
        </div>
      </div>
      <a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

查询：

$('.carousel').carousel({
    interval: false,
})

function checkitem()
{
    var $this = $('#carousel-1');
    if ($('.carousel-inner .carousel-item:first').hasClass('active')) {
        $this.children('.carousel-control-prev').hide();
    } else if ($('.carousel-inner .carousel-item:last').hasClass('active')) {
        $this.children('.carousel-control-next').hide();
    } else {
        $this.children('.carousel-control').show(); …

我正在尝试在Bootstrap 4 Alpha 6中创建一个垂直方向的旋转木马.我仍然无法弄清楚为什么Bootstrap的人不包括这个方向,但我接近我的解决方案拥有.我似乎在我的CSS中遗漏了一些东西,但似乎无法放置它.

在JSFIDDLE上查看我的演示

我的问题是旋转木马滑梯的非向上流体运动.幻灯片从底部上升,但在结束时不再继续 - 相反消失.

我正在构建这个代码来编译使用BS3执行此操作的旧方法,并尝试尽可能地匹配新的CSS类.这是我的代码,任何帮助解决这个谜团将非常感激.

HTML

<!-- Bootstrap Carousel -->
<div id="testCarousel" class="carousel slide vertical" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#testCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#testCarousel" data-slide-to="1"></li>
        <li data-target="#testCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img class="d-block img-fluid" src="//placehold.it/2500x750" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="//placehold.it/2500x750" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="//placehold.it/2500x750" alt="Third slide">
        </div>
     </div>
</div>

CSS

/* Just for Example Purposes */
body {
  background: #333
} …

我的网站上有一个Bootstrap Carousel.

当用户将鼠标悬停在元素上时#formcontainer,我想暂停旋转木马.当我徘徊时,我想继续旋转木马的循环.第一部分可以正常使用以下代码,但不是第二部分.有人可以帮忙吗？

$(document).ready(function() {
    $('.carousel').carousel({
        interval: 1200,
        pause: "hover"
    });

    $('#formcontainer').hover(function(){
        $("#myCarousel4").carousel('pause');
    });
});