Flex Slider for Open Blocks
In this article, i will explain how to create a slider or carousel with the open source jquery plugin FlexSlider.
More info about the plugin at http://flexslider.woothemes.com/ where you have to download the plugin.
The proccess concest of :
- Go to Template Studio
- Create a new template
- upload the jquery plugin files
- Create a Razor template
- Define de datasource for retrieving the images
- Integrate the slider in a html module
Go to Template Studio
After installing OpenBlocks that you can download from https://openblocks.codeplex.com/
there is a new menu item in host menu called “Template Studio”
Create a new template
Now we create a new Widget Template.
For this select “Widgets” in the module combo box and click “Add”
Enter “FlexSlider” in the Template text box and click “Save”
Now you have a new empty template which correspond to a forder in /portals/[portal id]/Widgets/Templates
Upload jquery plugin files
Now you have to upload 3 files included in the zip file you downloaded from the flexslider website.
For this click “Upload” and select the 3 files and click “Upload”.
Create Razor template
Right click on the FlexSlider folder and click “New File”
Enter “FlexSlider1.cshtml” and click ok.
The new created razor file apairs in the editor with 1 line.
Define de datasource
Now we have to define the datasource for retrieving the images.
Chose the directory where your images are located.
We chose here a standard images folder created by the default site template.
After save, a new file FlexSlider1.datasource is created. That you can see afer clicking on the refrech button on the top of the tree view.
And the first line of the razor file is also updated to reflect the type of the model (datasource) that you select.
Now be sure to select the razor file (FlexSlider1.cshtml) in the editor by double click on it.
If you now click on Data you can see the data coming from the datasource.
Finish the Razor Template
Add the JS and HTML from the basic exemple of the flex slider website.
And replace all <li> with a foreach
You can seee @(VirtualPath) in the path of the css and js files to refer tothe current template folder.
You can find to full Template at
When you click on preview you see the slider working.
Integrate the slider in a HTML module.
Click on Widget and copy the text […..] to the content of a HTML module.
And now you see the sider working on you website.
You can alternativelly copy past the widget text to a Block item (in Admin, Blocks).
And this make it easyer to your end users to select the slider.
And if you use the DNN CKEditor you will see a new toolbar item , where you can select wideget, the template file and the datasourece.