Swiper Coverflow 效果未按预期工作
我想在我的 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>
宝慕林42943921回答
-
慕容3067478
我找到了一个简单的解决方案，但它似乎有效。我注意到当折叠的 bootstrap4 偏移菜单打开时，swiper 滑块没有正确初始化，我决定在 bootstrap 折叠动画完成后使用shown.bs.collapsebootstrap 事件初始化 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 滑块的循环和添加一个循环来实现！
随时随地看视频慕课网APP
相关分类
JavaScript