title: Customize the Slider Swiper
body: <p>Made a slider &quot;Swiper&quot;. To the right of it is the tag &quot;h1&quot;, the text of which needs to be changed depending on what the current picture is.</p>
  <ol>
  <li><p>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.</p>
  </li>
  <li><p>I tried to use the &quot;document.getElementsByClassName(&quot;left-element&quot;)&quot; class for searching, but it doesn't work that way.
  Works only with &quot;document.getElementById(&quot;box&quot;)&quot;.</p>
  </li>
  <li><p>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?</p>
  </li>
  </ol>
  <p><a href="https://i.stack.imgur.com/ylQ7t.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ylQ7t.gif" alt="enter image description here" /></a>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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";
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"&gt;
  &lt;script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="main"&gt;
    &lt;h1 class="left-element" id="box"&gt;Empty index&lt;/h1&gt;
      &lt;div class="swiper-container"&gt;
        &lt;div class="swiper-wrapper"&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;a href="#"&gt;&lt;img src="https://www.fonstola.ru/large/201309/119067.jpg"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
             &lt;a href="#"&gt;&lt;img src="https://www.fonstola.ru/large/201408/148243.jpg"&gt;&lt;/a&gt; 
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;a href="#"&gt;&lt;img src="https://www.fonstola.ru/large/201111/50599.jpg"&gt;&lt;/a&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  
          &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
          &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
          &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>