自定义滑块滑动器

Question

制作了一个滑块“Swiper”。右边是标签“h1”，标签的文字需要根据当前图片的内容进行更改。

如果按右键，则索引为2、3、4，如果按左键，则索引为0、1、2。目前还不清楚为什么会这样。
我尝试使用“document.getElementsByClassName("left-element")"class 进行搜索，但它不起作用。仅适用于 "document.getElementById("box")".
此外，在初始加载时，图片试图以 100% 的宽度绘制，但随后会折叠到我需要的 50%。如何消除这种影响？

var swiper = new Swiper('.swiper-container', {
        effect: 'cube',
        grabCursor: true, 
        slidesPerView: 'auto',
        
        cubeEffect: {
           shadow: true,
           slideShadows: true,
           shadowOffset: 50,
           shadowScale: 0.3,
           centerSlidesBounds: true,
        },

        direction: 'horizontal',
        loop: true,

        
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',

        },

 on: {
    init: function () {
     
    },
    },

        });

swiper.on('slideChange', function () {
  let name = swiper.activeIndex;
 /*
  let element = document.getElementsByClassName("left-element");
  alert(name);
 */
  let element = document.getElementById("box");
  element.innerHTML = (name) + " " + "Index";
});

.main {
  position: fixed;
  padding: 16px;
  margin-top:40px;
  width: 50%; 
}

.swiper-button-prev{
left:  2%;
}

.swiper-button-next{
left:  92%;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  width: 100%;
  bottom: -25%;
}

.left-element {
    background: silver;
    display: inline-block;
    position: absolute;
    left: 100%;
    width: 80%;
    margin-top: 0;
}

h1.left-element {
width: 80%;
height: 90%
}

 img{
width: 100%;
height: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

<div class="main">
  <h1 class="left-element" id="box">Empty index</h1>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="#"><img src="https://www.fonstola.ru/large/201309/119067.jpg"></a>
        </div>
        <div class="swiper-slide">
           <a href="#"><img src="https://www.fonstola.ru/large/201408/148243.jpg"></a> 
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="https://www.fonstola.ru/large/201111/50599.jpg"></a>
        </div>
     </div>

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
   </div>
  </div>

Answer 1

我已经删除了您对 Swiper 的一些影响，但您可以随意将其添加回来（因为我试图在 Swiper 文档中再次设置默认 Swiper :D ）。

并记得将 <div class="swiper-container"> 更改为 <div class="swiper">

这是 Javascript 中的代码：

const swiper = new Swiper(".swiper-container", {
  // Install modules,
  direction: 'horizontal',
  initialSlide: 0,
  loop: true,
  speed: 500,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  // ...
});



swiper.on('slideChange', () => {
let swiperIndex = swiper.realIndex
console.log('Swiper index right now: ', swiperIndex)
let element = document.getElementById("box")
element.innerHTML = (swiperIndex) + " " + "Index";
})

每当幻灯片发生变化时，它会将 realIndex 分配给 swiperIndex

这里fiddle给大家看的更清楚：Fiddle

自定义滑块滑动器

Customize the Slider Swiper

html

javascript

css

swiperjs