WordPress Image Carousel

Add a Beautiful WordPress Image Carousel To Your Site

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.

      • Mark

        I tried today to add three carousels to the same page and it did some weird things. When I press an arrow button, the sliders all move, but not in the same direction; in fact, they all seem to go back to the same position, or backwards or something. Have you had a chance to update this yet?

  • 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 :-)

    • itzoovim

      If the plugin is displaying the images vertically then it means that something conflicts the plugin. Do you have two carousels on the same page?

  • Mark L

    I’ve installed the plugin and so far it’s working just as described. So thanks!
    I’m wondering, is there anyway to remove the space in between each image in the carousel so that each image is touching the next. I tried fiddling with ‘plugin.php’, but I couldn’t get it to do what I wanted. Where in the code would I edit this?

  • miznelliebellie

    Hi! I’m wondering how to stop the plug-in from displaying the images vertically instead of horizontally?

    • itzoovim

      If the plugin is displaying the images vertically then it means that something conflicts the plugin. Do you have two carousels on the same page?

      • Michelle Paese

        I’m having the same problem. I haveMeta Slider Lite installed. And my WordPress Image Carousel is showing in vertical position (and it doesn’t have a carousel). =/

        • itzoovim

          This is one of the problems that this plugin has. Conflicts between plugins are the reason this is happening.

  • Walt Brown

    I have a Main content section that is 750 wide, but the carousel ‘spills over’ that width. How do I limit the width of the carousel?

    • itzoovim

      The width of the carousel is creating using the following formula:
      width of a single image * amount of images displayed. You can either reduce the amount of each image the carousel displays, or reduce the width of your images.

  • Anastasiia Viktorivna

    Hi, guys, just would like to thank the author and share my experience. I also had the same problems, I did updates of some plugins and noticed that carousel became as a ladder…I read below comments and tried to deactivate plugins one by one ..then found the problem..it’s because NextGEN Gallery by Photocrati – was activated. If you had the same problem…try this solution.

  • Wayne

    My carousel is working fine – horizontally, scrolling per the settings – but even though all the images are 250 x 250, they are not displaying aligned top to bottom. I set the CSS to align-bottom instead of middle and all the bottom edges are aligned, but the tops are slightly different. Also, all the photos are right up against each other. I would like a little space between them. How can I add that?

  • Daniel Blackmore

    Hey, nice work. Was wondering if you were thinking of adding in responsive functionality for tablet portrait or if you’d be interested in quoting to do that just for my business?

  • sony

    when using a slider in tabs slider is working only in one tab in remaining tabs it is not working how to fix this

  • Adrian Gardiner

    I have the carousel working nicely on my site apart from the first image always starting higher than the rest. All the other images are positioned correctly but the first image is always slightly higher up. This happens with Chrome, Firefox and IE10.

    I’ve also followed your instructions in an earlier comment to center the carousel but it’s not worked so not sure what’s gone wrong there too.

    Any idea what I might have done wrong?

    Thanks.

  • lowess

    Bonjour, désolé je suis francophone et j’ose croire que quelqu’un
    pourra bien m’aider par ici. En effet j’essaie d’utiliser le plugin mais
    je n’ai pas de bon résultat. Après avoir fait les réglage en B.O j’ai
    déposé le code suivant dans ma page de post:

    [wpic ]/!/![/wpic]

    Mais après la mise à
    jour j’obtient aucun mouvement sur ma page d’accueil et en plus le code
    html apparait. Merci de bien me renseigner ma mauvaise manipulation.
    Merci par avance

  • benbami

    i need a carousel that can show video post type also in rows,isotopes,coloums or different styles and resposive…………..Anyone pls

  • Tristan

    Is there any way to remove the arrow buttons on the top of the carousel?

  • Danita Burkett Zanrė

    This is working much better! My only suggestion is a way to center the carousel. Maybe that’s there, but if I just try go use center HTML tags it still is not centered on the screen.

  • Jacob de Longy

    I’m having an weird problem. I placed carousel on home page (still locally) and when I reload page, carousel shrinks!? When I click then on “home” from website menu, it loads page again and shows carousel normally. Do you know what might be the problem? THANKS!

  • Yash@

    hello I am using this carousel, everything is working fine but many time instead of images I am getting blank images.I have used 8 images & in my carousel i can see only 5 images & 5-6 blank images.How can it show me blank images more than my given number of images.

  • Frits Groenevelt

    each time when you visit a page for the first time the slider shrinks completely like in the first image i added, then when u refresh the page its fine again but on a different page the same thing happens again every first time you visit this page. why is this happening, and what can i do? needs to go online for client sooon, help!

  • http://www.style.b8sics.com/ style.b8sics

    I thought that I followed the tutorial to the letter, but it might be my featured image which is causing the issue. In either case, I need to know how to correct for it.

    As you can see from the screenshot, my advance arrows are separated from the carousel itself, and the slides are smashed under the featured image (the KC Fashion pic).

    I want this to center under my text, and under the feature image. Help!