我有这个轮播,我想让侧面的图片变小,侧面的图片稍微位于正面图片的后面,如下图所示。
要这样,我应该给每张图片赋予不同的class,并在css文件中修改它,还是有其他方法?
$(document).ready(function() {
$('.carousel').carousel();
});
.carousel-item{
position: absolute;
background-color:green;
}
img {
width: 150px;
position: relative;
border-radius: 10px;
}
<html lang="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="{% static 'functionality/imageslider.js' %}"></script>
<link rel="stylesheet" type='text/css' href="{% static 'blog/imageslider.css' %}">
<title></title>
</head>
<body>
<div class="carousel">
<div class="carousel-item"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt="">
</div>
<div class="carousel-item"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt="" />
</div>
<div class="carousel-item"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt=""/>
</div>
<div class="carousel-item"
><img
src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg"
alt=""/>
</div>
</div>
</body>
</html>
最佳答案
尝试将 perspective: 1000px;
添加到父元素
$(document).ready(function() {
$('.carousel').carousel();
});
.carousel {
position: relative;
height: 300px;
perspective: 1000px; /* Add perspective */
}
.carousel-item {
position: absolute;
width: 150px;
background-color: green;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
}
.carousel img {
width: 100%;
display: block;
position: relative;
}
<div class="carousel">
<div class="carousel-item">
<img src="//placehold.it/250x500/f00/000?text=box+1" alt="">
</div>
<div class="carousel-item">
<img src="//placehold.it/250x500/fff/000?text=box+2" alt="">
</div>
<div class="carousel-item">
<img src="//placehold.it/250x500/fff/000?text=box+3" alt="">
</div>
<div class="carousel-item">
<img src="//placehold.it/250x500/fff/000?text=box+4" alt="">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
关于javascript - 如何将背景轮播图片变小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59362961/