Swiper does not work

Asked 2 years ago, Updated 2 years ago, 85 views

I'm making an LP.

I'm thinking of installing a slide show using a swiper.
I looked it up online and tried it, but it didn't work.

<!DOCTYPE html>
<html lang="ja">
<head>
    <metacharset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <title>Document</title>
</head>

(omitted)
~</footer>

    <script src="js/script.js"></script>
    <script>
        var mySwiper = newSwiper('.swiper-container', {
          // Set options below
          loop —true,
          autoplay: {
            delay —5000,
          },      
        });
    </script>  
</body>
</html>
.card-slider{
    display:flex;
    justify-content:space-between;
}

US>.slider{
    width —322px;
    background: #FFFFFF0% 0% no-repeat padding-box;
    border —1px solid#DDDDDD;
    border-radius —8px;
}

US>.slider img{
    width: 100%;
}

.slider-txt{
    padding-top —18px;
    padding-left: 18px;
    padding-right —17px;
    text-align:left;
    height —196px;
    position:relative;
}

.slider-txtth3{
    font-size: 16px;
    line-height —24px;
    font-weight:bold;
}

.slider-txtp{
    bottom:30px;
    position:absolute;
}
<!--Slider main container div element-->
<div class="swiper-container">

<!--- The (enclosed slide) div element of the wrapper (class name = slider) -->
  <div class="card-slider">

<!--- div element (1) on each slide -->
     <div class="slider">
       <img src="img/digital-marketing-1433427_1280.png" alt="Performance Image 1">
       <div class="slider-txt">
          <h3> We have coded our sample recruitment site!</h3>
          <p>/p>
       </div>
     </div>

<!--- div element (2) on each slide -->
     <div class="slider">
       <img src="img/arnel-hasanovic-MND-Rka1o0Q-unsplash.png" alt="Performance Image 2">
       <div class="slider-txt">
         <h3>Coding conference event LP has been created!</h3>
         <p>Adopted technology: jQuery, WordPress<br>Implementation period: 4 weeks <br>Coder in charge: Ishii</p>
       </div>
      </div>

<!--- div element (3) on each slide -->
      <div class="slider">
        <img src="img/digital-marketing-1433427_1280.png" alt="Performance Image 3">
        <div class="slider-txt">
          <h3>Sample Co., Ltd.We have coded the recruitment site!</h3>
          <p>Adopted technology: jQuery, Bootstrap 4<br>Implementation period: 2 weeks<br>Contact Coder: Ishii</p>
        </div>
       </div>

<!--- div element (4) on each slide -->
       <div class="slider">
         <img src="img/hal-gatewood-tZc3vjPCk-Q-unsplash.png" alt="Performance Image 4">
           <div class="slider-txt">
             <h3>Sample Co., Ltd.We have coordinated the mail order site!</h3>
             <p>Adopted technology: jQuery, Bootstrap 4<br>Implementation period: 6 weeks<br>Contact Coder: Ishii</p>
           </div>
        </div>

<!--- div element (5) on each slide -->                     
        <div class="slider">
          <img src="img/digital-marketing-1433427_1280.png" alt="Performance Image 5">
             <div class="slider-txt">
                <h3>We have coordinated our sample recruitment site!</h3>
                <p>Adopted technology: jQuery, Bootstrap 4<br>Implementation period: 2 weeks<br>Contact Coder: Ishii</p>
              </div>
          </div>

    </div><!--- The (enclosed slide) div element of the wrapper (class name = slider) -->
   </div><!--- Slider main container div element -->

error messages:

autoplay.js:87 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at autoplay.js —87
    at Array.forEach(<anonymous>)
    at.pause (autoplay.js:86)
    att.onVisibilityChange (autoplay.js:95)
(anonymous) @autoplay.js:87
[email protected] —86
[email protected]:95

utils.js:28 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter1 is not of type 'Element'.
    utils.js —28
    at T(utils.js:45)
    att.getTranslate(getTranslate.js:15)
    att.loopFix (loopFix.js:20)
    at autoplay.js —36

javascript swiper

2022-09-29 22:18

1 Answers

The error states that the specified element cannot be retrieved (undefined) because the class name in HTML is not appropriate.

Have you seen the Swiper official document?
It's a much more reliable document than searching for blogs on the street.
Basically, if you implement HTML according to Getting Started in the official documentation, it will work fine.
HTML Layout in the official document is described as follows:

