如何将轮播插入父级div？

Question

我正在拔头发，因为这应该很简单

我有一个显示flex的父类.wrapper

里面是宽度为100％的.carousel div和宽度为500px的.info div

。carousel类的内部是一个容器类容器，该容器是旋转木马滑块。我希望当宽度设置为100％时，它将保持在.carousel类的参数之内，但在此类之外溢出，并且我不知道为什么

谁能解释为什么会这样吗？

它还在滑块中显示下一张图像的一部分

$(window).on('load', function() {
  $('.carousel-main').owlCarousel({
    items: 1,
    loop: true,
    autoplay: false,
    autoplayTimeout: 3000,
    nav: true,
    navText: [""],
    dots: false
  });
});

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-family: 'SuisseIntl-Book', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  width: 100%;
}

.wrapper {
  display: flex;
  width: 100%;
}

.carousel {
  width: 100%;
}

.info {
  width: 500px;
  border-left: #000 1px solid;
  height: 100vh;
  padding: 1rem;
}

h1 {
  text-transform: uppercase;
  font-size: 1rem;
}

.container {
  width: 100%;
}

.owl-carousel {
  overflow: hidden;
  padding: 2rem;
}

.carousel-main {
  position: relative;
}


/* Nav */

.owl-carousel .owl-nav {
  margin-top: 0;
  /* resetting margins for nav buttons */
}

.owl-carousel .owl-nav button.owl-prev {
  width: 50%;
  height: 100%;
  margin: 0;
  /* removes margins around nav buttons */
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  z-index: 999;
  cursor: w-resize;
}

.owl-carousel .owl-nav button.owl-next {
  width: 50%;
  height: 100%;
  margin: 0;
  /* removes margins around nav buttons */
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  z-index: 999;
  cursor: e-resize;
}

.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
  color: transparent;
  background: transparent;
}

.owl-nav button.owl-prev {
  left: 0px;
  starting position;
}

.owl-nav button.owl-next {
  right: 0px;
  starting position;
}

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">


<div class="wrapper">
  <div class="carousel">
    <div class="container">
      <div class="owl-carousel owl-theme carousel-main">
        <div>
          <img src="https://www.scenic.com.au/-/media/scenic/australia/destinations/antarctica/scenic-eclipse-antarctica---paradiseharbor_roger-pimenta-5.jpg?mw=1024&hash=1CF56806C26721A9EE695631E1CC5CF16C68F387?height=500&width=300"></div>
        <div><img src="https://cruisepassenger.com.au/wp-content/uploads/2018/07/scenic-eclipse.jpg"></div>

      </div>
    </div>
  </div>
  <!-- End of Carousel -->

  <div class="info">
    <h1>Contact</h1>
    <a herf="mailTo:[email protected]">[email protected]</a>
  </div>
  <!-- End of Info -->
</div>
<!-- End of wrapper -->

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" type="text/javascript"></script>

Answer 1

.container保持在.carousel之内，符合预期。但是，.carousel跨越了.wrapper的整个宽度，并将.info推到了视线之外。

您应将width的.carousel更改为小于100％，以允许.info返回屏幕。如果将width设置为任何整数值，然后将flex-basis设置为100％，它将使用所有剩余空间。

.carousel {
  width: 0;
  flex-basis: 100%;
}

$(window).on('load', function() {
  $('.carousel-main').owlCarousel({
    items: 1,
    loop: true,
    autoplay: false,
    autoplayTimeout: 3000,
    nav: true,
    navText: [""],
    dots: false
  });
});

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-family: 'SuisseIntl-Book', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  width: 100%;
}

.wrapper {
  display: flex;
  width: 100%;
}

.carousel {
  width: 0;
  flex-basis: 100%;
}

.info {
  width: 500px;
  border-left: #000 1px solid;
  height: 100vh;
  padding: 1rem;
}

h1 {
  text-transform: uppercase;
  font-size: 1rem;
}

.container {
  width: 100%;
}

.owl-carousel {
  overflow: hidden;
  padding: 2rem;
}

.carousel-main {
  position: relative;
}


/* Nav */

.owl-carousel .owl-nav {
  margin-top: 0;
  /* resetting margins for nav buttons */
}

.owl-carousel .owl-nav button.owl-prev {
  width: 50%;
  height: 100%;
  margin: 0;
  /* removes margins around nav buttons */
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  z-index: 999;
  cursor: w-resize;
}

.owl-carousel .owl-nav button.owl-next {
  width: 50%;
  height: 100%;
  margin: 0;
  /* removes margins around nav buttons */
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  z-index: 999;
  cursor: e-resize;
}

.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
  color: transparent;
  background: transparent;
}

.owl-nav button.owl-prev {
  left: 0px;
  starting position;
}

.owl-nav button.owl-next {
  right: 0px;
  starting position;
}

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">


<div class="wrapper">
  <div class="carousel">
    <div class="container">
      <div class="owl-carousel owl-theme carousel-main">
        <div>
          <img src="https://www.scenic.com.au/-/media/scenic/australia/destinations/antarctica/scenic-eclipse-antarctica---paradiseharbor_roger-pimenta-5.jpg?mw=1024&hash=1CF56806C26721A9EE695631E1CC5CF16C68F387?height=500&width=300"></div>
        <div><img src="https://cruisepassenger.com.au/wp-content/uploads/2018/07/scenic-eclipse.jpg"></div>

      </div>
    </div>
  </div>
  <!-- End of Carousel -->

  <div class="info">
    <h1>Contact</h1>
    <a herf="mailTo:[email protected]">[email protected]</a>
  </div>
  <!-- End of Info -->
</div>
<!-- End of wrapper -->

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" type="text/javascript"></script>