Slider/Carousel in Bootstrap with Youtube video and a description on the other side

问题

I've tried to find this solution with no luck. I can't believe that no one didn't create something like this yet (it's possible that I didn't find it because I used wrong keywords). Anyway, I need to create a container with two columns inside. The left column is just static text with a description. The right one should contain 3 Youtube videos with ability to slide them one by one using just bullets (maybe arrows too - but they should be outside the video I guess). Here is the concept:bootstrap cols. How should I do this?

回答1:

Here is an example, try it. I've just copied an carousel example from w3schools bootstrap tutorial and added some css properties.

.flex-box {
  display: flex;
  flex-flow: row wrap;
}

.flex-box #myCarousel{
  flex: 1 1 50%
}

.flex-box #desc {
  flex: 1 1 50%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
</head>
<body>

<div class="container-fluid"> 
  <div class="row">
    <div class="flex-box">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <iframe width="100%" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k">
    </iframe>
          </div>

          <div class="item">
           <iframe width="100%" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k">
    </iframe>
          </div>

          <div class="item">
            <iframe width="100%" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k">
    </iframe>
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
     
      <div id="desc" style="background-color: orangered; color: white;">
        <h3>Description</h3>
      </div>
    </div>
  </div>
</div>

</body>
</html>

回答2:

Ok, so I adjusted your answer a bit, and it's just amazing!!! Thank you so much Thakur! Unfortunately I can't vote yet, but I want you to know that you saved me!

myCSS (no flexbox) and HTML:

.yell {
  background-color: yellow;
}

.padding {
  padding: 60px;
}


/*====Bullets position and color change====*/

ol.carousel-indicators {
  bottom: -50px;
}

ol.carousel-indicators li {
  background: transparent;
  border: 1px solid black;
}

ol.carousel-indicators li.active {
  background: black;
}

<div class="container yell">
  <div class="row padding">
    <div class="col-sm-6">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/pmIxqkbzwm8"></iframe>
            </div>
          </div>
          <div class="item">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/9rkInmyo_z8"></iframe>
            </div>
          </div>
          <div class="item">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Ld8c_sgpbUU"></iframe>
            </div>
          </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <!-- Description column -->
    <div class="col-sm-6">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Mauris metus. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Morbi imperdiet, mauris ac auctor dictum, nisl ligula
        egestas nulla, et sollicitudin sem purus in lacus. Proin in tellus sit amet nibh dignissim sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
      </p>
    </div>
  </div>
</div>

It's responsive and stacks perfectly! Thank you Thakur!

来源：https://stackoverflow.com/questions/46266809/slider-carousel-in-bootstrap-with-youtube-video-and-a-description-on-the-other-s

标签

javascript

jquery

css

twitter-bootstrap

youtube