制作绝对：位置 div 向左滑动并淡出 - WordPress 上的引导程序

Posted 2023-03-06

【中文标题】制作绝对：位置 div 向左滑动并淡出 - WordPress 上的引导程序

【英文标题】：Make a absolute:position div slide to left and fadeout - Bootstrap on WordPress

【发布时间】：2020-05-15 14:51:13

【问题描述】：

在我基于 Bootstrap v.4.3 框架的 WordPress 中，我有一个基于图像的轮播和一个纯色图层 div。 我希望纯色层淡出并显示每个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，它是轮播顶部的纯色层：

.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 在 carousal 事件上使用以下代码为淡出设置动画：

$('#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)');
);

没有发生向左滑动和淡出。 这是 JSFiddle (https://jsfiddle.net/kingBethal/s1g56bf0/8/)。 帮帮我。

【问题讨论】：

你能创建一个工作小提琴或codepen请

这里是 JSFiddle jsfiddle.net/kingBethal/s1g56bf0/8

【参考方案1】：

我所做的是在slide-layer-row 中放置两个 div（每个背景颜色一个），然后将整个内容移至显示下一张幻灯片。然后在下一张幻灯片之前重置其位置。这样，您就无需关注slid-bs-carousel 事件。

https://jsfiddle.net/rgy64uwm/

如果您希望实体块的柔和快速淡入，您可以使用一些嵌套回调来实现。

https://jsfiddle.net/8eqkua9s/

---

编辑： 添加了 sn-p。在这个版本中，盒子的大小是动态设置的以匹配第一张图片。

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>

【讨论】：

这太棒了。但是，我将与@Vitorino fernandes 一起仅考虑纯 CSS。

@theKing 可以理解，尽管他的效果与您的示例有些不同，因为灰色框在滑动时会溶解。但是您可以通过在动画中添加一个额外的步骤来轻松调整它：99% width: 1%; opacity: 1;

【参考方案2】：

在我的情况下，我使用引导轮播 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>