Fatal编程技术网
  • javascript/
  • Javascript Swiper coverflow效果未按预期工作

Javascript Swiper coverflow效果未按预期工作

javascript php css wordpress

Javascript Swiper coverflow效果未按预期工作,javascript,php,css,wordpress,swiper,Javascript,Php,Css,Wordpress,Swiper,我想在Wordpress主题中的Swiper实例上使用coverflow效果。我注意到，在我将开发控制台连接到页面下并更改断点之前，不会触发该效果。我需要修复，这是代码。是否可以用PHP或JS将Wordpress提供的URL转换为blob格式 <!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'ch

我想在Wordpress主题中的Swiper实例上使用coverflow效果。我注意到，在我将开发控制台连接到页面下并更改断点之前，不会触发该效果。我需要修复，这是代码。是否可以用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>



我找到了一个简单的解决办法，但似乎有效。我注意到当打开折叠的bootstrap4 offset菜单时，swiper滑块没有正确初始化，我决定在引导折叠动画完成后，使用引导的
show.bs.collapse
事件初始化swiper

这是我使用过的代码，现在运行良好，我将实现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();
});



这似乎很有效。调用update函数将创建一个循环，并将其添加到swiper滑块中，从而实现这些技巧