主页 / 问题 / 1588340
Accepted
Danila
Asked:2024-07-25 20:46:09 +0000 UTC2024-07-25 20:46:09 +0000 UTC

如何设置滑块中中间幻灯片之前的幻灯片的样式？

  • 772

有一项任务是制作一个由五个活动幻灯片组成的滑块：中央的幻灯片较大，两侧的幻灯片稍小，外部的幻灯片是标准的。使用纯 CSS，可以只设置中央的样式和后面的样式：

let owl = $('.owl-carousel');

owl.owlCarousel({
  center: true,
  items: 5,
  loop: true,
  nav: true
});
.container {
  max-width: 1400px;
  margin: 50px auto;
}
.slider {
  border: 1px solid red;
}
.slide {
  padding: 50px 0;
  transition: .5s;
}
.slide img {
  display: block;
  max-width: 100%;
}
.owl-item.center {
  transform: scale(1.5) !important;
  transition: .3s;
  position: relative;
  z-index: 2;
}
.owl-item.center + .owl-item {
  transform: scale(1.25);
  transition: .3s;
  position: relative;
  z-index: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="container">
  <div class="slider owl-carousel">
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
  </div>
</div>

我尝试使用 js 在上一张幻灯片中添加一个类并以这种方式设置其样式，但效果不佳 - 当翻转滑块时，该类被添加到另一个元素中：

在此输入图像描述

/出于某种原因，在片段中根本没有添加任何内容/

let owl = $('.owl-carousel');

owl.owlCarousel({
  center: true,
  items: 5,
  loop: true,
  nav: true
});

$('.owl-item.active.center').prev().addClass('prev');

owl.on('changed.owl.carousel', function(event) {
  $('.owl-item').removeClass('prev');
  $('.owl-item.active.center').prev().addClass('prev');
});
.container {
  max-width: 1400px;
  margin: 50px auto;
}
.slider {
  border: 1px solid red;
}
.slide {
  padding: 50px 0;
  transition: .5s;
}
.slide img {
  display: block;
  max-width: 100%;
}
.owl-item.center {
  transform: scale(1.5) !important;
  transition: .3s;
  position: relative !important;
  z-index: 2;
}
.owl-item.center + .owl-item,
.owl-item.prev {
  transform: scale(1.25);
  transition: .3s;
  position: relative;
  z-index: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="container">
  <div class="slider owl-carousel">
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
  </div>
</div>

告诉我，如何设置中间幻灯片中上一张幻灯片的样式？

javascript

1 个回答

  1. Best Answer

    给你。拐杖当然是特定的，但是你能做什么呢？我在样式中添加了最后几行，您可以将它们与旧代码进行比较，您就会明白我添加的内容））。您可以自己在中心索引之后添加 Z 索引，这样您就没有时间进行更正。

    let owl = $('.owl-carousel');

owl.owlCarousel({
  center: true,
  items: 5,
  loop: true,
  nav: true
});

$('.owl-item.active.center').prev().addClass('prev');

owl.on('changed.owl.carousel', function(event) {
  $('.owl-item').removeClass('prev');
  $('.owl-item.active.center').prev().addClass('prev');
});
    .container {
  max-width: 1400px;
  margin: 50px auto;
}
.slider {
  border: 1px solid red;
}
.slide {
  padding: 50px 0;
  transition: .5s;
}
.slide img {
  display: block;
  max-width: 100%;
}
.owl-item.center {
  transform: scale(1.5) !important;
  transition: .3s;
  position: relative !important;
  z-index: 3;
}
.owl-item.center + .owl-item,
.owl-item.active + .owl-item {
  transform: scale(1.25);
  transition: .3s;
  position: relative;
  z-index: 2;
}
.owl-item.center + .owl-item + .owl-item, .owl-item.center + .owl-item + .owl-item + .owl-item {
  transform: scale(1);
  z-index: 1;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="container">
  <div class="slider owl-carousel">
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
    <div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
  </div>
</div>

    • 1

相关问题