How to implement full screen image slider with flex-slider and jquery


Flex-slider is one of the easiest image slider available for all of us but by default this jquery image slider does not slide the image in a whole screen.

full screen image slider

There are also a lots of  full screen image slider jquery plugins available but we found all of them, needs a little bit learning curve and sometimes we found them little bit confusing to implement in our WordPress themes.

In this tutorial, we will implement full screen image slider using woo-commerce flexslider jquery plugin. You can download our code and flexslider from its official website.

#1  Download flexslider  & Add into your WordPress theme

Since, flexslider is a juqery plugin ie you need jquery to run this plugin in you Download flexslider  & Add into your WordPress theme

Since, flexslider is a juqery plugin ie you need jquery to run this plugin in your wordpress theme. Here we will consider that you have added flexslider.js file in your themes JS folder and its related CSS file CSS folder.  Here is the code to call these files properly using wp_enqueue_script ( ) function.

Add the following code inside your theme’s functions.php file


function xplosiv_scripts() {

wp_enqueue_style ('bxslider-theme',get_template_directory_uri() . '/css/bxslider.css');

wp_enqueue_script('flexslider-java',get_template_directory_uri().'/js/jquery.flexslider-min.js',array('jquery'),'20170126',true);

}

add_action( 'wp_enqueue_scripts', 'xplosiv_scripts' );

#2  Define custom posts for your image slider

Though you can add images as per your requirement but for this tutorial, we have created a custom post type “slide” that you can also define using your theme’s functions.php file.

Just add the following code inside your functions.php file


add_action( 'init', 'bn_slides_management' );

function bn_slides_management()

{

$slide_args = array (

'public'    =>true,

'query_ver' =>'slide',

'rewrite'   => array(

'slug'  =>  'slide',

'with_front'    =>   false

),

'supports'  => array(

'title',

'editor',

'excerpt',

'publicize'.

'tag',

'thumbnail'

),

'labels'    =>  array(

'name'              =>'Slides',

'singular_name'     =>'slide',

'add_new'           =>'Add New slide',

'add_new_item'      =>'Add New slide',

'edit_item'         =>'Edit slide',

'new_item'          =>'New slide',

'view_item'         =>'View slide',

'search_items'      =>'Search slides',

'not_found'         =>'No slide found',

'not_found_in_trash'    =>'No slide Found in Trash'

),

'menu_position' =>4,

'public'              => true,

'show_ui'             => true,

'show_in_menu'        => true,

'show_in_nav_menus'   => true,

'show_in_admin_bar'   => true,

'can_export'          => true,

'has_archive'         => true,

'exclude_from_search' => false,

'publicly_queryable'  => true,

'capability_type'     => 'page',

'menu_icon' => 'dashicons-id',

);

register_post_type('slide', $slide_args );

}

The above code will add a new custom post inside your WordPress admin panel.  Now its time to add few images into this custom post type.

NOTE :   We are going to use featured image of the above defined custom post type “slide” the side of image is 1920x1200px

#3  Implement flexslider inside WordPress

You can show the images in a slider format using the following code,  wp_query () has been used here to get ‘Slide’ type post from the database.  In our case we stored this code in a separate file “slider.php”.


<div class="flexslider">

<ul class="slides">

<?php

$the_query = new WP_Query(array("post_type" => "slide","posts_per_page" =>-1));

while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<li class="slide">

<?php the_post_thumbnail("full");?>

</li>

<?php endwhile;

wp_reset_postdata();

?>

</ul>

</div>

#4  initiate jquery part

The above code will fetch all the featured images of ‘slide’  custom post and will stack on the screen, these images will not slide at all.  Now its time to initiate jquery, Open footer.php file and paste the following code before </body> tag

<script type=”text/javascript”>

var height = $(window).height();

$(‘.flexslider .slides img’).css({‘height':height})

jQuery(function($) {

$(‘.flexslider’).flexslider({

animation: ‘slide’

});

});

</script>

Now use get_template_part() function to access “slider.php” file wherever you want and enjoy full screen image slider.

 

 

Suggested Similar Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>