CODEWITHSUNDEEP
javascriptphpcsswordpressswiper.js
sisaln
sisaln

Reputation: 220

Swiper coverflow effect not working as expected

I want to use the coverflow effect on a Swiper instance inside my Wordpress theme. I've noticed that the effect will not be fired until I attach the develop console under the page and the breakpoint change. I need a fix, here is the code. Is it possible to transform the URL provided by Wordpress in a blob one with PHP or JS?

<!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>

Upvotes: 1

Views: 8141

Answers (1)

sisaln
sisaln

Reputation: 220

I've found a simple solution but it seems to work. I've noticed that the swiper slider was not correctly initialised when the collapsed bootstrap4 offset menu is opened, I've decided to init the swiper after the bootstrap collapse animation was completed using the shown.bs.collapse event of bootstrap.

here is the code I've used, now it's working fine adn I will implement the JSON RESTful API of WordPress to load the swiper contents. 

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

This seems to work fine. Calling the update function will make and adding a loop to the swiper slider do the tricks!

Upvotes: 1

Related Questions