Product gallery slider wordpress without plugin on single product page.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.0/flexslider.css">

<?php

global $product;

$columns           = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );

$post_thumbnail_id = $product->get_image_id();

$wrapper_classes   = apply_filters(

    'woocommerce_single_product_image_gallery_classes',

    array(

        'woocommerce-product-gallery',

        'woocommerce-product-gallery--' . ( $post_thumbnail_id ? 'with-images' : 'without-images' ),

        'woocommerce-product-gallery--columns-' . absint( $columns ),

        'images',

    )

);

$attachment_ids = $product->get_gallery_image_ids();

if ( $attachment_ids && $product->get_image_id() ) { ?>

        <div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">

            <figure>

                <section class="slider">

                    <div id="slider" class="flexslider">

                        <ul class="slides">

                            <?php 

                            foreach ( $attachment_ids as $attachment_id ) {

                                $image_url = wp_get_attachment_url($attachment_id);

                            ?>

                                <li data-thumb="<?php echo $image_url; ?>">

                                    <img src="<?php echo $image_url; ?>" />

                                </li>

                            <?php } ?>

                        </ul>

                    </div>

                </section>

            </figure>

        </div>

<?php } ?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.0/jquery.flexslider.js"></script>

<script type="text/javascript">

    jQuery(window).load(function(){

        jQuery('.flexslider').flexslider({

        animation: "slide",

        controlNav: "none",

        start: function(slider){

            jQuery('body').removeClass('loading');

        }

    });

    });

</script>