<!--Slider main container-->
<div class="swiper-container">
  <!--Additional required wrapper-->
  <div class="swiper-wrapper">
    <!--Slides-->
    <div class="swiper-slide">Slide1</div>
    <div class="swiper-slide">Slide2</div>
    <div class="swiper-slide">Slide3</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>

From here, simply describe the contents of the div.swiper-slide element that will be the actual slide.
Do not change any other tags or class names (although they can be changed strictly, they are not customized for beginners, so get used to implementing them according to the template first).

The class name may be confused with click.
Slick and swiper are completely different things.Be careful.

The following snippets have changed the class name appropriately.I'm also fiddling with my style.

 var mySwiper=newSwiper('.swiper-container', {
          // Set options below
          loop —true,
          autoplay: {
            delay —5000,
          },      
        });
.card-slider{
    display:flex;
    justify-content:space-between;
}

.swiper-slide {
  width: 100%;
  background-color:#abe;
}

.slider-txt{
    padding-top —18px;
    padding-left: 18px;
    padding-right —17px;
    text-align:left;
    height —196px;
    position:relative;
}

.slider-txtth3{
    font-size: 16px;
    line-height —24px;
    font-weight:bold;
}

.slider-txtp{
    bottom:30px;
    position:absolute;
}
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<!--Slider main container div element-->
<div class="swiper-container">

<!--- The (enclosed slide) div element of the wrapper (class name = slider) -->
  <div class="swiper-wrapper">

<!--- div element (1) on each slide -->
     <div class="swiper-slide">
       <img src="img/digital-marketing-1433427_1280.png" alt="Performance Image 1">
       <div class="slider-txt">
          <h3> We have coded our sample recruitment site!</h3>
          <p>/p>
       </div>
     </div>

<!--- div element (2) on each slide -->
     <div class="swiper-slide">
       <img src="img/arnel-hasanovic-MND-Rka1o0Q-unsplash.png" alt="Performance Image 2">
       <div class="slider-txt">
         <h3>Coding conference event LP has been created!</h3>
         <p>Adopted technology: jQuery, WordPress<br>Implementation period: 4 weeks <br>Coder in charge: Ishii</p>
       </div>
      </div>

<!--- div element (3) on each slide -->
      <div class="swiper-slide">
        <img src="img/digital-marketing-1433427_1280.png" alt="Performance Image 3">
        <div class="slider-txt">
          <h3>Sample Co., Ltd.We have coded the recruitment site!</h3>
          <p>Adopted technology: jQuery, Bootstrap 4<br>Implementation period: 2 weeks<br>Contact Coder: Ishii</p>
        </div>
       </div>

<!--- div element (4) on each slide -->
       <div class="swiper-slide">
         <img src="img/hal-gatewood-tZc3vjPCk-Q-unsplash.png" alt="Performance Image 4">
           <div class="slider-txt">
             <h3>Sample Co., Ltd.We have coordinated the mail order site!</h3>
             <p>Adopted technology: jQuery, Bootstrap 4<br>Implementation period: 6 weeks<br>Contact Coder: Ishii</p>
           </div>
        </div>

<!--- div element (5) on each slide -->                     
        <div class="swiper-slide">
          <img src="img/digital-marketing-1433427_1280.png" alt="Performance Image 5">
             <div class="slider-txt">
                <h3>We have coordinated our sample recruitment site!</h3>
                <p>Adopted technology: jQuery, Bootstrap 4<br>Implementation period: 2 weeks<br>Contact Coder: Ishii</p>
              </div>
          </div>

    </div><!--- The (enclosed slide) div element of the wrapper (class name = slider) -->
   </div><!--- Slider main container div element -->

2022-09-29 22:18

If you have any answers or tips

Popular Tags
python x 4647
android x 1593
java x 1494
javascript x 1427
c x 927
c++ x 878
ruby-on-rails x 696
php x 692
python3 x 685
html x 656
Popular Questions

570 rails db:create error: Could not find mysql2-0.5.4 in any of the sources

587 Scrap text information after the "View More" button when searching in the Yahoo! News search window

581 PHP ssh2_scp_send fails to send files as intended

577 Understanding How to Configure Google API Key

615 Uncaught (inpromise) Error on Electron: An object could not be cloned

© 2024 OneMinuteCode. All rights reserved.