Карусель за прозрачным вырезом в формате PNG

Проблемы с тем, что, как я предполагал, было бы простой задачей, возможно, просто нужен еще один взгляд.

У нас есть изображение баннера, а справа - монитор компьютера. "Экран" был вырезан таким образом, чтобы часть баннера была прозрачной (.PNG).

Мне нужно поместить карусель за вырезанным изображением, чтобы создать впечатление, что карусель "играет" на экране.

Прямо сейчас я пытаюсь сделать это с Slick Carousel, но если у кого-то есть рекомендации по улучшению карусели, которая также отзывчива, я открыт.

http://codepen.io/tconroy/pen/ZYRaRd

Выше приведен кодекс того, что у меня есть. Основная проблема, с которой я сталкиваюсь, заключается в том, что слайды располагаются перед содержимым изображения (накладываясь на изображение), когда оно должно быть позади содержимого изображения (воспроизведение за баннером и просто видно сквозь прозрачную "щель" на экране).

Я использовал изображения-заполнители для слайдов, однако это фактические размеры каждого изображения, которое мы будем использовать. Изображения должны быть "центрированы" на слайде, с видимым цветом фона. (в основном изображения накладываются на цветные слайды).

HTML

<div class="inner-wrap">
  <header>
  <div class="contain-to-grid">
  <div class="inner-carousel-wrapper">
  <div class="inner-carousel">
    <div class="slide yellow">
      <img class="" src="http://lorempixel.com/350/347/sports" alt="">
    </div>
    <div class="slide purple">
      <img class="" src="http://lorempixel.com/416/347/abstract" alt="">
    </div>
    <div class="slide red">
      <img class="" src="http://lorempixel.com/381/346/city" alt="">
    </div>
    <div class="slide blue">
      <img class="" src="http://lorempixel.com/338/346/transport" alt="">
    </div>
    <div class="slide green">
      <img class="" src="http://lorempixel.com/343/347/nature" alt="">
    </div>
    <div class="slide orange">
      <img class="" src="http://lorempixel.com/361/347/cats" alt="">
    </div>
  </div> <!-- .inner-carousel -->
  <img src="http://i.imgur.com/HodKXD4.png">
</div> <!-- .inner-carousel-wrapper -->
  </div>
</header>
</div>
<section class="container">
  Notice how the "slides" above are overlapping the ipad square (bottom right of monitor)? The slides should appear "behind" the ipad.
</section>

SCSS

$lesson-blue:   #33B2E6;
$lesson-green:  #26B789;
$lesson-orange: #F58231;
$lesson-yellow: #FFD648;
$lesson-red:    #E43533;
$lesson-purple: #616373;

.inner-carousel-wrapper {
  background: black;
}

.inner-carousel {
  position: absolute;
  float: right;
  margin-left: 54.3%;
  margin-top: 6.0%;
  width: 45.7%;
  height: 76%;
}

.inner-carousel .slide {
  &.blue   {background: $lesson-blue; }
  &.green  {background: $lesson-green;}
  &.orange {background: $lesson-orange;}
  &.yellow {background: $lesson-yellow;}
  &.red    {background: $lesson-red;}
  &.purple   {background: $lesson-purple;}

  img {
    margin: 0 auto;
    padding: 6%;
    width: 60%;
  }
}

JS

$('.inner-carousel').slick({
      accessibility: false,
      autoplay:      true,
      autoplaySpeed: 2500,
      arrows:        false,
      draggable:     false,
      slide:         '.slide'
    });
Источник

2 ответа

Решение

Я не уверен, если это вариант для вас или нет, но вы можете назначить id на ваше фоновое изображение, дайте ему абсолютное позиционирование, а затем измените его z-индекс. Примерно так должно работать:

HTML

<img id="bg" src="http://i.imgur.com/HodKXD4.png">

CSS

#bg {position:absolute;z-index:2;}

http://codepen.io/anon/pen/ZYRaNE

Источник

Пара вещей вместе исправляют это:

.contain-to-grid {
    /* background: #333; */
}
.inner-carousel-wrapper {
    /* background: black; */
}
.inner-carousel {
    z-index: -1;
}

демонстрация

Вам нужно будет немного отрегулировать размер / положение, но это должно работать иначе.

Источник
Другие вопросы по тегам