Add a Beautiful WordPress Image Carousel To Your Site

25 Replies

WordPress Image Carousel

WordPress Image CarouselWordPress Image Carousel (WPIC) lets you create image carousels by using a shortcode.

WPIC includes an options panel which lets you add default settings to your shortcode for easier and even quicker use.

Features:

  • 10 different button colors
  • Highly customizable
  • Shortcode
  • Lightweight
  • Can be integreated with any site
  • Hackable
  • WordPress Image Carousel Shortcode
  • Active support through the wordpress forums

This plugin utilizes the jquery plugin jcarousel lite to create the image carousels. This plugin also makes a call to the google scripts api to get jquery instead of load it from your site. This makes the plugin load faster on your pages and consume less bandwidth.

The following video is a demo of WPIC. The demo shows how default settings are used and how the carousel can be created.

How to Install WordPress Image Carousel

The automatic plugin installer should work for most people. Manual installation is easy and takes fewer than five minutes.

1. Download the plugin, unpack it and upload the ‘wpic‘ folder to your wp-content/plugins directory.
2. Activate the plugin through the ‘Plugins’ menu in WordPress.
3. Go to Settings -> WPIC Options to configure the default options.

Now for the real question, how do I use this plugin?

First of all go to the plugin’s options panel, and set up your default settings. Then copy the shortcode displayed at the top of the options page to your page/post. Click between the begging of the shortcode, and the end of it which will place your cursor at the following position:

[ wpic]SOMEWHERE HERE![/ wpic]

Then click on the “Add Media” button and select the images that you want the carousel to display by holding the control key,and click on the images. Now take a look at the size of your images in the bottom-right corner. Make sure you select the same size for each image you would like to display.Take note of the this size. Hit the insert into post button, and wait for the images to display. As a reminder, the images should display “inside” the shortocde,between the end and the beginning. Take a look at the image you added, and between each image add the following two characters:
`/!` (leading slash and exclamation mark). Do not add the two characters before the first image, or after the last image. Take a look at the screenshots,to get a picture of what you have to do. You can edit the shortcode settings like changing the color of the buttons,or the speeds. Next, update the width and height settings of the shortcode so that they would match the dimensions of your images (the one we took note of earlier). If the dimensions of the images are the same dimensions you entered in the default plugin settings, then delete the width and height shortcode settings. (If you are having troubles with this part, do not hesitate to ask on the forums). Everything should be set, try publishing the post/page and viewing it. If everything worked, then great! If not, re-read these steps, take a look at the screenshots, or ask on the forums. We are going to try to replay as fast as possible.

Note
If you need ANY help with this plugin, please post a question in the plugin’s forum so that I can help you. We are not going to create a plugin, just so that it could sit there with no support. So please, if you ever need any help with this plugin, create a thread in the forums.

WordPress Image Carousel Screenshots

Download WordPress Image Carousel

