In this tutorial, we are going to make owl carousel hash navigation in WordPress.
Let's get started.
1. Load style in functions.php
Example:
wp_enqueue_style( 'owl-style',
get_stylesheet_directory_uri().'/owl/assets/owl.carousel.min.css',array(),'0.3' );
2. Load owl javascript in functions.php
Example:
wp_enqueue_script( 'owl-js',
get_stylesheet_directory_uri() . '/owl/owl.carousel.min.js', array(),
'1.2', true );
3. Write your custom script.js for owl coursel and it into functins.php
wp_enqueue_script( 'custom-js',
get_stylesheet_directory_uri() . '/js/script.js', array(),
'13.49', true );
Inside script.js you should have code like this
$('.slides').owlCarousel({
video: true,
lazyLoad: false,
center: true,
loop: true,
nav: false,
dots: false,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: false,
loop: true
}
}
});
4. Show owlcarousel where you want
Example: I have written code gallery.php file
<a href="/?cat=7113"><div class="cat-title position">
<span class="inner-cat">Gallery</span>
</div></a>
<div class="dsr-slider mt-3">
<div class="owl-carousel slides">
<?php $j=0; $args = array('showposts' => 6,
'cat' => "7113"); $loop = new WP_Query( $args );
while($loop->have_posts()): $loop->the_post(); ?>
<div class="position">
<div class="item-video position"
data-hash="<?php echo $j++; ?>">
<?php the_post_thumbnail('large');?>
</div> <div class="overlay"></div>
<div class="design-small">
<h5 class="small text-light effect-text text-center"
style="font-size: 25px;">
<?php echo wp_trim_words( get_the_title(), 15 ); ?>
</h5>
</div>
</div>
<?php endwhile; wp_reset_postdata();?>
</div> <div>
<div class="row no-gutters">
<?php $i=0; $args = array('showposts' => 6,
'cat' => "7113"); $loop = new WP_Query( $args );
while($loop->have_posts()): $loop->the_post(); ?>
<div class="col-md-2 item-v">
<a href="#<?php echo $i++; ?>">
<div class="slider-mini">
<img src="<?php the_post_thumbnail_url('thumbnail')?>">
</div>
</a>
</div>
<?php endwhile; wp_reset_postdata();?
</div>
</div>
</div>
<style>
.slider-mini img {
width: 100%;
height: 132px;
object-fit: cover;
padding: 12px;
}
.item-video img {
height: 332px;
object-fit: cover;
}
.slider-mini {
background: #e2e4e7;
}
</style>
0 Comments
If you have any question please ask?