The BF Slider

The BF Slider

August 8, 2009  |  documentation

In version 1.1 a content slider was added. It is very integrated with wordpress, since it is using pages for the slides. This makes it possible to easily add images and html to the slides. Code can be just copied and pasted into the page from an article and it has the same look. There is also a featured posts feature of this slider, where it takes a category name as parameter and displays the posts in a preformatted design.

To use it add a shortcode to a page like this:
[bfslider name="slides" type="page" height="320"]

There are two types of slides, one that displays pages (the name must be a parent page and the actual slides are children to that parent), and one that displays posts. See this video for more info. A demo of the slider can be found here.

Defaults
'name' => 'slides',
'type' => 'page',
'width' => $bf_featureimage_width,
'height' => '300',
'marginbottom' => '20',
'buttons' => 'style1',
'continuous' => 'true',
'auto' => 'true',
'vertical' => 'false',
'speed' => '1000',
'pause' => '3000',
'numeric' => 'false',		
'numwords' => '30',
'numposts' => '10',
'imagesize' => 'normal',
'maximageheight' => '0',		
'bgcolor' => '#fff',
'color' => '#000',
'textalign' => 'left',
'featurecaption' => 'bottom',
'animation' => 'slide'
'zoomcrop' => theme-setting-zoomcrop
type
  • page – default
  • category
  • news – to list the newest posts (name not necessary).
  • nextgen – Shows images in a Nexgen Gallery. Use the gallery name like this: name=”gallery1″.
width
The width (px) of the slider container.
height
The height (px) of the slider container.
marginbottom
The bottom margin (px) of the slider container.
buttons
Set the button style or hide it.

  • style1 – default
  • style2
  • false
continuous
If set to true clicking the next button when the slider reached the end will jump to the beginning (and vice-versa).
auto
This option enables automatic sliding. If set it to true the sliding will automatically start and continue to perform until one of the buttons are clicked.
vertical
Slide vertically
speed
Animation speed in milliseconds.
pause
Pause between slides in milliseconds when auto is enabled.
numwords
Limit the text when type is category.
numposts
Max number of posts when type is category.
imagesize
Sets the image size used when in type category.

  • normal – default
  • feature
  • noresize
maximageheight
Max height for the image when in type category.
bgcolor
Sets the background color when in type category.
color
Sets the text color when in type category.
textalign
Sets the position of the text in relation to the image.

  • left – default
  • right
featurecaption
Sets the position of the caption when imagesize is set to feature.

  • bottom – default
  • top
  • false – hidden
animation
Here you can change the slider to use the fade animation added in version 1.3.4.

  • slide – default
  • fade
zoomcrop
This overrides the zoomcrop in the theme settings. Read more about zoomcrop here.

  • topleft – default
  • center
  • false – no cropping.

Example sliders and shortcodes: 1, 2, 3.

Tutorials

Here are some tutorials explaining in steps how to add the slider in 3 different ways.

Page slides Tutorial
  1. Add a new page. Name it slides (this is the default page name, however it can be called any name but then it has to be specified in the name parameter). Publish the page (without adding any content).
  2. Add a new page. Select the previous page as it’s parent. Add slide contents, and publish.
  3. Add more pages like the one above…
  4. When finished adding pages, the parent page can be set to draft, then none of the slide pages will appear in the navigation admin area in the theme settings, but will still work for the slider. However it must be set back to published to add more slides.
  5. Add the shortcode described above to the page/post where the slide should be displayed. Set the name (the name of the parent page added in step 1), width (default is full width) and height. You can also set the button style (version 1.1.1).
Page slides widget Tutorial
  1. Add a new page. Name it slides (this is the default page name, however it can be called any name but then it has to be specified in the name parameter).
  2. Add the shortcode to this page as described above. Set the name (this page’s name), width (default is full width) and height. You can also set the button style (version 1.1.1). Publish the page.
  3. Add a new page. Select the previous page as it’s parent. Add slide contents, and publish.
  4. Add more pages like the one above…
  5. Add the BF Page widget to a widget area (for example the newly added “Adspace – Blog home below nav” to display it on the blog frontpage) and select the parent slide page created in step 1 and 2.
Featured posts slides Tutorial
  1. Add the shortcode described above to the page/post where the slide should be displayed. Set the name (the name of the category to be displayed in the slider), type=”category”, height (the width is automaticly set, but a height is needed. This depends on the height on the default images of the posts), numwords (this is the number of words to be displayed to limit the text), numposts (limits the number of posts to be displayed).
  2. Publish.

No Comments


Trackbacks

  1. BigFeature – Page templates
  2. Frequently Asked Questions | BigFeature
  3. Frequently Asked Questions | BigFeature
  4. setting up the theme | BigFeature