Create a Responsive Jquery Slideshow With Flexslider for WordPress

Programming tutorial – seegatesite will share about how to create a responsive jquery slideshow with flexslider for wordpress. Jquery can help us to create a slideshow in a few steps. Almost every modern websites use slideshow plugin to enhance the look of their website. In mobile responsive`s era, slideshow display is also packaged in the form of responsive devices that follow the size of the media used. One of the famous jquery slideshow plugin is flexslider plugin by WooThemes.

Building a jquery slideshow plugin is inspired by premium theme belongs Themeforest named sahifa theme. If you didn’t have a time to buy this theme, of course you can feel the free grid featured post jquery slideshow version in this tutorial.

Using the flexslider plugin is the right choice to build a jquery slideshow grid post. Besides responsive, flexslider is works with touch screens swipe and easy to use. Flexslider usage is usually used to display the featured post or popular post and also working on wordpress plugin.

Read : How to Show Picture Gallery Automatically in WordPress Post

Build Grid Featured Post Jquery Slideshow With Flexslider

Lets begin the tutorial how to build custom responsive jquery slideshow with flexslider

1. Please download the flexslider toolkit directly through the flexslider official website
2. Copy jquery.flexslider.js into js folder and flexslider.css into the css folder
3. Create a css file called grid-post-slider.css and copy the following script

Save it and put it in the css folder

2. Create an html file as demo.php and copy the following code

Note :

– Please change your-url-image-.png with your image location
– You can create jquery slideshow gallery too with these script

Please save and run it.

If you need a complete source code, please download the following link

How To Build Grid Featured Post Jquery Slideshow Plugin On WordPress

Implementation of simple jquery slideshow tutorial with flexslider on wordpress plugin

Demo grid featured post jquery slideshow Plugin

1. Create a folder called grid-post-slider
2. Copy jquery.flexslider.js into js folder ,flexslider.css dan grid-post-slider.css that was created earlier in the css folder
3. Create a jquery as flexslider-option.js and add the following script

3. Create a php file as grid-post-slider.php and copy the following code.

The example below is a jquery slideshow example to display the popular post

Note :

– You can change popular post query with another query

1. Latest Post

query_posts( array( 'posts_per_page' => 15, 'orderby' => 'meta_value_num', 'order' => 'DESC' ) );

2. Post with tag “Featured”

query_posts( array( 'posts_per_page' => 15, 'orderby' => 'ID', 'order' => 'DESC' , 'tag' => 'featured' ) );

4. Compress the folder grid-post-slider as a zip file
5. Go to your plugin menu and install it

Put the following code in your theme header.php

If you want to get the complete source code of this jquery slideshow plugin, please download the following link

Thus article about Create a Responsive Jquery Slideshow With Flexslider for WordPress, hope useful 🙂

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.