放大旋转木马的第一张幻灯片答案

【问题标题】：Enlarge the first slide of a carousel放大旋转木马的第一张幻灯片
【发布时间】：2021-12-05 11:44:37
【问题描述】：

我尝试按如下方式创建轮播。但我无法让它工作。我还尝试在光滑的轮播中使用中心模式。但它只适用于中间的幻灯片。如果有可以通过这种方式放大第一张幻灯片的方法或库，请指出。谢谢。

【问题讨论】：

请向我们展示您的代码以及您尝试过的内容。
我在下面添加了一个通用答案，但如果您添加您的实际代码，我们可以更好地查看并提供更具体的答案。

【解决方案1】：

您也许可以考虑为幻灯片的元素添加“活动”类 - 这样您就可以将适当的 CSS 应用于活动类，它只会影响活动元素。这意味着其中一个图像将是“活动的”，您可以对其进行任何操作，当它滑动时，另一个图像将变为“活动”并继承属性，而之前的图像将失去它们。

https://www.w3schools.com/howto/howto_js_active_element.asp

【讨论】：

【解决方案2】：

独立于您的实际幻灯片用例，您可以使用 css :first-child 伪类定位一组兄弟元素中的第一个元素（请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child）。

我添加了一个如何使用它的简单示例。

要将其传输到您的 swiper，您必须将 :first-child 伪类应用于包装您的各个幻灯片的类。

.wrapper {
  display: flex;
}

.entry {
  font-size: 15px;
}

.entry:first-child {
  font-size: 20px;
}

<div class="wrapper">
  <div class="entry">Entry</div>
  <div class="entry">Entry</div>
  <div class="entry">Entry</div>
  <div class="entry">Entry</div>
</div>

【讨论】：

非常感谢您的回复。我尝试过这个。您的回答使第一个滑块变大了，但是当我滑动到下一张幻灯片时，新幻灯片并没有变大。我希望放大作为第一张幻灯片出现的幻灯片。
为此，您需要通过滑块 js 指示当前活动的幻灯片。大多数滑块插件已经提供了诸如“当前”或“活动”之类的修饰符类。你用的是什么滑块javascript？
谢谢。我明白你的意思。我目前正在尝试使用光滑的滑块
@RuLee .slick-active 应该是您要查找的类（根据github.com/kenwheeler/slick/blob/master/slick/slick.js 的代码判断）。