标签: carousel

有人知道如何在弹性滑块中停止自动滑动.因为我已经在我的移动网页中加载了该滑块.当页面打开时,它会滑动到下一个图像,而不会有任何幻灯片或点击事件.所以请帮我停止这个自动幻灯片转换.并且只有在轻触或滑动屏幕时才能使其工作.提前致谢.

这是我的代码..

<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
        $('.flexslider').flexslider();
    });
</script>

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="img1.png"/>
        </li>
        <li>
            <img src="img2.png"/>
        </li>
    </ul>
</div>

我一直在玩自举旋转木马,试图让每张幻灯片显示4列,相应地.事物的响应方面是完美的,但是当最后一张幻灯片滑动时,旋转木马不会回绕到第一张幻灯片.它只是消失了.任何人都可以发现问题吗？

HTML

<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner"> 
    <!-- Slide -->
    <div class="item active">
        <div class="row">
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div …

我的猫头鹰旋转木马包含不同宽度和高度的图片.如何在中间对齐它们 - 水平和垂直？

$("#owl-example").owlCarousel({
  navigation: true
});

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">

<div id="owl-example" class="owl-carousel">
  <div><img src="//placehold.it/120x120/69c/fff/" alt=""></div>
  <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
  <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
  <div><img src="//placehold.it/240x240/fc6/fff/" alt=""></div>
  <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
  <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
  <div><img src="//placehold.it/120x120/69c/fff/" alt=""></div>
</div>

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

我正在寻找一个现成的jQuery插件(免费或付费),这将允许我创建具有触摸支持的"响应式旋转木马".

它应该工作的方式是在站点中间显示当前图像(定义图像的宽度和高度,固定所有图像,垂直居中的图像,旋转木马/滑块的高度不随浏览器宽度而变化),以及部分或完全可见的下一个右边的图像,左边的图像.当浏览器变得越来越大时,会看到越来越多的"剪切"图像,如果浏览器很大,则会完全看到3张照片,而下一张照片将在右侧和之前的左侧显示.图像看起来像一个幻灯片,中间有一个图像,左右可见的其他图像,浏览器窗口允许.

此图显示了此轮播在各种浏览器宽度中应如何表现...最黑暗的框是水平对齐的照片,其外部较轻的框显示不同的浏览器窗口高度:

对于那些看到我正在谈论的问题的人,下一个屏幕显示它应该看起来宽度浏览器窗口宽度1920px,1800px 1600px和1400px.这些是来自整个站点的作物,填满浏览器的整个宽度.

我有一个PHP函数从一个文件夹中抓取旋转木马的图像,并在这些图像上构建旋转木马.我有一个缩略图文件夹和一个主img文件夹.

我的问题是,如何修改此代码或添加内容以识别更多图像文件类型而不仅仅是jpg.我想支持png,gif和jpg.

我的代码如下:

<?php $thumbs = glob("img/thumb/*.jpg"); ?>
    <?php
    if(count($thumbs)) {
      natcasesort($thumbs);
      foreach($thumbs as $thumb) {
      ?>
          <li class="item">
              <a class="fancybox" rel="gallery1" href="img/large/<?php echo basename($thumb) ?>">
                  <img src="<?php echo $thumb ?>" width="100%" alt="" />
              </a>
          </li> 

    <?php
        }} else {
          echo "Sorry, no images to display!";
        }
    ?>

例如,我有3张图像的旋转木马,当旋转木马滑动时,新图像通过'滑动'事件添加

$('#imageCarousel').on('slid', function (event) {
      //add more images
});

我想为旋转木马禁用动画,因此在carousel css中将过渡时间设置为0,因为这里显示的是移除轮播动画.但之后'滑'事件并没有发生.我不能使用'slide'事件,因为我需要知道轮播中哪个项目处于活动状态,但'slide'事件后没有设置'active'类.我该如何解决？谢谢.

在我的JS图像滑块(Owl-Carousel)中,图像具有不同的尺寸:

http://goo.gl/KmpX2P

您可以看到图像高度在旋转木马内变化.如何在保持旋转木马响应的同时使其保持恒定？我需要图像一直填充滑块空间,因此有些必须通过CSS以某种方式裁剪.期望的结果如下所示:

一段时间以来,我一直在努力实现一个仅限CSS的幻灯片,一个会:

1. 提供前进和后退导航.
2. 不修改导航历史记录.
3. 为内容的移动指明明确的方向.
4. 尽可能多地使用浏览器.

我遇到的大多数其他CSS幻灯片都没有勾选所有这些框.

值得庆幸的是,我花了这么长时间以来,浏览器本身已经改进了无端,现在实际上已经非常广泛,尽管有一些"现代"的CSS主义.为了防止其他人对我有用,我想我会在这里发布.

那么如何使用CSS和以下标记创建可导航的幻灯片？

<ul class="css-slider">
  <li class="slide"><img src="photos/a.jpg" /></li>
  <li class="slide"><img src="photos/b.jpg" /></li>
  <li class="slide"><img src="photos/c.jpg" /></li>
  <li class="slide"><img src="photos/d.jpg" /></li>
  <li class="slide"><img src="photos/e.jpg" /></li>
</ul>

Bootstrap旋转木马是一个奇怪的野兽.我已经尝试调整$ next以防止无限循环,但最终要么打破它,要么阻止幻灯片在到达结尾时向后移动.

我希望旋转木马只在列表中滑动而不是无限循环.

任何帮助,将不胜感激.

$next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if ($.support.transition && this.$element.hasClass('slide')) {
    this.$element.trigger(e)
    if (e.isDefaultPrevented()) return
    $next.addClass(type)
    $next[0].offsetWidth // force reflow
    $active.addClass(direction)
    $next.addClass(direction)
    this.$element.one($.support.transition.end, function() {
        $next.removeClass([type, direction].join(' ')).addClass('active')
        $active.removeClass(['active', direction].join(' '))
        that.sliding = false
        setTimeout(function() {
            that.$element.trigger('slid')
        }, 0)
    })
} else {
    this.$element.trigger(e)
    if (e.isDefaultPrevented()) return
    $active.removeClass('active')
    $next.addClass('active')
    this.sliding = false
    this.$element.trigger('slid')
}

更新:这与"自动播放"无关我特别指的是手动按下左右按钮.

来自Bootstrap的旋转木马不会显示我的图像或对控件做出反应.

这是我的HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Skates R Us</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/global.css">
    </head>

    <body>
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">
                        Skates R Us
                    </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="contact.html">Contact / About</a>
                        </li>
                        <li>
                            <a href="shop.html">Shop</a>
                        </li>
                        <li>
                            <a href="new.html">New Products</a>
                        </li>
                        <li> …