Как вписать карусель в родительский раздел? - PullRequest
Новая
       0

Как вписать карусель в родительский раздел?

1 голос
/ 16 марта 2020

Я вытаскиваю свои волосы, потому что это должно быть действительно просто

У меня есть родительский класс .wrapper с дисплеем flex

Внутри это div .carousel со 100% width и .info div с шириной 500px

Внутри класса .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:hello@sashaburger.co.nz">hello@sashaburger.co.nz</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>

1 Ответ

1 голос
/ 16 марта 2020

.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:hello@sashaburger.co.nz">hello@sashaburger.co.nz</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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...