滑动滑块：如何解决错误

时间：2020-06-30 19:57:02

标签： javascript html css swiper

我为网站创建了一个Swiper滑块，但是幻灯片的显示出现了一些问题。

我的滑块有6张幻灯片，但只显示2张。 我找不到解决此问题的方法。

这是网站链接：www.vorscine.com（Wordpress，最新版本）

您知道一种更好的个性化滑块并避免此错误的方法吗？ 谢谢。

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo - navigation</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

  <!-- CSS slider -->
<style>
/*Font style*/

.product-slider-title{
    color: #232E62;
    font-family: 'Helvetica';
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

.product-slider-description{
    color: #232E62;
    font-family: 'Helvetica';
    font-size: 14px;
        text-align: left;
}

.product-slider-price{
    color: #232E62;
    font-family: 'Helvetica';
    font-size: 18px;
    font-weight: 700;
        text-align: left;
}

/* Button style */

.product-slider-button{
    color: #232E62;
    font-family: 'Alex Brush';
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    background-color: white;
    border: 1px solid #232E62;
    padding: 10 40px;
    max-width: 120px;
}

.product-slider-button:hover{
    color: #232E62;
}

/* Flex conditions */

.swiper-container{
    width: 100%;
    max-width: 1200px;
}

.swiper-wrapper{
    width: 100%;
    max-width: 1200px;
}

.swiper-slide{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 300px;
    width: 100%;
    max-width: 1200px;
}

.second-container{
    display: flex;
    flex-direction: column;
    align-content: space-between;
}

/* First container style */
.first-container{
    padding: 20px;
    margin-right: 50px;
}

/* Next-Prev button style */

.swiper-buttons{
    position: absolute;
    left: 17%;
    right: 73%;
    bottom: 20%;
    display: flex;
    align-content: center;
   /* max-width: 50px;
    width: 50%;*/
}

.swiper-button-next{
    height: 20px;
    color: #232E62;
    font-size: 20px;
}

.swiper-button-next::after{
    color: #232E62;
    font-size: 22px;
    font-weight: 900;
    padding: 5px 20px;
    border: 1px solid #232E62;
}

.swiper-button-prev{
    height: 20px;
    color: #232E62;
    font-size: 20px;
}

.swiper-button-prev::after{
    color: #232E62;
    font-size: 22px;
    font-weight: 900;
    padding: 5px 20px;
    border: 1px solid #232E62;
}
</style>

</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="first-container"><img width="600" height="246" src="http://vorscine.com/wp-content/uploads/2020/06/sunrise_I.png">
            </div>
            <div class="second-container">
                <h2 class="product-slider-title">Sunrise I</h2>
                <p class="product-slider-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                <p class="product-slider-price">Prix €</p>
                <a href="#" class="product-slider-button" role="button">
            <span class="product-slider-button-text">Acheter</span></a>
            </div>
      </div>
      <div class="swiper-slide">
        <div class="first-container"><img width="600" height="246" src="http://vorscine.com/wp-content/uploads/2020/06/sunrise_II.png">
            </div>
            <div class="second-container">
                <h2 class="product-slider-title">Sunrise II</h2>
                <p class="product-slider-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                <p class="product-slider-price">Prix €</p>
                <a href="#" class="product-slider-button" role="button">
                        <span class="product-slider-button-text">Acheter</span></a>
            </div>
      </div>
      <div class="swiper-slide">
        <div class="first-container"><img width="600" height="246" src="http://vorscine.com/wp-content/uploads/2020/06/sunset_I.png">
            </div>
            <div class="second-container">
                <h2 class="product-slider-title">Sunset I</h2>
                <p class="product-slider-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                <p class="product-slider-price">Prix €</p>
                <a href="#" class="product-slider-button" role="button">
                        <span class="product-slider-button-text">Acheter</span></a>
            </div>
      </div>
      <div class="swiper-slide">
        <div class="first-container"><img width="600" height="246" src="http://vorscine.com/wp-content/uploads/2020/06/sunset_II.png">
            </div>
            <div class="second-container">
                <h2 class="product-slider-title">Sunset II</h2>
                <p class="product-slider-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                <p class="product-slider-price">Prix €</p>
                <a href="#" class="product-slider-button" role="button">
                        <span class="product-slider-button-text">Acheter</span></a>
            </div>
      </div>
      <div class="swiper-slide">
          <div class="first-container"><img width="600" height="246" src="http://vorscine.com/wp-content/uploads/2020/06/sfumato_I.png">
          </div>
          <div class="second-container">
                <h2 class="product-slider-title">Sfumato I</h2>
                <p class="product-slider-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                <p class="product-slider-price">Prix €</p>
                <a href="#" class="product-slider-button" role="button">
                        <span class="product-slider-button-text">Acheter</span></a>
          </div>
      </div>
      <div class="swiper-slide">
        <div class="first-container"><img width="600" height="246" src="http://vorscine.com/wp-content/uploads/2020/06/sfumato_II.png">
          </div>
          <div class="second-container">
                <h2 class="product-slider-title">Sfumato II</h2>
                <p class="product-slider-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                <p class="product-slider-price">Prix €</p>
                <a href="#" class="product-slider-button" role="button">
                        <span class="product-slider-button-text">Acheter</span></a>
          </div>
      </div>
    </div>
    <!-- Add Arrows -->
 <div class="swiper-buttons"> 
 <div class="swiper-button-next"></div>
 <div class="swiper-button-prev"></div>
</div>

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

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>```

0 个答案:

没有答案
相关问题
最新问题