个人中心
gpt4 book ai didi

javascript - Swiper coverflow 效果未按预期工作

转载 作者：行者123 更新时间：2023-11-28 19:13:44 25 4
gpt4 key购买 nike

我想在我的 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 偏移菜单打开时滑动器 slider 没有正确初始化，我决定在引导折叠动画完成后使用 shown.bs.collapse 初始化滑动器引导事件。

这是我使用过的代码，现在它运行良好，我将实现 WordPress 的 JSON RESTful API 来加载刷卡内容。 

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();
});

这似乎工作正常。调用更新函数将使并向滑动 slider 添加一个循环来完成这些技巧!

关于javascript - Swiper coverflow 效果未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58807204/

25 4 0
文章推荐： python - 无法安装python包gensim ubuntu
文章推荐： javascript - $location.path() 转到错误的网址
文章推荐： python - 在 Selenium，python 中使用 XPath 时出错
文章推荐： css - 带有 bootstrap 4 + Angular Material 8 网格的 Angular 8 元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com