为当前的 swiperjs 幻灯片添加属性

编程问答 2022-05-01

问题描述

我正在尝试研究如何将 tabindex 为 1 添加到活动的 swiperjs 幻灯片。我查看了文档并相信我在正确的轨道上。

当幻灯片发生变化时，我可以让它登录到控制台

但是当我尝试添加选项卡索引属性时，我收到了一个无法解决的控制台错误 未捕获的类型错误：无法读取 null 的属性“setAttribute”

任何建议将不胜感激

谢谢

<html>

<body>



  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

  <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>



  <!-- Slider main container -->
  <div class="swiper-container swipercarousel">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->


      <div class="swiper-slide">

        <h3>slide1</h3>
        <p>
          Lorem ipsum dolor sit amet,consectetur adipiscing elit. Donec imperdiet lectus purus,a dignissim magna elementum vitae.
        </p>

        <a href="/link" class="button button--color-white" rel="noopener" target="" <a href="/about/" class="button button--color-white" rel="noopener" target="" tabindex="-1">Find out more</a>

      </div>

      <div class="swiper-slide">

        <h3>slide2</h3>
        <p>
          Lorem ipsum dolor sit amet,a dignissim magna elementum vitae.
        </p>

        <a href="/link" class="button button--color-white" rel="noopener" target="" tabindex="-1">Find out more</a>

      </div>



      <div class="swiper-slide">


        <h3>slide3</h3>
        <p>
          Lorem ipsum dolor sit amet,a dignissim magna elementum vitae.
        </p>

        <a href="/link" class="button button--color-white" rel="noopener" target="" tabindex="-1">Find out more</a>

      </div>

      <div class="swiper-slide">

        <h3>slide4</h3>
        <p>
          Lorem ipsum dolor sit amet,a dignissim magna elementum vitae.
        </p>

        <a href="/link" class="button button--color-white" rel="noopener" target="" tabindex="-1">Find out more</a>

      </div>

      <div class="swiper-slide">

        <h3>slide5</h3>
        <p>
          Lorem ipsum dolor sit amet,a dignissim magna elementum vitae.
        </p>

        <a href="/link" class="button button--color-white" rel="noopener" target="" tabindex="-1">Find out more</a>

      </div>

      <div class="swiper-slide">
        <h3>slide6</h3>
        <p>
          Lorem ipsum dolor sit amet,a dignissim magna elementum vitae.
        </p>

        <a href="/link" class="button button--color-white" rel="noopener" target="" tabindex="-1">Find out more</a>

      </div>




    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar
    <div class="swiper-scrollbar"></div>
  -->
  </div>




  <script>
    var swipercarousel = new Swiper('.swipercarousel',{
      // Optional parameters
      direction: 'horizontal',loop: true,spaceBetween: 10,centeredSlides: true,slidesPerView: 1.2,//slidesOffsetBefore:30,keyboard: {
        enabled: true,onlyInViewport: true,},// Responsive breakpoints
      breakpoints: {
        // when window width is >= 640px
        640: {
          slidesPerView: 2,}
      },// If we need pagination
      pagination: {
        el: '.swiper-pagination',clickable: true,// Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',// And if we need scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',on: {
        slideChange: function() {
          // do something
          console.log('something');
          var tab = document.querySelector(".swiper-slide-active a")
          tab.setAttribute("tabIndex","1");

        },}


    });
  </script>


</body>

</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

attributescarouseljavascriptjqueryswiperjs