Enabling Carousel / Slider

Lobster has build-in support for the <b>CTP Bootstrap Carousel Plugin</b>. It is important to understand that this plugin uses the Javasccript and CSS file that are already loaded with Bootstrap. So if you were to load a new slider with its own Javascript and CSS your site will take a performance hit, in terms page load time.

Currently, I have just tested, Lobster 1.3 scores 66/100 for mobile, which will have to be improved over the coming weeks and 90/100 for desktop. This was tested on a shared server. Page load speeds are very important. So, the less sever requests, the better.

The purpose of this little tutorial is to replicate the slider in the theme demo, while introducing you to some of the other options available.

To use the Carousel as on the Front Page of the demo. Download and install CTP Bootstrap Carousel.

Once the carousel plugin is activated, you can add a slide via the Carousel Custom Post Type on your main dashboard menu.

To achieve the same result as the demo. Add one post with featured image, (1500px x 400/500px is recommended – note the images float: left;). Then enter a URL beneath, if you want the slide to link to a post, site or page, otherwise leave as is.

Note: I do not use the excerpt field, which displays the excerpt on the slide-image, along with a read more button. The excerpt and button do not display very well on smaller screens, so I choose not to display them. You may well use media queries to hide them on smaller devices.

Publish your post and you will see your image appear above the menu on the front page – if you use a static front page, or homepage/blog if you use the ‘latest post’ option.

Now it is highly, no VERY highly recommended that you download the file and use a text editor to edit a file, if you must edit live then make sure to read this codex article on editing files. Remember to back up and again, back up your files.

If you do get a WSOD (white screen of death), scroll to the top of the file and rename the plugin, this deactivates it, then delete it and start again. Note you cannot do this with a theme!

There is list of excellent free text editors available to download at the bottom of that article. Sublime Text 2 is the text editor I use. Please do not use a word processor like Microsoft Word as these add formatting – not good!

Find your way to the plugin directory, which is usually found at yoursite.com/wp-content/plugins/cpt-bootstrap-carousel/cpt-bootstrap-carousel.php

Scroll down to line: 127

Here you’ll see an array() for $defaults

`’interval’ => ‘5000’,
‘showcaption’ => ‘true’,
‘showcontrols’ => ‘true’,
‘orderby’ => ‘menu_order’,
‘order’ => ‘ASC’,
‘category’ => ”,`
The ‘interval’ is time measured in ms 5000 = 5 seconds this sets the duration that a slide remains on screen before sliding away.

The second key ‘showcaption’ displays the excerpt and the read more button; on the demo that is set to ‘false’.

The third key ‘showcontrols’ is used to display next slide button/arrows that lay at either side of the carousel. On the demo this is set to ‘false’.

‘orderby’ => ‘menu_order’ display the slide in the sequence of how they appear on your custom post column in your admin.

‘order’ => ‘ASC’ in ascending order ‘DESC’ is the decending alternative.

‘category’ => ”, displays slides in a given category.

To replicate the demo, your code should look like this:

`’interval’ => ‘5000’,
‘showcaption’ => ‘false’,
‘showcontrols’ => ‘false’,
‘orderby’ => ‘menu_order’,
‘order’ => ‘ASC’,
‘category’ => ”,`

I hope this was helpful!