Click here to download WordPress Image Carousel (WPIC) from the WordPress plugin respiratory.

  • http://midwestbowie.com Jan Miller

    Is there a way to add the carousel to a header.php inside a tag ? I am using the Pinpoint theme and have enough room for a 474 width X 317 height div. Tried an iframe but the carousel wouldn’t show. Tried to copy and paste the html from a page I created for the carousel, but it doesn’t pick up the java script. Please let me know if putting the carousel in the header.php is just a no-win proposition.
    Thanks very much for creating a cool plugin . On a regular page, it works great !

    • admin

      First of, note that you cannot place two image carousels on the same page.
      To add an image carousel to a theme file, follow these instructions:
      Create a blank page/post and add all of your images but without the shortcode. Then add the image divider (/!) between each image. After that click on the text tab in the post editor and copy all of the code. Then go to your theme file in the WordPress theme editor, and find the spot where you want your shortcode to be, and paste the following code:
      < ?php
      $text = 'All of the code that you copied.';
      echo do_shortcode('[wpic color="x" visible="x" width="x" height ="x"speed="x" auto="x"]'.$text.'[/wpic]');
      ?>

      Replace “All of the code that you copied.” with the code you copied from the post editor. This should give you something that looks like this:
      $text = '<img src="image-location" />/!';
      Now all you need to do is setup your shortcode settings and hit save.
      Please let me know if everything worked for you, and thank you for using my plugin.

  • Ken C

    Hi!

    I’d like to change the color of the border around my images. How do I go about doing that? I’m using the WooThemes Canvas Theme.

    Thanks!

    Ken

    • admin

      Hello Ken. I am not too sure what you mean by border. I can’t see any border around the images. Would you like to add one?

  • http://hu.rhythmnjuice.hu/ Juice

    Hy. I watched your tutorial and somehow i managed to do it.

    I got a little problem that i dont understand.

    The “next” and “prev” buttons are not visible (checked both and they exists).

    Can you help me?

  • Greta

    Hi – I am wanting to have a carousel where each image links to a specific page and have done a lot of searching for plugins to do this – can’t find much! This plugin seems to fulfill these requirements – except that my client is very adamant that he wants a responsive website. How does this plugin perform on various devices? Any plans to make it responsive?
    Thanks!

    • admin

      Hey, we talked on the WordPress.org Forums.
      Here is a link to the conversation if anyone else is interested.

  • http://hu.rhythmnjuice.hu Juice

    Hy. On my test site i cant see the next and the prev button. Can you help?

    • admin

      Hello. Can you send me a screenshot of your plugin settings and your page?

  • http://test2.joelcas.com Joel C

    I am trying to align center the Carousel. Is this possible?

    • admin

      Yes it is possible.
      Go to the text tab of the WordPress post editor and add the following code before your opening carousel shortcode:
      <div style="margin: 0 auto">
      Then add the following code after your closing carousel shortcode:
      </div>

      So now you should have something like this:
      <div style="margin: 0 auto">[wpic][/wpic]</div>

  • Linde A.

    I installed the plugin for the video. But with me, the pictures are not next to each other, but under the other pictures. Where is the mistake?

    No 0 0 0 0 0
    but
    0
    0
    0
    0
    0

    • admin

      Hello. This happens when there is a conflict between another plugin and wpic. Your issue is a known one which I am trying to fix. I think the problem will be solved in the next plugin update.

  • http://www.ecs69.fr Régis

    Hi there ,

    I have a problem. The short code is ok with Internet Explorer and Mozilla but not with google chrome and Safari on windows.
    thanks

    • admin

      Can you send me an example where it didn’t work with chrome? I developed this plugin when I used chrome it and worked ok for me.

  • Lee

    Hey.

    Cool product, Exaclty what I was after but had to disable due to adverse conflicts. For some reason it increases all the size of the fonts in the whole of my site. Anybody come across this? do we have a simple solution for this? thanks Lee

  • Lee

    I have tested this in a few browsers you have some serious bugs to fix. Will leave it for now. Keep up the good work though, Has a lot of potential. Thanks, Lee

    • admin

      Thanks for feedback, can you point out a few bugs you found?

  • Paul

    My client wants to show multiple carousels on one page – is there any way this can be achieved? Is there a hack i can use? Thanks so much – I love the plugin

    • admin

      Unfortunately, it is currently impossible to add more than one carousel to the same page. I am working on a public update that will enable that. It should be out soon.

  • http://mariocarpentry.co.uk Rol

    Hi,

    Thanks for this great plugin.

    Is there any option so it’s automatically adjusting the size of this plugin on mobile phone. At this moment plugin keeps the same size as desktop version and pictures are far over the right margin on mobile phone.

    • admin

      Currently there is no way to do it. Sorry.

  • http://www.decoconcrete.com.ve Daniel Alvarado

    Hi there, thanks for creating this plugin
    I´ve installed and it show the pics alright but at the top of the post, i get this messagge

    Notice: Undefined variable: data in /home/wp-content/plugins/wp-image-carousel/plugin.php on line 98

    Notice: Undefined variable: data in /home/wp-content/plugins/wp-image-carousel/plugin.php on line 99

    Notice: Undefined variable: data in /home/wp-content/plugins/wp-image-carousel/plugin.php on line 100

    Notice: Undefined variable: data in /home/wp-content/plugins/wp-image-carousel/plugin.php on line 101

    Notice: Undefined variable: data in /home/wp-content/plugins/wp-image-carousel/plugin.php on line 102

    Notice: Undefined variable: data in /home/wp-content/plugins/wp-image-carousel/plugin.php on line 103

    thanks in advance for your reply

    • admin

      Go to your WordPress admin panel. Then hover over settings and click on WPIC options. Now setup sample options and hit save changes. Let me know if this fixes your issue.

  • Kaj Chan

    Hi, thanks for creating the plugin. It’s what im looking for.
    However, i encountered some problems. I watched the video, downloaded the plugin, activated, and setup the settings, and when i applied it in one of my pages, the images displayed one-by-one vertically. i put 8 images and it all displayed vertically in the page. what could be the problem? pls help :-)