Javascript 如何根据屏幕大小创建具有不同设置的引导转盘？_Javascript_Html_Css_Twitter Bootstrap_Carousel

Javascript 如何根据屏幕大小创建具有不同设置的引导转盘？

javascript html css twitter-bootstrap

Javascript 如何根据屏幕大小创建具有不同设置的引导转盘？,javascript,html,css,twitter-bootstrap,carousel,Javascript,Html,Css,Twitter Bootstrap,Carousel,我有以下问题我正在与一个引导转盘，我想做以下工作当屏幕介于MD和LG尺寸之间时，我希望有3个项目，其中2个元素在行内（图a）。但是，当屏幕调整为SM和XS时，我希望有6个项目，每个项目中有1个元素。（图B）我不知道怎么做，如果可能的话 ATM我想创建两个不同的传送带，一个用于LG和MD，另一个仅用于SM XS，通过@media查询显示传送带A或B。但我的客户只需要一个传送带，因为他需要使用其数据库，如果他有两个不同的传送带，这将意味着他需要更多的工作欢迎您提供任何建议 PS：我附上了一张

我有以下问题

我正在与一个引导转盘，我想做以下工作

当屏幕介于MD和LG尺寸之间时，我希望有3个项目，其中2个元素在行内（图a）。但是，当屏幕调整为SM和XS时，我希望有6个项目，每个项目中有1个元素。（图B）我不知道怎么做，如果可能的话

ATM我想创建两个不同的传送带，一个用于LG和MD，另一个仅用于SM XS，通过@media查询显示传送带A或B。但我的客户只需要一个传送带，因为他需要使用其数据库，如果他有两个不同的传送带，这将意味着他需要更多的工作

欢迎您提供任何建议

PS：我附上了一张图片和代码示例。


测试
正文，td，th{
字体系列：“开放式SAN”；
字体大小：16px；
颜色：#555；
背景色：#fff；
}
推荐书
我们的客户和附属公司对我们的看法。
阅读更多




1A试验
1B试验
2.
3.
4.
5.
6.

只需创建一个包含幻灯片的旋转木马，并在每张幻灯片中放置两个div元素。第一个div在包含一个图像的小视口中可见，第二个div在包含两个图像的较大视口中可见

伪代码：

<carousel>
    <slide>
       <wrapper visible at mobile>
          <image />
       </wrapper visible at mobile>
       <wrapper visible at desktop>
          <image />
          <image />
       </wrapper visible at desktop>
    </slide>
    ...
</carousel>

...

它并不完美：要显示的图像需要是2的倍数。移动视口转盘将包含两倍于所需的项目

如果您在手机上隐藏滑动指示器，这没有问题。

试试这个 CSS

