Question

是否有可能有两个不同方向的旋转木马..我已经尝试了几种方法，但没有运气..这里是我的代码样本..

我想要正确的旋转木马向上滑动...而底部滑动向左滑动..

＆＃13;

$('#bottomCarousel .item').each(function() {

  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.find('.item-content:first-child').clone().appendTo($(this));
});

$('#rightCarousel .item').each(function() {
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  var nextToNext = next.next();
  if (!nextToNext.length) {
    nextToNext = $(this).siblings(':first');
  }
  next.find('.item-content:first-child').clone().appendTo($(this));
  nextToNext.find('.item-content:first-child').clone().appendTo($(this));
});

$('#bottomCarousel').carousel({
  interval: 1000,
});


$('#rightCarousel').carousel({
  interval: 1000,
});

＆＃13;

/* IMPORTS */

@import url('https://fonts.googleapis.com/css?family=Oswald');

/* COMMON STYLES */

html,
body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: 'Oswald', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 5px auto;
  font-weight: bold;
}


/* PAGE STYLES */

#content {
  height: 100%;
}

#left-side {
  padding-right: 0;
}


/* LEFT STYLES */

#video-container {
  height: 90%;
  overflow: hidden;
  border: 3px solid #fff;
  border-right: none;
  box-shadow: 5px 5px 20px #777;
  z-index: 1;
}

#video-container:hover #controls-wrapper {
  opacity: 1;
}

#video-top-border {
  height: 20px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
  background: red;
  /* For browsers that do not support gradients */
  /* For Safari 5.1 to 6.0 */
  background: -webkit-linear-gradient(left, red, orange, yellow, green);
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(left, red, orange, yellow, green);
  /* For Fx 3.6 to 15 */
  background: -moz-linear-gradient(left, red, orange, yellow, green);
  /* Standard syntax */
  background: linear-gradient(to right, red, orange, yellow, green);
}

#video {
  min-width: 100%;
  width: 100%;
}

#controls-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -o-transition: opacity .3s;
  -ms-transition: opacity .3s;
  transition: opacity .3s;
}

#controls {
  display: table;
  width: 70%;
  margin: 0 auto 10px auto;
  padding: 10px 20px;
  background-color: rgba(165, 206, 57, 0.4);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}

#controls ul {
  width: 100%;
}

#controls button {
  box-shadow: 2.4px 2.4px 1.8px #000031, 0px 0px 2.4px #00004b;
  background-color: #a5ce39;
  border: none;
  color: #efefef;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

#controls #seek-bar {
  width: 74%;
  display: inline-block;
}

#controls #volume-bar {
  width: 10%;
  display: inline-block;
}

input[type=range].bar {
  -webkit-appearance: none;
  width: 100%;
  margin: 3px 0;
}

input[type=range].bar:focus {
  outline: none;
}

input[type=range].bar::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(203, 255, 119, 0.9);
  border-radius: 15.7px;
  border: 1px solid #33790e;
}

input[type=range].bar::-webkit-slider-thumb {
  box-shadow: 2.4px 2.4px 1.8px #000031, 0px 0px 2.4px #00004b;
  border: 1px solid #0a3714;
  height: 11px;
  width: 10px;
  border-radius: 50px;
  background: #a5ce39;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4px;
}

input[type=range].bar:focus::-webkit-slider-runnable-track {
  background: rgba(211, 255, 139, 0.9);
}

input[type=range].bar::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(203, 255, 119, 0.9);
  border-radius: 15.7px;
  border: 1px solid #33790e;
}

input[type=range].bar::-moz-range-thumb {
  box-shadow: 2.4px 2.4px 1.8px #000031, 0px 0px 2.4px #00004b;
  border: 1px solid #0a3714;
  height: 11px;
  width: 10px;
  border-radius: 50px;
  background: #a5ce39;
  cursor: pointer;
}

input[type=range].bar::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range].bar::-ms-fill-lower {
  background: rgba(195, 255, 99, 0.9);
  border: 1px solid #33790e;
  border-radius: 31.4px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range].bar::-ms-fill-upper {
  background: rgba(203, 255, 119, 0.9);
  border: 1px solid #33790e;
  border-radius: 31.4px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range].bar::-ms-thumb {
  box-shadow: 2.4px 2.4px 1.8px #000031, 0px 0px 2.4px #00004b;
  border: 1px solid #0a3714;
  height: 11px;
  width: 10px;
  border-radius: 50px;
  background: #a5ce39;
  cursor: pointer;
  height: 5px;
}

input[type=range].bar:focus::-ms-fill-lower {
  background: rgba(203, 255, 119, 0.9);
}

input[type=range].bar:focus::-ms-fill-upper {
  background: rgba(211, 255, 139, 0.9);
}

#video-wrapper:hover #video-controls {
  opacity: .9;
}

#banner {
  height: 10%;
  background-color: #fff;
}

#ctrl1 {
  border: 3px solid #fff;
  border-right: none;
  background-color: #EDC71A;
  padding: 0;
}

#ctrl2 {
  border: 3px solid #fff;
  border-right: none;
  background-color: #2D95D2;
  padding: 0;
}

#rightCarousel {
  padding-left: 0;
  z-index: 2;
  height: 100vh;
}

.update-data {
  padding-left: 0;
  overflow: hidden;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  border-left: 3px solid #fff;
  border-bottom: none;
}

