How to make owl carousel hash navigation in wordpress.

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>