Swiper 覆盖流效果未按预期工作答案

【问题标题】：Swiper coverflow effect not working as expectedSwiper 覆盖流效果未按预期工作
【发布时间】：2019-11-11 19:02:50
【问题描述】：

我想在我的 Wordpress 主题内的 Swiper 实例上使用封面流效果。我注意到在我将开发控制台附加到页面下并且断点更改之前，效果不会被触发。我需要修复，这是代码。是否可以使用 PHP 或 JS 将 Wordpress 提供的 URL 转换为一个 blob？

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="profile" href="http://gmpg.org/xfn/11">

  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

  <div class="preloader text-center">
    <img class="img-fluid" src="<?php bloginfo('template_url')?>/assets/img/logo.png" width="300" id="preloader-img" />
  </div>

  <nav class="navbar fixed-top" id="bs-nav">
    <div class="container-fluid" style="z-index:1;">

      <div class="navbar-header">
        <a class="navbar-brand" href="<?php bloginfo('url'); ?>">
          <img src="<?php bloginfo('template_url'); ?>/assets/img/logo.png" id="logo-start" width="80" height="80">
          <img src="<?php bloginfo('template_url'); ?>/assets/img/white_logo.png" id="logo-scroll" width="80" height="80">
        </a>
      </div>

      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12 float-right">
          <button class="hamburger hamburger--spin" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expand="false" aria-label="<?php _e('Toggle Navigation'); ?>">
            <span class="hamburger-box">
            <span class="hamburger-inner"></span>
            </span>
          </button>
        </div>
      </div>
    </div>

      <div class="collapse navbar-collapse" id="navbar-content">
        <div class="container">
          <div class="row">
            <div class="col-md-4 col-lg-4">
              <?php
                wp_nav_menu( array(
                    'theme_location' => 'header-menu',
                    'menu'        => 'Menu',
                    'container'      => false,
                    'depth'          => 2,
                    'menu_class'     => 'navbar-nav ml-auto',
                    'walker'         => new Bootstrap_NavWalker(),
                    'fallback_cb'    => 'Bootstrap_NavWalker::fallback',
                ) );
              ?>
            </div>
            <div class="col-md-8 col-lg-8 portfolio-nav">
              <?php $v_nav = new WP_Query( ['post_type' => 'post', 'category_name' => 'portfolio', 'posts_per_page' => -1] ); ?>
              <div class="swiper-container portfolio-swipe">
                <div class="swiper-wrapper">
              <?php if( $v_nav->have_posts() ): while( $v_nav->have_posts() ): $v_nav->the_post(); ?>
                <div class="swiper-slide" style="background-image:url('<?php the_post_thumbnail_url(); ?>');">
                  <?php the_title('<h4>', '</h4>'); ?>
                </div>
              <?php endwhile; ?>
              <?php endif; wp_reset_postdata(); ?>
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </nav>
  <script>
  (function($){
    $(document).ready(function(){

      const swiper = new Swiper('.portfolio-swipe', {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows : true,
        }
        // pagination: {
        //   el: '.swiper-pagination',
        // },
      });
      swiper.init();

    });
  }(jQuery));
</script>
<!-- DEBUG CODE -->
  <style>
  .portfolio-swipe {
      width: 100%;
      height: 400px;
      padding-top: 50px;
      padding-bottom: 50px;
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;
    }

  .portfolio-nav{
    margin: 5.5em 0 2em 0;
    overflow:auto;
    height:400px;
  }
  .portfolio-nav::-webkit-scrollbar {
    display: none;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .portfolio-nav-link{
    color: white;

    position: absolute;
    left: 15%;
    margin: 2em 0 2em 0;
  }
  .portfolio-nav-link:hover ~ .portfolio-nav-thumb{
    opacity: 1;
    transition: all 300ms;
  }
  .portfolio-nav-thumb{
    opacity: 0;
  }
  </style>

【问题讨论】：

标签： javascript php css wordpress swiper

【解决方案1】：

我找到了一个简单的解决方案，但它似乎有效。我注意到当折叠的 bootstrap4 偏移菜单打开时滑动器滑块没有正确初始化，我决定在引导折叠动画完成后使用引导程序的shown.bs.collapse 事件来初始化滑动器。

这是我使用的代码，现在它工作正常，我将实现 WordPress 的 JSON RESTful API 来加载 swiper 内容。

const swiper = new Swiper('.portfolio-swipe', {
        loop: true,
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows : true,
        }
      });
$('.navbar-collapse').on('shown.bs.collapse', function(){
    swiper.update();
});

这似乎工作正常。调用更新函数将在滑动滑块中添加一个循环来解决问题！

【讨论】：