时间戳

首页 > 解决方案 > 如何在同一幻灯片中添加另一个带有图像的 div？

javascript - 如何在同一幻灯片中添加另一个带有图像的 div？

问题描述

我想在每张幻灯片的右侧添加另一张照片（每张幻灯片中应该有 2 张照片），但我不知道该怎么做。

这是我的代码：

.stackend .slide1 {
background-image: url(https://api.stackend.com/media/get/c71/cms/mitchell-orr-389605-unsplash-jpg.jpg);
color:white;
padding:50px;
font-size:3em;
height:60vw;
width:50%;
background-size:cover;
background-repeat:no-repeat;
background-position:center top;
}

.stackend .slide2 {
background-image: url(https://api.stackend.com/media/get/c71/cms/wade-austin-ellis-677123-unsplash-jpg.jpg);
color:white;
padding:50px;
font-size:3em;
height:60vw;
width:50%;
background-size:cover;
background-repeat:no-repeat;
background-position:center top;
}
<!-- This is the stackend launch script -->
<script defer type="text/javascript" src="https://stackend.com/launch.js"></script>

<!--This is the actual slideshow-->
 
<div data-stackend-type="stackend-slideshow" data-stackend-indicators="true">
 
  
  <!-- This is the code bins slide1 and slide2 -->
  <div data-stackend-type="stackend-cms" data-stackend-id="71:21"></div>
   <div data-stackend-type="stackend-cms" data-stackend-id="71:21"></div>
  <div data-stackend-type="stackend-cms" data-stackend-id="71:22"></div> 

<!-- This closes the slideshow -->
</div>

所以，我需要一个 div 左边，一个 div 右边，彼此 50% 的宽度。

标签： javascripthtmlcss

解决方案

用下面的代码替换你的css，因为添加 :before 和 :after 将解决你的目的

.stackend .slide1 {
    position: relative;
    color:white;
    font-size:3em;
    height:100vh;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center top;
}

.stackend .slide1:before{
    content:'';
    position: absolute;
    left:0;
    height:100%;
    background: url(https://api.stackend.com/media/get/c71/cms/mitchell-orr-389605-unsplash-jpg.jpg) no-repeat;
    background-size: cover;
    width:50%;
}

.stackend .slide1:after{
    content:'';
    position: absolute;
    right:0;
    height:100%;
    background: url(https://api.stackend.com/media/get/c71/cms/wade-austin-ellis-677123-unsplash-jpg.jpg) no-repeat;
    background-size: cover;
    width:50%;
}

.stackend .slide2 {
    position:relative;
    color:white;
    font-size:3em;
    height:100vh;
    width:100%;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center top;
}

.stackend .slide2:before{
    content:'';
    position: absolute;
    left:0;
    height:100%;
    background: url(https://api.stackend.com/media/get/c71/cms/wade-austin-ellis-677123-unsplash-jpg.jpg) no-repeat;
    background-size: cover;
    width:50%;
}

.stackend .slide2:after{
    content:'';
    position: absolute;
    right:0;
    height:100%;
    background: url(https://api.stackend.com/media/get/c71/cms/wade-austin-ellis-677123-unsplash-jpg.jpg) no-repeat;
    background-size: cover;
    width:50%;
}

推荐阅读