Сделайте абсолютное: положение div слайд влево и затухание - Bootstrap на WordPress - PullRequest
Новая
       81

Сделайте абсолютное: положение div слайд влево и затухание - Bootstrap на WordPress

4 голосов
/ 30 января 2020

В моем WordPress, основанном на Bootstrap v.4.3 framework, у меня есть карусель на основе изображений и цветной слой div solid поверх него. Я хочу, чтобы слой цвета solid исчез и раскрыл нижнее изображение карусели для каждого carousel-item, пример в этой теме (https://themes.muffingroup.com/be/architect5/?utm_source=demos).

Ниже HTML: 

<div class="container-fluid home-slide no-gutters" id="home-slide">
    <!-- IMAGES ROW -->
    <div class="row slide-images-row">
        <div id="carousel-home" class="carousel slide carousel-fade" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="/img/one.png" class="img-responsive d-block"/>
                </div>
                <div class="carousel-item">
                    <img src="/img/two.png" class="img-responsive d-block"/>
                </div>
            </div>
        </div>
    </div>

    <!-- SOLID LAYER ROW -->
    <div class="row slide-layer-row">
        <div class="slide-layer"></div>
    </div>
</div>

Ниже CSS для размещения .slide-layer-row строки div, которая является solid -цветным слоем поверх карусели: 

.home-slide {
    position: relative;
}
.slide-layer-row {
    background-color: #ccc;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    margin: 0;
    bottom: 0;
    right: 0;
}

У меня есть выровняли .slide-layer для анимации затухания, используя jQuery для событий карусели с кодом ниже: 

$('#carousel-home').on('slide.bs.carousel', function () {
    $(".slide-layer").css('background-color', '#ccc');
    $(".slide-layer").hide("slide", { direction: "left" }, 1000);
});
$('#carousel-home').on('slid.bs.carousel', function () {
    $(".slide-layer").css('background-color', 'rgba(0,0,0,0.5)');
});

Скольжения влево и fadeOut не происходит.
Вот JSFiddle ( https://jsfiddle.net/kingBethal/s1g56bf0/8/).
Помогите мне.

Ответы [ 2 ]

2 голосов
/ 02 февраля 2020

Что я сделал, так это поместил два элемента div внутри slide-layer-row (по одному на каждый цвет фона) и переместил все это, чтобы открыть следующий слайд. Затем сбросьте свою позицию перед следующим слайдом. Таким образом, вам не нужно следить за событием slid-bs-carousel.

https://jsfiddle.net/rgy64uwm/

И если вы хотите, чтобы это мягкое быстрое исчезновение * Блок 1028 *, вы можете сделать это с помощью нескольких вложенных обратных вызовов.

https://jsfiddle.net/8eqkua9s/

Редактировать: Добавлен фрагмент. В этой версии размеры ящиков динамически устанавливаются в соответствии с первым изображением. 

var imageWidth = $('.carousel-item.active img').width();
$('.slide-layer-row').css('width', (imageWidth * 3 + 'px'));
$('.slide-layer-out').css('width', imageWidth + 'px');
$('.slide-layer-in').css('width', imageWidth * 2 + 'px');

$('#carousel-home').on('slide.bs.carousel', function() {
  $('.slide-layer-out').animate({
    'opacity': '1'
  }, 300, function() {
    $('.slide-layer-row').animate({
      'left': -imageWidth + 'px',
    }, 1000, function() {
      $('.slide-layer-out').animate({
        'opacity': '0.3'
      }, 100, function() {
        $(".slide-layer-row").css({
          'left': '0',
        })
      })
    });
  })
});
.slide-images-row {
  z-index: 0;
}

.home-slide {
  position: relative;
  overflow-x: hidden;
}

.slide-layer-row {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  margin: 0 !important;
  height: 100%;
}

.slide-layer-out,
.slide-layer-in {
  height: 100%;
  display: inline-block;
  position: relative;
  background-color: rgba(100, 100, 100, 1);
  opacity: 0.3;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>


<div class="container-fluid home-slide no-gutters" id="home-slide">
  <!-- IMAGES ROW -->
  <div class="row slide-images-row">
    <div id="carousel-home" class="carousel slide carousel-fade" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="img-responsive d-block" />
        </div>
        <div class="carousel-item">
          <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" class="img-responsive d-block" />
        </div>
      </div>
    </div>
  </div>

  <!-- SOLID LAYER ROW -->
  <div class="row slide-layer-row">
    <div class="slide-layer-out"></div>
    <div class="slide-layer-in"></div>
  </div>
</div>
1 голос
/ 05 февраля 2020

В моем случае я использую bootstrap карусели active класс и pseudo элемент, чтобы дать серый background 

.slide-images-row {
  z-index: 0;
}

.home-slide {
  position: relative;
  overflow-x: hidden;
}

.slide-layer-row {
  position: absolute;
  z-index: 10;
  top: 0;
  left: -100%;
  margin: 0;
  width: 200%;
  height: 100%;
}

.slide-layer-out,
.slide-layer-in {
  width: 50%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.slide-layer-out {
  background-color: #ccc;
}

.slide-layer-in {
  background-color: rgba(0, 0, 0, 0.5);
}

.carousel {
  width:100%;
}

.carousel-item {
}

.carousel-item:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: grey;
  left: 0;
  top: 0;
  opacity: 1;
}

.carousel-item.active:before {
  animation: mymove 2s forwards;
  animation-delay: 1s;
}

@keyframes mymove {
  0% {
    width: 100%;
    opacity: 1;
  }
  100% {
    width: 0%;
    opacity: 0;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

<div class="container-fluid home-slide no-gutters" id="home-slide">
  <!-- IMAGES ROW -->
  <div class="row slide-images-row">
    <div id="carousel-home" class="carousel slide carousel-fade" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="img-responsive d-block" />
        </div>
        <div class="carousel-item">
          <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" class="img-responsive d-block" />
        </div>
      </div>
    </div>
  </div>
</div>
...