.update-data:last-child {
  border-bottom: 3px solid #fff;
}

.update-data .update-img {
  width: 100%;
  height: 100%;
}

.color-green {
  color: #a5ce39;
}

.color-orange {
  color: #e46c0a;
}

.carousel-inner {
  margin: 0;
}

.carousel .item {
  margin: 0;
}


/* MEDIA */

@media screen and (min-width: 992px) {
  #content {
    overflow: hidden;
  }
  #video-wrapper {
    height: 66.6vh;
  }
  .ticker {
    height: 33.3vh;
  }
  .update-data {
    height: 33.3vh;
  }
}

@media screen and (max-width: 991px) {
  #content {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #video-wrapper {
    height: 420px;
  }
  .ticker {
    height: 218px;
  }
  .update-data {
    min-height: 450px;
  }
}

@media all and (transform-3d),
(-webkit-transform-3d) {
  .carousel-inner>.item.next,
  .carousel-inner>.item.active.right {
    left: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
  .carousel-inner>.item.prev,
  .carousel-inner>.item.active.left {
    left: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  .carousel-control.right,
  .carousel-control.left {
    opacity: 0;
    margin-top: 3%;
    height: 70%;
    background: none;
  }
  .carousel-control.right:hover {
    opacity: 0.3;
  }
  .carousel-control.left:hover {
    opacity: 0.3;
  }
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="content" class="row">
  <!-- LEFT SIDE -->
  <div id="left-side" class="col-xs-12 col-sm-12 col-md-8">
    <div id="video-wrapper" class="row">
      <div id="video-container" class="col-xs-12 col-sm-12 text-center">
        <!--<div id="video-top-border"></div>-->

        <video autoplay loop muted id="video">
                        <source type="video/mp4" src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_30mb.mp4">
                        Your browser does not support the video tag.
                    </video>
        <div id="controls-wrapper">
          <div id="controls">
            <form class="form-inline">
              <button type="button" id="play-pause"><i class="glyphicon glyphicon-pause"></i></button>
              <input type="range" id="seek-bar" class="bar" value="0">
              <button type="button" id="mute"><i class="glyphicon glyphicon-volume-up"></i></button>
              <input type="range" id="volume-bar" class="bar" min="0" max="1" step="0.1" value="1">
              <button type="button" id="full-screen"><i class="glyphicon glyphicon-fullscreen"></i></button>
            </form>
          </div>
        </div>
      </div>
      <!-- end of video container -->

      <div id="banner" class="col-xs-12 col-sm-12 text-center">
        <h3><span class="color-green">HR EXPO </span>&nbsp;<span class="color-orange"> MAY 15-26</span></h3>
      </div>

    </div>
    <!-- end of video wrapper -->


    <div id="bottomCarousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner left">
        <div class="row item active">
          <div id="ctrl1" class="col-xs-6 col-sm-6 ticker item-content">ITEM 1</div>
        </div>
        <div class="row item">
          <div id="ctrl2" class="col-xs-6 col-sm-6 ticker item-content">ITEM 2</div>
        </div>
        <div class="row item">
          <div id="ctrl1" class="col-xs-6 col-sm-6 ticker item-content">ITEM 3</div>
        </div>
        <div class="row item">
          <div id="ctrl2" class="col-xs-6 col-sm-6 ticker item-content">ITEM 4</div>
        </div>
        <div class="row item">
          <div id="ctrl1" class="col-xs-6 col-sm-6 ticker item-content">ITEM 5</div>
        </div>
      </div>
      <!-- Left and right controls -->
      <a class="left carousel-control" href="#bottomCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#bottomCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

  </div>

  <!-- RIGHT SIDE -->
  <div id="rightCarousel" class="col-xs-12 col-sm-12 col-md-4 carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="row item active">
        <div class="col-xs-12 col-sm-12 item-content">
          <div class="update-data row">
            <img class="update-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeFq2W0s4o3JwaS-zXRVj1lAKAyeumsLSVgeio4_opL2kG1AwGgUcuke0" />
          </div>
        </div>
      </div>

      <div class="row item">
        <div class="col-xs-12 col-sm-12 item-content">
          <div class="update-data row">
            <img class="update-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnl3-uQyrnN8Kkkcb7QOxw_9ji6bUsrqnD9znU5pI-fhC3Z8uq" />
          </div>
        </div>
      </div>

      <div class="row item">
        <div class="col-xs-12 col-sm-12 item-content">
          <div class="update-data row">
            <img class="update-img" src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_nikkor28-300mmf_35-56gd_ed_vr/img/sample/sample4_l.jpg" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>

＆＃13;

Answer 1

Bootstrap没有垂直滚动作为内置功能。但是，merv提供了一种hacky方式List。

无论如何，我建议使用JQuery Carousel并应用Bootstrap主题，因为它内置了这些功能。

编辑： over here使用marv的解决方案进行代码处理，满足您的要求。正如评论中所提到的，如果你在告诉人们学习他们的东西之前你不知道他们做了什么，你应该阅读CSS选择器。

编辑2 ：@media all and (transform-3d),(-webkit-transform-3d) {...}内的样式适用于两个旋转木马，而您正在x轴上进行翻译，这就是为什么正确的旋转木马仍然向左跳跃的原因。 Stackoverflow不应该为您提供完整的代码解决方案，但提示您采用正确的解决方案。

两个Bootstrap轮播与不同的方向

1 个答案: