Слайды перекрытия на карусели совы - PullRequest
Новая
       18

Слайды перекрытия на карусели совы

0 голосов
/ 11 декабря 2019

Я работаю над этим слайдером, дизайн которого выглядит следующим образом:

design images

До сих пор я также пытался использовать отрицательные полякак переводы, чтобы получить этот эффект с помощью CSS.

Кто-нибудь знает, как я мог получить этот эффект, используя сову карусель?

Мой код выглядит следующим образом: 

$('.owl-carousel').owlCarousel({
  center: true,
  loop: true,
  margin: 0,
  responsive: {
    320: {
      items: 1,
      stagePadding: 70
    },
    600: {
      items: 4
    }
  }
});
.carousel-container .owl-item.center .continent-img-container img {
  opacity: 1;
  padding: 0;
}

.carousel-container .owl-item.center .continent-text-container {
  opacity: 1;
}

.carousel-container .owl-item.center .continent-text-container h2 {
  color: #2B8088;
  font-size: 1.625rem;
  font-family: 'Agenda';
}

.carousel-container .owl-item .continent-img-container img {
  opacity: 0.5;
  border-radius: 100px;
}

.carousel-container .owl-item .continent-text-container {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <!-- plugin stylesheets -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
  <!-- end plugin stylesheets -->
</head>

<body>
  <div class="carousel-container">
    <div class="owl-carousel">

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Africa">
        </div>
        <div class="continent-text-container">
          <h2>Africa</h2>
          <p>(Argentina, Brazil, Colombia, Uruguay, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Asia">
        </div>
        <div class="continent-text-container">
          <h2>Asia/Middle East</h2>
          <p>(Japan, China, Brunei, Korea, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Europe">
        </div>
        <div class="continent-text-container">
          <h2>Europe</h2>
          <p>(Germany, Russia, Spain, Scotland, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".North America">
        </div>
        <div class="continent-text-container">
          <h2>North America</h2>
          <p>(Canada, The USA, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Oceania">
        </div>
        <div class="continent-text-container">
          <h2>Australia/Oceania</h2>
          <p>(Australia, Kiribati, Guam, Vanuatu, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".South America">
        </div>
        <div class="continent-text-container">
          <h2>South America</h2>
          <p>(Argentina, Brazil, Colombia, Uruguay, etc)</p>
        </div>
      </div>

    </div>
  </div>

  <!-- plugin scripts -->

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <!-- end plugin scripts -->
</body>

Не могли бы вы помочь мне с этим? Помощь очень ценится. Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 11 декабря 2019

Я нашел ответ на этот вопрос в следующем сообщении:

https://stackoverflow.com/a/38821423/8591003

Я в основном изменил параметры, как показано ниже: 

$('.owl-carousel').owlCarousel({
  center: true,
  loop: true,
  margin: -50,
  responsive: {
    320: {
      items: 1,
      stagePadding: 70
    },
    600: {
      items: 4
    }
  }
});
0 голосов
/ 11 декабря 2019

Вам необходимо указать класс совы-предмета как относительную позицию, и вы можете использовать отрицательные поля. 

$('.owl-carousel').owlCarousel({
  center: true,
  loop: true,
  margin: 0,
  responsive: {
    320: {
      items: 1,
      stagePadding: 70
    },
    600: {
      items: 4
    }
  }
});
.carousel-container .owl-item.center .continent-img-container img {
  opacity: 1;
  padding: 0;
}

.carousel-container .owl-item.center .continent-text-container {
  opacity: 1;
}

.carousel-container .owl-item.center .continent-text-container h2 {
  color: #2B8088;
  font-size: 1.625rem;
  font-family: 'Agenda';
}

.carousel-container .owl-item .continent-img-container img {
  opacity: 0.5;
  border-radius: 100px;
}

.carousel-container .owl-item .continent-text-container {
  opacity: 0;
}

.owl-stage .owl-item{
    margin-left: -10px;
    margin-right: -10px;
    position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <!-- plugin stylesheets -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
  <!-- end plugin stylesheets -->
</head>

<body>
  <div class="carousel-container">
    <div class="owl-carousel">

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Africa">
        </div>
        <div class="continent-text-container">
          <h2>Africa</h2>
          <p>(Argentina, Brazil, Colombia, Uruguay, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Asia">
        </div>
        <div class="continent-text-container">
          <h2>Asia/Middle East</h2>
          <p>(Japan, China, Brunei, Korea, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Europe">
        </div>
        <div class="continent-text-container">
          <h2>Europe</h2>
          <p>(Germany, Russia, Spain, Scotland, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".North America">
        </div>
        <div class="continent-text-container">
          <h2>North America</h2>
          <p>(Canada, The USA, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Oceania">
        </div>
        <div class="continent-text-container">
          <h2>Australia/Oceania</h2>
          <p>(Australia, Kiribati, Guam, Vanuatu, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".South America">
        </div>
        <div class="continent-text-container">
          <h2>South America</h2>
          <p>(Argentina, Brazil, Colombia, Uruguay, etc)</p>
        </div>
      </div>

    </div>
  </div>

  <!-- plugin scripts -->

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <!-- end plugin scripts -->
</body>
...