Customize the Slider Swiper-CodePudding

Made a slider "Swiper". To the right of it is the tag "h1", the text of which needs to be changed depending on what the current picture is.

If you press the right button, then the indexes are 2, 3, 4, and if the left one is 0, 1, 2. It is unclear why this is happening.
I tried to use the "document.getElementsByClassName("left-element")" class for searching, but it doesn't work that way. Works only with "document.getElementById("box")".
Also, at initial loading, the picture tries to be drawn at 100% in width, but then collapses to the 50% I need. How to remove this effect?

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 >
  <h1  id="box">Empty index</h1>
    <div >
      <div >
        <div >
          <a href="#"><img src="https://www.fonstola.ru/large/201309/119067.jpg"></a>
        </div>
        <div >
           <a href="#"><img src="https://www.fonstola.ru/large/201408/148243.jpg"></a> 
        </div>
        <div >
          <a href="#"><img src="https://www.fonstola.ru/large/201111/50599.jpg"></a>
        </div>
     </div>

        <div ></div>
        <div ></div>
        <div ></div>
   </div>
  </div>

CodePudding user response：

I've removed some of your effect on the Swiper, but feel free to add it back (cause I tried to set up the default Swiper again on the Swiper Docs :D ).

And remember to change the <div > to <div >

Here's the code in 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";
})

Whenever the slide change, it'll assign the realIndex to swiperIndex

Here's the fiddle for you to have a clearer look: Fiddle