.carousel showsixmoveone.carousel控件{
宽度：4%；
背景图像：无；
}
.carousel showSix moveOne.carousel-control.左{
左边距：15px；
}
.carousel showsixmoveone.carousel-control.右{
右边距：15px；
}
.carousel showsixmoveone.cloneditem-1，
.carousel showsixmoveone.cloneditem-2，
.carousel showsixmoveone.cloneditem-3，
.carousel showsixmoveone.cloneditem-4，
.carousel showsixmoveone.cloneditem-5{
显示：无；
}
@介质和全部（最小宽度：768px）{
.carousel showsixmoveone.carousel inner>.active.left，
.carousel showsixmoveone.carousel inner>.prev{
左-50%；
}
.carousel showsixmoveone.carousel inner>.active.right，
.carousel showsixmoveone.carousel inner>.next{
左：50%；
}
.carousel showsixmoveone.carousel inner>.left，
.carousel showsixmoveone.carousel inner>.prev.right，
.carousel showsixmoveone.carousel inner>.active{
左：0；
}
.carousel showsixmoveone.carousel inner.cloneditem-1，
.carousel ShowSix MoveOne.carousel inner.cloneditem-2{
显示：块；
}
}
@媒体全部和（最小宽度：768px）和（transform-3d），全部和（最小宽度：768px）和（-webkit-transform-3d）{
.carousel showsixmoveone.carousel inner>.item.active.right，
.carousel showsixmoveone.carousel inner>.item.next{
-webkit转换：translate3d（50%，0,0）；
转换：translate3d（50%，0，0）；
左：0；
}
.carousel showsixmoveone.carousel inner>.item.active.left，
.carousel showsixmoveone.carousel inner>.item.prev{
-webkit转换：translate3d（-50%，0，0）；
转换：translate3d（-50%，0，0）；
左：0；
}
.carousel showsixmoveone.carousel inner>.item.left，
.carousel showsixmoveone.carousel inner>.item.prev.right，
.carousel showsixmoveone.carousel inner>.item.active{
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
左：0；
}
}
@介质和全部（最小宽度：992px）{
.carousel showsixmoveone.carousel inner>.active.left，
.carousel showsixmoveone.carousel inner>.prev{
左-50%；
}
.carousel showsixmoveone.carousel inner>.active.right，
.carousel showsixmoveone.carousel inner>.next{
左：50%；
}
.carousel showsixmoveone.carousel inner>.left，
.carousel showsixmoveone.carousel inner>.prev.right，
.carousel showsixmoveone.carousel inner>.active{
左：0；
}
.carousel showsixmoveone.carousel inner.cloneditem-3，
.carousel showsixmoveone.carousel inner.cloneditem-4，
.carousel ShowSix MoveOne.carousel inner.cloneditem-5{
显示：块；
}
}
@媒体全部和（最小宽度：992px）和（transform-3d），全部和（最小宽度：992px）和（-webkit-transform-3d）{
.carousel showsixmoveone.carousel inner>.item.active.right，
.carousel showsixmoveone.carousel inner>.item.next{
-webkit转换：translate3d（50%，0,0）；
转换：translate3d（50%，0，0）；
左：0；
}
.carousel showsixmoveone.carousel inner>.item.active.left，
.carousel showsixmoveone.carousel inner>.item.prev{
-webkit转换：translate3d（-50%，0，0）；
转换：translate3d（-50%，0，0）；
左：0；
}
.carousel showsixmoveone.carousel inner>.item.left，
.carousel showsixmoveone.carousel inner>.item.prev.right，
.carousel showsixmoveone.carousel inner>.item.active{
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
左：0；
}
}
.集装箱{
边缘顶部：50px；
}
身体{
字体系列：“苦”，无衬线；
颜色：#E54A41；
背景图片：url（'//static.rtpdesign.co.uk/blog/img/background.png'）；
背景重复：无重复；
背景位置：右上角；
背景大小：20%；
}
p{
字体系列：“开放式Sans”，无衬线；
颜色：#333；
.carousel-showsixmoveone .carousel-control {
  width: 4%;
  background-image: none;
}
.carousel-showsixmoveone .carousel-control.left {
  margin-left: 15px;
}
.carousel-showsixmoveone .carousel-control.right {
  margin-right: 15px;
}
.carousel-showsixmoveone .cloneditem-1,
.carousel-showsixmoveone .cloneditem-2,
.carousel-showsixmoveone .cloneditem-3,
.carousel-showsixmoveone .cloneditem-4,
.carousel-showsixmoveone .cloneditem-5 {
  display: none;
}
@media all and (min-width: 768px) {
  .carousel-showsixmoveone .carousel-inner > .active.left,
  .carousel-showsixmoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showsixmoveone .carousel-inner > .active.right,
  .carousel-showsixmoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showsixmoveone .carousel-inner > .left,
  .carousel-showsixmoveone .carousel-inner > .prev.right,
  .carousel-showsixmoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner .cloneditem-1,
  .carousel-showsixmoveone .carousel-inner .cloneditem-2 {
    display: block;
  }
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-showsixmoveone .carousel-inner > .item.active.right,
  .carousel-showsixmoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner > .item.active.left,
  .carousel-showsixmoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner > .item.left,
  .carousel-showsixmoveone .carousel-inner > .item.prev.right,
  .carousel-showsixmoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
@media all and (min-width: 992px) {
  .carousel-showsixmoveone .carousel-inner > .active.left,
  .carousel-showsixmoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showsixmoveone .carousel-inner > .active.right,
  .carousel-showsixmoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showsixmoveone .carousel-inner > .left,
  .carousel-showsixmoveone .carousel-inner > .prev.right,
  .carousel-showsixmoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner .cloneditem-3,
  .carousel-showsixmoveone .carousel-inner .cloneditem-4,
  .carousel-showsixmoveone .carousel-inner .cloneditem-5 {
    display: block;
  }
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-showsixmoveone .carousel-inner > .item.active.right,
  .carousel-showsixmoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner > .item.active.left,
  .carousel-showsixmoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner > .item.left,
  .carousel-showsixmoveone .carousel-inner > .item.prev.right,
  .carousel-showsixmoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
.container {
  margin-top: 50px;
}
body {
  font-family: 'Bitter', sans-serif;
  color: #E54A41;
  background-image: url('//static.rtpdesign.co.uk/blog/img/background.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 20%;
}
p {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  margin-bottom: 2em;
}

JS

(function(){
  $('#carousel123').carousel({ interval: false });
}());

(function(){
  $('.carousel-showsixmoveone .item').each(function(){
    var itemToClone = $(this);

    for (var i=1;i<2;i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-"+(i))
        .appendTo($(this));
    }
  });
}());


HTML

<div class="container">

  <div class="row">
    <div class="col-md-12">
      <div class="carousel carousel-showsixmoveone slide" id="carousel123">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive"></a></div>
          </div>          
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive"></a></div>
          </div>
        </div>
        <a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
    </div>
  </div>
</div>