32
rated 0 times
[
34]
[
2]
/ answers: 1 / hits: 5408
/ 5 Years ago, mon, november 11, 2019, 12:00:00
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>
More From » php
