标签: carousel

我需要自定义BS轮播,以使图像大小响应核心.我需要旋转木马适应活动幻灯片图像初始高度的高度.当视口宽于图像时,图像/幻灯片应向上扩展,但保持比例.当视口较小时,图像应缩小但保持比例.

我尝试了很多变化,但找不到合适的解决方案.

我希望有些css/js专家可以帮助我.

这是我目前的标记:

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-pause="true">
      <!-- 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>
      <div class="carousel-inner">
        <div class="item active"><!--data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide"-->
          <img src="MediaContent/Images/Unika%20kobbertryk%201.jpg" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
              <p><a class="btn btn-lg …

嗨,伙计们我正在使用bootstrapcarousal并且图像高度和宽度有问题.即使我在img属性中定义它仍然显示为原始分辨率,以下是我正在使用的代码

<div class="col-md-6 col-sm-6">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/650x450/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>
</div>

这是演示.

无论原始分辨率如何,我该怎么做才能以一定的高度和宽度填充图像.

这是关于@StrangeElement对这个老问题的回答的后续问题:Twitter Bootstrap Carousel插件可以在幻灯片转换时淡入淡出

我尝试了@ StrangeElement的mod到bootstrap.css,我几乎让它工作了.问题是,当活动图像淡出时,它会淡化为白色,然后下一个图像将弹出而没有淡入淡出的动画.我可能会在这里失踪什么？

这是我正在使用的例子:

http://planetofsoundonline.com/beta/index.php

任何类型的指针将非常感激.谢谢!

我想使用bootstrap的轮播来动态滚动内容(例如,搜索结果).所以,我不知道会有多少页内容,除非用户点击下一个按钮,否则我不想获取后续页面.

我看了这个问题:带有动态内容的轮播,但我不认为答案适用,因为它似乎建议从数据库服务器端加载所有内容(在这种情况下的图像)并将所有内容作为静态内容返回.

我最好的猜测是拦截按下按钮上的click事件,对搜索结果的下一页进行ajax调用,在ajax调用返回时动态更新页面,然后为旋转木马生成幻灯片事件.但是这些都没有在引导页面上真正讨论或记录.欢迎任何想法.

我已经阅读了几乎关于自举旋转木马的所有线程,但还没有找到我的问题的答案.我在旋转木马上添加了两个控制按钮(播放/暂停),但每个按钮都会从默认/第一张幻灯片中激活该功能.我希望能够在点击事件发生时暂停当前幻灯片并从当前幻灯片播放.

这是我的代码:

<script src="/_catalogs/masterpage/UHN/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $('.carousel').carousel({ interval:6000 });  

        $('#playButton').click(function () {
            $('#homeCarousel').carousel('cycle');
        });
        $('#pauseButton').click(function () {
            $('#homeCarousel').carousel('pause');
        });
    });

</script>

这两个控件:

<!--Carousel controls -->
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>

我有这个使用bootstrap 3显示幻灯片图像的html:

<div class="col-sm-8">



            <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>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                <li data-target="#myCarousel" data-slide-to="4"></li>
                <li data-target="#myCarousel" data-slide-to="5"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                {% for p in posts %}
                    {% if forloop.counter == 1 %}
                    <div class="item active">
                    {% else %}
                    <div class="item">
                   {% endif %}

                    {% if p.headimage %}
                    <img src="{{ p.headimage.url }}" alt="Image" width="460" height="345">
                     {% endif %}
                      <div …

我想要一个水平的ScrollView,启用了一个特殊要求的分页:每个页面(或卡)是容器宽度的90%.剩下的10%应该是下一页的预览.

可以使用ScrollView执行此操作吗？我能以某种方式指定分页的宽度而不是取容器的宽度吗？

(图像来自这个类似的问题:React Native Card Carousel视图？)

是否有可用于Carousel动画图像的库？

我找到了http://www.androidviews.net/2012/10/android-coverflow/ ; https://code.google.com/p/android-coverflow/但这个库/代码段使用扩展了gallay(在API级别16(4.1.2)中不推荐使用Gallery类),那么是否有任何(现代)库？也许与毕加索结合？

我目前正在使用Owl Carousel在桌面/笔记本电脑大小的设备上展示一个画廊.但是在较小的设备上,我想禁用该插件并将每个图像堆叠在一起.

这可能吗？我知道你可以调整猫头鹰旋转木马在某些断点处在屏幕上显示一定数量的图像.但我希望能够完全关闭它,删除所有的div等.

这是我目前正在使用的笔:http://codepen.io/abbasinho/pen/razXdN

HTML:

<div id="carousel">
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg);">
  </div>
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg);">
  </div>
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg);">
  </div>
</div>

CSS:

#carousel {
  width: 100%;
  height: 500px;
}

.carousel-item {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

jQuery的:

$("#carousel").owlCarousel({
      navigation : true,
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem: true
});

感谢任何帮助!

我用Slick创建了一个垂直旋转木马.我在设计上做了一些改变,除了当第一个元素在旋转木马的视图中时,一切都按照我想要的方式工作.在我的轮播中有4个项目可见但是当第一个元素位于四个项目中的第一个时,则在轮播的布局中发生了错误.
我的网址是 -
http://www.w3karigar.com/mobile/game2/
您可以在我的网站上看到该代码.但我在下面列了几个 -

    $('#games-carousel').slick({
        dots: false,
        arrows: false,
        infinite: true,
        speed: 200,
        slidesToShow: 4,
        vertical: true,
        verticalSwiping: true,
        swipeToSlide: true
    });
    $('#games-carousel').slick('setPosition');

#games-carousel .item {
    display: block;
    width: 100%;
    height: 70px;
    opacity: 0.2;
    padding: 1px 0;
    transition: all 0.2s ease-in;
    transform: translate3d(0,0,0);
}
#games-carousel .item .cover, #games-carousel .item .info {
    width: 50%;
    float: left;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
#games-carousel .item .cover {
    padding: 0 7px 0px 5px;
    overflow: visible;
}
#games-carousel .item .cover img …