javascript - 如何使背景轮播图片变小-6ren

javascript - 如何使背景轮播图片变小

转载作者：行者123 更新时间：2023-11-28 13:53:07

24

4

我有这个旋转木马，我想让侧面的图片变小，侧面的图片比正面的图片靠后一点，如下图所示。

这样的话，我是不是应该给每张图片赋予不同的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/

24

4

0

文章推荐： html - 如何居中对齐 10 列 HTML 页面？

文章推荐： css - 滚动时 IE7 模态灯箱覆盖消失

文章推荐： ios - MKMarkerAnnotationView 标题未显示

文章推荐： javascript - 在 JavaScript 中使用函数指针

swift - UITableView 变小
我将尝试借助图片来解释我的问题: 首先，我刚刚向我的 UIViewController 添加了一个 UITableView。我选择它来显示它的框架，没有问题。接下来，当我将按钮连接到 UIViewC
android - 我想打开侧边栏时让 Activity 变小？
当我打开侧边栏时，我的背部 Activity 应该变小，我该如何实现？最佳答案嘿，你也可以为较小的 Activity 提供最佳效果。检查ResideMenu 库演示。非常适合您的回答关于andr
ios - 自动调整 UITableViewCell 变小
我正在尝试以编程方式创建一个 TableView 单元格原型(prototype)(类似于下面的原型(prototype))。设计了具有两个堆栈 View 的单元格， a) 包含文本标签的垂直堆栈
css - 如何让变小？
如何让td(highlighted)变小？我尝试将 witdh 设置为等于 50px 但不能显示更小的宽度最佳答案由于您使用的是表格，因此如果您希望整列为 50px，则需要将每一行中的每个 td
ios - UIWebView sizeToFit() 变小
似乎在 UIWebView 上使用 sizeToFit() 不会将大小更改为更小，只会更大。这是一些设置代码: var scrollView: UIScrollView! var webView: U
ios - iPhone 使斜体标签 () 变小
我们发现了 iPhone 渲染斜体标签的问题。当为它定义的 font-family 不同于其父级的 font-family 时，斜体文本呈现的比它应该的小得多。该问题似乎并未出现在所有 iOS 设备上
Android，如何使 AVD 变小？
我创建了一个具有以下特征的 AVD:目标:Android Honeycomb(API 级 Honeycomb)SD卡大小:64M皮肤:内置 WXVGA 但问题是，当我运行这个 ADV 时，它的尺寸比我
android - 如何让 TimePicker 变小
是否可以在 Activity xml 中使默认的 TimePicker 更小？我已经搜索过这个但到目前为止只发现了如何创建一个我不想做的自定义时间选择器，或者创建一个我也不想做的弹出窗口。有没有人
ios - 如何使 UIRefreshControl 变小？
UIRefreshControl 使用非常大的微调器: 我想调整它的大小(微调器的框架，而不是下拉长度!)看起来更像这样: 我在 the reference docs 中看不到任何内容关于如何做到这一
java - 打开抽屉导航时如何使背景 Activity 变小？
我想在打开Navigation Drawer时让我的后台Activity变小一点，模拟Airbnb应用中存在的效果.我想最好的解释是截图: 但重点不是让View只是变小，而是让它成为一个与Drawer
html - 页面加载后移动 View 变小
我开发的其中一个网站有点问题。这个问题很简单，但是解决方案似乎有点难。问题问题是页面最初在移动设备上呈现时应该呈现的样子，但在页面加载完成后，页面会立即调整大小以适合视口(viewport)。没什
android - 包含两行文本时 TextView 变小
我有一个简单的水平 LinearLayout，里面有四个相同样式的 TextView。当 TextView 中的文本需要两行时，TextView 变小: 我不明白为什么。有人可以帮忙吗？谢谢布局
apache-spark - 使用spark的ALS时如何使RMSE(均方根误差)变小？
我需要一些建议来构建一个好的模型来使用 Collaborative Filtering 进行推荐。的 Spark 。 official website中有示例代码.我还通过了以下内容: from py
java - 如何使 JTextField 变小，而不是填满整个空间？
这里我有一个用于输入区域的简单的 buildPanel 方法。我尝试使用 GridLayout(7,1)，但前 4 个 JTextField 似乎填满了其 block 的整个空间，看起来相当难看。有
javascript - p5.js 如何改变文字粗细(变小)？
需要明确的是:我知道如何更改文本的大小，我想更改文本的粗细而不更改字体。这可能吗？下面的代码是使“文本”一词出现在 Canvas 中间的基本代码。我需要更改或添加什么才能使文本厚度变薄？ funct
ios - UIScrollview - 如何在滚动屏幕时使 subview 变小
我是 iOS 的初学者，所以我不确定要在这里研究什么。我有一个添加了几个方形 subview 的 UIScrollView。如何让 subview 在滚动出屏幕时变小，在接近屏幕中心时变大？ #imp
javascript - Select 上的 ng-pattern 变小
我正在开发一个 Angular 应用程序，我需要对一个选择元素进行模式验证。仅在 select 上使用 ng-pattern 是行不通的。所以我在隐藏输入上创建了一个具有相同模型和 ng-patter
android - 动态更改源后，Xamarin Forms ImageButton 变小
我在“语言页面”上有 3 个 ImageButton，代表应用程序 (Android) 的 3 种不同语言。
android - 在 NestedScrollView 中时 MapView 变小
我得到的 CoordinatorLayout 的结构类似于: ... ... almost all elemen
android - 出现 snackbar 时使 ScrollView 变小
我刚开始在我的 android 应用程序中使用 Snackbar，但我无法将 ScrollView 缩小到不覆盖 ScrollView 内部的任何内容。这是我的 Activity 的 xml 布局:

首页

博学

6Ren·AI

商城

javascript - 如何使背景轮播图片变小