Phil Ewels

Hi,

Quick update – I’ve just pushed live version 1.4 of the plugin which fixes this problem.

Thanks for bringing it to my attention!

Phil

Hi Bill,

I’ve just pushed a new release of the plugin with a re-write which should get this working. The javascript is now embedded in the main body of the page along with the plugin. It’s specific to that carousel, meaning that you can have multiple carousels on the same page with different attributes, and importantly, the interval setting now seems to work robustly. Let me know if you run into any troubles with it.

I hope this sorts matters out for you. Apologies for the delay.

Phil

Hi there,

I’ve just had a quick look at your site, the problem is not related to the javascript, as you only have ten items in your HTML.

I haven’t tested this yet, but I suspect that this may be due to a bug in the CPT Bootstrap Carousel plugin. I don’t think I’ve ever tried adding that many posts, and I have a nasty feeling that the WP_Query used to retrieve the images may default to a limit of 10 posts.

For a quick fix yourself, try making the following change to cpt-bootstrap-carousel.php.. Line 146, change:

$args = array( 'post_type' => 'cptbc', 'orderby' => $atts['orderby'], 'order' => $atts['order']);

to:

$args = array( 'post_type' => 'cptbc', 'posts_per_page' => '-1', 'orderby' => $atts['orderby'], 'order' => $atts['order']);

This should force WP_Query to display all posts.

Please let me know if this works for you. I’ve added it to the GitHub repository as a bug and will fix it in the next release.

Cheers,

Phil

Hi Brandon,

Apologies for the delay – I missed the notification e-mail about your post for some reason. This isn’t really a query about the CPT Bootstrap Carousel wordpress plugin as such, more just about the bootstrap carousel, but I’ll see if I can get you started..

By using .appendTo you’re moving all of the captions into your div. These are normally held within divs which are moved and displayed by the carousel, but now they’re outside of that environment they are no longer controlled by the carousel and all display on top of each other.

To get them to show and hide as you’d like them to, you need to code up some animations yourself manually. Depending on the effect you’re going for, you’ll probably need to hide them all ($(".carousel-caption").hide();) and then show them individually as their carousel image is shown. Bootstrap carousel thankfully has javascript events that fire as the slides change which you should be able to use – slide.bs.carousel and slid.bs.carousel.

Hopefully that will be enough to get you on your way. If you need any more help I’d recommend putting your question up at stackoverflow.com or somewhere..

Cheers,

Phil

For reference – no javascript needs to be added directly, you just need the wp_footer(); function in your theme’s footer.php file (you should have it there anyway, it’s necessary for a lot of plugins).

Hi there,

Do you have any javascript errors on your page? You can check this using the code inspector (right click > inspect element > console tab) in chrome or using firebug in firefox.

The carousel should be fired off with a chunk of javascript added to the page:

<script type="text/javascript">
	jQuery(function(){
		jQuery('.carousel').carousel()
	});
</script>

If you have any other broken javascript in your site it could prevent this from working properly. It’s also worth checking that the above code is present – it’s called in wp_footer, so your theme needs to have the wp_footer(); function at the bottom of every page.

Let me know if any of that helps..

Phil

Yup, the bootstrap CSS file may change the appearance of your theme so be cautious with it – it’s really designed to be used as a base to create website themes from, the carousel is only a small part of it.

Typically, shortcodes aren’t rendered in post excerpts so the carousel shortcode won’t work here. This behaviour can be changed by adding the following to your functions.php theme file though:

add_filter('the_excerpt', 'do_shortcode');

Taken from here..

It certainly is. You need to be using Twitter Bootstrap in your theme, which is why these files aren’t included in the plugin (including them may have unintended effects on other visual aspects of people’s websites).

There is a free theme built using bootstrap here: https://320press.com/wpbs/
Using this theme, the carousel plugin should work out of the box.

Alternatively, you can include the twitter bootstrap files in your theme. The easiest way of doing this is to pull in the files from the bootstrap CDN. To do this, add the following lines to your theme’s header.php:

<head>
...
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
...
</head>

You can find out more about how to use Twitter Bootstrap on their website.

Hi Bill,

Thanks for letting me know, I seem to remember that I’ve had problems with the interval before. I’ve just been having a play in jsfiddle, it seems that setting the interval through the javascript call instead of using data-attributes (as currently) is better.

I’ve marked this up as an issue on the GitHub repository and will fix it for the next release.

It might be a little while before I push the next update, as there are a few other things I’d like to get done in the same batch. If you’re in a rush to get it working let me know.

Phil

Hi nicozz,

The bootstrap carousel is animated via CSS transitions, so you can convert it into a vertical slider by using some additional CSS rules.

Thankfully, someone else has already done this:
https://github.com/mcuznz/bootstrap-carousel-vertical

The problem is that their CSS ties into an additional class which isn’t present on the plugin slider. To make all carousels on your website vertical, just remove the ‘vertical’ class from the CSS.

eg:

.carousel .carousel-inner {
  height: 100%;
}
.carousel .item {
  -webkit-transition: 0.6s ease-in-out top;
  -moz-transition:    0.6s ease-in-out top;
  -ms-transition:     0.6s ease-in-out top;
  -o-transition:      0.6s ease-in-out top;
  left:               0;
}
.carousel .active,
.carousel .next.left,
.carousel .prev.right    { top:     0; }
.carousel .next,
.carousel .active.right  { top:  100%; }
.carousel .prev,
.carousel .active.left   { top: -100%; }

If you include this CSS after your bootstrap CSS, you should be away. Please note that the above code is untested.

Hope this helps!

Phil

Thanks Christine, that’s very kind. I’ve just updated my personal blog with a button on the right hand side: https://www.tallphil.co.uk/

With the update that I just released, sort of..

With the new version (1.3), the plugin now supports categories. This means that you can create different categories with a single image in and then restrict the shortcode to that category. This is a bit of a faff, but it should work.

I’ll make a note of this feature request for a future version.

Phil

Hi Christine,

I’ve just pushed the new version. Hopefully that should be filtering through to you soon..

Phil

Hi Christine,

I’ve just written the new code – you should be able to download it from the github repository: https://github.com/tallphil/cpt-bootstrap-carousel

The update includes a new shortcode option which you can use to randomise the order of your images. For example: [image-carousel orderby="rand"]

I’ll put out an update through www.ads-software.com once I’ve tidied up a few other things (mostly improving the documentation).

Phil

This was something I made a note of for myself to write into the next update (honest!).

If you’re willing to wait a short while I will be writing it in to the plugin as a shortcode option. If you’re in a rush, you can do it yourself by setting the orderby flat to rand when WP_Query is called..

Phil