Add image slider for your WordPress

Background

Adding responsive image slider to your WordPress blog seems like an easy jobs thanks to those large selection of plugins. So far I’ve tried the following

  • Responsive Slider – Image slider, by Huge-IT
  • Ultimate Responsive Image Slider, by Weblizar
  • Slider – Slideshow & Responsive Image Slider for WordPress, by Richteam

While they all work well as expected, usually in the same manner. First you create an image-based slider, then add the shortcode to a page or post. However there’s one common issue – you have to upload slider images to your media library before you can use them. If you only have a handful of image sliders, it’s still manageable. However for my hobby website – windowsthemepack.com, every post needs an image sliders and every slider has a range of 15 – 25 pictures. When I have 1,000 posts, the total number of pictures will grow up to 25,000. To make things a bit worse, WordPress will automatically generate different size of thumbnails for each pictures. The number of image files will easily grow out of control to 25,000 x 3 = 75,000. To make things even worse, there’s no folder concept in the media library, all the media files live under one directory, or time-based directory. The biggest challenge is to find the right images for your slide need.

The solution

After trying a few plugins, I gave up on that direction. Ideally, the image slider can just reference the images without using the WordPress media library. Then I found the Javascript/css based image slider suits my need very well.

Step-by-step instruction

1. Install “Insert Headers and Footer” plugin by WPBeginner

This is a simple plugin that lets you insert code like Google Analytics, custom CSS, Facebook Pixel, and more to your WordPress site header and footer. No need to edit your theme files!

2. Go to your WordPress => Dashboard => Settings => “Insert headers and Footers”,

Insert the required Javascript src and script snippet

<script src="/themepack/jscss/jquery-1.12.4.min.js"></script>
<script src="/themepack/jscss/jquery.flexslider-min.js"></script>
<link href="/themepack/jscss/flexslider.css" rel="stylesheet" />

<script>jQuery(function($) {
$(window).load(function(){
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});

$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
sync: "#carousel"
});
})
});
</script>

3. Insert the slider into your page/post


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

<ul class="slides">

<li><img src="/themepack/_plants_flowers/dandelions/1.jpg" /></li>


<li><img src="/themepack/_plants_flowers/dandelions/2.jpg" /></li>

</ul>

</div>


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

<ul class="slides">

<li><img src="/themepack/_plants_flowers/dandelions/1.jpg" /></li>


<li><img src="/themepack/_plants_flowers/dandelions/2.jpg" /></li>

</ul>

</div>

Those image files is uploaded to the web server using FTP, you can categorize them into different folders, which is easier and simpler to manage.

4. The effect?

You can click the http://windowsthemepack.com/advert/beach/ to see the actual effect in action

(Visited 33 times, 1 visits today)

Leave a Reply