标签: carousel

我在我的一个AngularJS应用程序中使用Slick轮播.为此,我创建了如下指令:

  myApp.directive('slickSlider',function(){
   return {
     restrict: 'A',
     link: function(scope,element,attrs) {
       $(element).slick(scope.$eval(attrs.slickSlider));
   }
  }
 }); 

这是我在视图文件中的代码:

  <div class="clearfix"  
  slick-slider="{dots: false, arrows: true, draggable: 
  false, slidesToShow:3, infinite:false}">
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
    </div>

在这种情况下,它工作正常并正确初始化.

但是当我使用ngRepeat动态创建幻灯片时,它没有初始化并一个接一个地显示幻灯片.

这是我使用ngRepeat的代码

<div class="clearfix"  
  slick-slider="{dots: false, arrows: true, draggable: 
  false, slidesToShow:3, infinite:false}">
      <div class="my-slide" ng-repeat="slide in …

我使用Bootstrap 4.0为Carousel使用白色背景,并希望更改控件的颜色.似乎bootstrap现在使用SVG作为他们的轮播图标.这意味着直接更改属性不起作用.

我目前正在使用Font Awesome来访问网站上的其他元素,所以如果有一种方法可以使用fa-vvrons并对其进行格式化,并且它在调整大小和格式化方面仍然表现相同,那么这可能是一个有效的解决方案.好.

这是我当前控制元素的代码:

<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
</a>

我在这里发现了一个类似的问题,但无法理解那里提供的答案.

我也在GitHub上找到了这个页面,但是我也无法做出任何有用的答案.

如何在android 1.6或2中创建这样的listview(因为renderscript,只能在3或更高版本中运行,但我需要列表才能处理几乎所有的机器人):

我想修改bootstrap 3的轮播以一次显示几张幻灯片.我知道我可以将多个缩略图放在一个幻灯片中(div .item),但问题是旋转木马会滑过它们所有同时移动到下一组,而我想逐个浏览它们.

我在这里找到了一个我想要的例子:http://www.bootply.com/117282唯一的问题是我需要5个或6个幻灯片,而不是4个.我花了几个小时尝试修改它以按需工作,但我显然没有充分了解它是如何工作的.

我的jquery/javascript理解非常简单,但我的CSS非常不错.有人可以告诉我如何修改它以同时显示5/6幻灯片吗？我非常感谢你的帮助.

谢谢,夏尔马

我这里有一个jsfiddle - http://jsfiddle.net/gh4Lur4b/8/

这是一个全宽度的自举旋转木马.

我想改变高度,仍然保持全宽.

高度是由图像高度决定的.

如何调整转盘的高度并保持100%的宽度.

    .carousel-inner{
       // height: 300px;
    }

    .item, img{
        height: 100% !important;
        width:  100% !important;
        border: 1px solid red;
    }

我想在android中实现垂直旋转木马.我已经搜索了很多关于它的事情,最后我在这里找到了横向旋转木马的例子.任何人都可以知道如何将这个水平旋转木马转换成垂直旋转木马.

我也尝试过这个.链接.这个3d列表视图给出了每个元素的旋转,但我想实现整个列表应该在3d中.任何机构都可以提出建议吗......

使用Bootstrap的Carousel,我希望能够点击链接并跳转到旋转木马中的特定幻灯片.我怎么做？我必须添加什么jquery？

这是我的HTML(它不起作用,但让你了解我想做什么):

<a href="#panel">Panel</a>

<div id="myCarousel" class="carousel slide">
 <div class="carousel-inner">
  <div id="panel" class="item">
...
  </div>
 </div>
</div>

我正在使用股票引导转盘:

<div id="main-navigation-carousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active" data-id="0">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
  </div>
</div>

通过点击旋转木马内的锚标签,一个新.item的注入到.carousel-inner.后.item注入(工作正常)转盘应滑落到.item.然而,没有任何反应.

<div id="main-navigation-carousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active" data-id="0">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
    <div class="item" data-id="1">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
    <div class="item" data-id="2">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
  </div>
</div>

即使我$("#main-navigation-carousel").carousel(1);在浏览器控制台中使用也没有任何反应.如果我在服务器上的代码中添加项目一切正常.

我正在试验Bootstrap的旋转木马,并希望将它与照片一起使用.

问题:我应该上传用于旋转木马的图片的最佳尺寸是多少？

在当前的Bootstrap发行版(v3.2.0)中,示例carousel.html使用一个简单的1x1像素图像作为背景:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">

我找不到这个记录,我试验过的照片在我的笔记本电脑屏幕上被拉伸/扭曲.

嗨,伙计们我正在使用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>

这是演示.

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