Skip to content

Module

Silverstripe Flexslider v1.0.1

flexslider in SS3 simple theme
flexslider in a clean SS3 install using the simple theme

silverstripe-flexslider is a module for Silverstripe 3.0 that uses the FlexSlider 2 library to create sliders. Sliders can be created from within the cms or by instantiating a new FlexSlider object in php.

  • 1.0.1 bug fixes, added some css reset that is used in the simple theme, updated the flexslider library to the latest version
  • 1.0.0 initial version

Download on GitHub Comments

For comments, suggestions, and asking for features please use this forum thread.

You can download this module for free and we are happy & proud if you’re using it. Just remember that it takes time developing this stuff and you might encourage us developing some more tools by sharing a very few bucks.

Requirements

  • Silverstripe 3.0

Documentation

1_clean_install
We start with a clean installation of silverstripe 3.0.2 using the “simple” theme
2_renaming_modulefolder
After downloading the module as a zip file from github, make sure to rename the folder to “flexslider”
3_config
Add the FlexSliderExtension to your “_config.php”
4.dev_build
Run /dev/build?flush=1

Installation finished

5_slider_section
Now there is a new section in the cms to add sliders (which is build using modeladmin)
6_slider_options
When you create a new slider in the cms, you can configure many option in thecms, e.g. direction and autoplay.
7_adding_slides
Then you add slides to the slider. In this example our slider has 4 slides.
8_adding_slides
When you add a slide, it must have an image assigned. Title, description and link are optional. Make sure that “enabled” is checked. Otherwise this slide will not be shown.
9_adding_to_template
To output this Slider you need to add $FlexSlider(params) to your template file.

This needs some explanation. $FlexSlider(1,800,470) means:

  • Show the slider with the id=1
  • Crop-resize all images to 800×470

The problem is, that the slider will not look good, if the images have not the same aspect ratio. And you do not know if the admin will upload just images with the same aspect ratio.

That is why we are crop-resizing all images. By resizing the images we can also make sure, that the slider will not slide 2MB image files.

Maybe you need to play a little bit with the values for width and height to get a good result.

But setting width to 800 and height to 470 in this example has no effect on the slider itself. The slider will use all available space (width=100%). So thats why we added a wrapping div with a width of 60%.

The cool thing is, that the flexslider is perfectly responsive (which fits perfectly to the simple theme)

10_shortcode_added
The administrator can add sliders to pages himself with a shortcode.
11_two_sliders_in_one_page
Now we have the same slider twice on the homepage :) (both functional).

As you can see the one that was added with a shortcode has a style=”width: 400px”. So unlike the other one, it doesn´t scale.
The reason i did that is because the admin is usually not able to specify a width in the wysiwyg himself. But this behaviour might change in the next version, because this slider has now lost its responsiveness.

This feature is planned in the future.

This feature is planned in the future.