Bootstrap中的滑块/轮播，带有Youtube视频和另一面的说明 [英] Slider/Carousel in Bootstrap with Youtube video and a description on the other side

问题描述

我试图找到这种解决方案，但没有运气.我不敢相信还没有人创建过这样的东西(很可能是因为我使用了错误的关键字而没有找到它).无论如何，我需要创建一个包含两列的容器.左列只是带有说明的静态文本.正确的视频应包含3个Youtube视频，并能够仅使用项目符号(也可能是箭头)将其逐一滑动(但我猜它们应该在视频之外).这里是概念:自举cols . 我该怎么办?

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?

推荐答案

好，所以我对您的回答做了一些调整，这真是太好了！！！非常感谢Thakur！不幸的是我还不能投票，但是我想让你知道你救了我！

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(没有flexbox)和HTML:

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!

这篇关于Bootstrap中的滑块/轮播，带有Youtube视频和另一面的说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！