При перелистывании квадратики должны остаться на месте

Question

При перелистывании карусели квадратики должны оставаться на месте, а блоки перелистываются. Подскажите, пожалуйста, как это можно реализовать?

Сама карусель

<div id="demo" class="carousel slide" data-interval="false">
            <!-- Indicators -->
            <ul class="carousel-indicators">
                <?php for($i = 0; $i < count($news)/3; $i++)
            if($i == 0):
      ?>
                    <li data-target="#demo" data-slide-to="<?=$i;?>" class="active"></li>
                    <?php else: ?>
                        <li data-target="#demo" data-slide-to="<?=$i;?>"></li>
                        <?php endif; ?>
            </ul>
            <!-- The slideshow -->
            <div class="carousel-inner">
                <?php for($i = 0; $i < count($news); $i = $i + 3)
            if($i == 0):
      ?>
                    <div class="carousel-item active">
                        <div class="container">
                            <div class="row">
                                <div class="card-deck">
                                    <div class="card card-red">
                                        <div class="card-body">
                                            <p class="card-date">
                                                <?=$news[$i]['postDate'];?>
                                            </p>
                                            <h5 class="card-title"><?=$news[$i]['title'];?></h5>
                                            <button type="submit" class="btn btn-details">Подробнее</button>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-body">
                                            <p class="card-date">
                                                <?=$news[$i+1]['postDate'];?>
                                            </p>
                                            <h5 class="card-title"><?=$news[$i+1]['title'];?></h5>
                                            <button type="submit" class="btn btn-details">Подробнее</button>
                                        </div>
                                    </div>
                                    <div class="card card-purp ">
                                        <div class="card-body">
                                            <p class="card-date">
                                                <?=$news[$i+2]['postDate'];?>
                                            </p>
                                            <h5 class="card-title"><?=$news[$i+2]['title'];?></h5>
                                            <button type="submit" class="btn btn-details">Подробнее</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php else: ?>
                        <div class="carousel-item">
                            <div class="container">
                                <div class="row">
                                    <div class="card-deck">
                                        <div class="card card-red">
                                            <div class="card-body">
                                                <p class="card-date">
                                                    <?=$news[$i]['postDate'];?>
                                                </p>
                                                <h5 class="card-title"><?=$news[$i]['title'];?></h5>
                                                <button type="submit" class="btn btn-details">Подробнее</button>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <div class="card-body">
                                                <p class="card-date">
                                                    <?=$news[$i+1]['postDate'];?>
                                                </p>
                                                <h5 class="card-title"><?=$news[$i+1]['title'];?></h5>
                                                <button type="submit" class="btn btn-details">Подробнее</button>
                                            </div>
                                        </div>
                                        <div class="card card-purp ">
                                            <div class="card-body">
                                                <p class="card-date">
                                                    <?=$news[$i+2]['postDate'];?>
                                                </p>
                                                <h5 class="card-title"><?=$news[$i+2]['title'];?></h5>
                                                <button type="submit" class="btn btn-details">Подробнее</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php endif; ?>
            </div>
            <!-- Left and right controls -->
        </div>

CSS

    .card-red {
    -webkit-box-shadow: -20px -20px 0px 0px rgba(213, 21, 34, 1);
    -moz-box-shadow: -20px -20px 0px 0px rgba(213, 21, 34, 1);
    box-shadow: -20px -20px 0px 0px rgba(213, 21, 34, 1);
}

.card-purp {
    -webkit-box-shadow: 20px 20px 0px 0px rgba(111, 97, 160, 1);
    -moz-box-shadow: 20px 20px 0px 0px rgba(111, 97, 160, 1);
    box-shadow: 20px 20px 0px 0px rgba(111, 97, 160, 1);
}

https://github.com/lordSerega/redEdge

Answer 1

Простой вариант с использованием псевдоэлементов:

.parent {
  display: block;
  width: calc(100% - 20px);
  position: relative;
  margin: 10px;
}

.parent::before,
.parent::after {
  content: '';
  display: block;
  width: calc((100% - 20px) / 3);
  height: 100%;
  position: absolute;
  z-index: 1;
}

.parent::before {
  box-shadow: -10px -10px 0 0 #d61523;
  top: 0;
  left: 0;
}

.parent::after {
  box-shadow: 10px 10px 0 0 #70619f;
  right: 0;
  bottom: 0;
}

.wrapper {
  display: flex;
  width: 100%;
  position: relative;
  z-index: 2;
}

.item {
  display: block;
  width: 100%;
  border: 1px solid #efebef;
  background: #fff;
  box-sizing: border-box;
}

.item::before {
  content: '';
  display: block;
  padding-top: 50%;
}

.item:not(:last-child) {
  margin-right: 10px;
}

<div class="parent">
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Вариант с использованием background

.parent {
  display: block;
  width: calc(100% - 20px);
  background: 
    linear-gradient(to top, #d61523, #d61523)
    no-repeat left top,
    linear-gradient(to top, #70619f, #70619f)
    no-repeat right bottom;
  background-size: 
    calc((100% - 40px) / 3) /* - 40px -> padding родителя + margin-right между item */
    calc(100% - 20px);      /* - 20px -> padding родителя */
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  width: 100%;
  position: relative;
  z-index: 2;
}

.item {
  display: block;
  width: 100%;
  border: 1px solid #efebef;
  background: #fff;
  box-sizing: border-box;
}

.item::before {
  content: '';
  display: block;
  padding-top: 50%;
}

.item:not(:last-child) {
  margin-right: 10px;
}

<div class="parent">
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

БЛОГ НА HUSL

При перелистывании квадратики должны остаться на месте

Ответы (1 шт):