Two Bootstrap Carousel with Different Direction

Question

Is it possible to have two carousel with different direction .. I have tried several ways on doing so but no luck .. here's a sample of my code ..

i want the right carousel to slide up .. while the bottom one slide left ..

$('#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,
});

/* 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;
  }
}

<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>

N. M. · Answer 1 · 2017-06-13T07:29:36.260

-2

Bootstrap does not have vertical scrolling as a built in feature. However, merv provides a hacky way to do so over here.

Anyways, I would recommend using JQuery Carousel and applying the Bootstrap theme, as it comes with such features built in.

Edit: Here's a codeply using marv's solution that does what you are asking for. As mentioned in the comments, you should read into CSS selectors if you do not know what they do before telling people to learn their stuff.

Edit 2: Your styling inside @media all and (transform-3d),(-webkit-transform-3d) {...} applies to both carousels and you are translating on x-axis, that's why the right carousel is still jumping to the left. Stackoverflow is not supposed to provide you with complete code solutions but hint you to the correct way of getting to that solution.

edited Jun 13 '17 at 07:29

answered Jun 13 '17 at 06:52

N. M.

567
5
15

yes .. that would work just fine .. but will over-ride the bottom carousel too .. – Demonyowh Jun 13 '17 at 06:57
No. You would not add the `vertical` class to the bottom carousel, the selectors marv provided only apply to carousel elements with the class vertical assigned. – N. M. Jun 13 '17 at 07:03
[Yeah, I absolutely love trying things I know that work.](https://www.codeply.com/go/XNJBQTy8zx) It needs a bit more styling to it, but if you do not know how selectors in CSS work, you might want to read into it. – N. M. Jun 13 '17 at 07:15
"_It needs a bit more styling to it_". The basic vertical scrolling functionality is given, now go do some work yourself and fix the jumping width, which isn't too hard to be honest. I won't reply back to this as you seem to not be interested in getting a solution, wish you the best of luck getting your carousels to work! Edit: Small hint: `@media all and (transform-3d), (-webkit-transform-3d)` styling is applying to both carousels and you are translating on x-axis. – N. M. Jun 13 '17 at 07:19

Two Bootstrap Carousel with Different Direction

1 Answers1