The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
In this post I’m going to demonstrate how to create a Sitefinity MVC based slider widget that incorporates the Parallax scrolling effect for its animation transitions. If you’re not familiar with this effect, Parallax scrolling is a CSS3/JQuery effect where by the various elements within a div container move dynamically and independently of one another. It’s a very nice and easy “sizzle” addition to a standard slider.
As usual I’m totally lifting my examples from an external source and adding/integrating them with my personal Sitefinity project, so before I begin let me give props to Mary Lou on Codrops for her tutorial: PARALLAX CONTENT SLIDER WITH CSS3 AND JQUERY. If you’d like to see what all the fuss is you can also find a demonstration of the slider there. Oh yeah, don’t forget to grab the files while you’re on the site, we’ll need them later.
While this tutorial is pretty straight forward and accessible to CSS3, JQuery, Visual Studio and Sitefinity novices, this post does assume that you have at least a general understanding of developing custom Sitefinity MVC widgets using Thunder and Visual Studio. If you are new to Sitefinity development, then I’d suggest looking at this resource about creating custom MVC widgets, first.
A Git repository for the slider will be linked below.
Prerequisites:
End result of tutorial
Let’s start off with the easiest stuff first. Login to your Sitefinity project, go to the Dashboard, click on the “Content” menu and then select “Images”. Click on the “Create a library” button and give your new library a name. Feel free to call it whatever you’d like.
Now we’ll need to upload a few images that came with the files you downloaded from the Codrop site.
Now we’ll need to add the CSS and JQuery files that came with the zip you downloaded from the Codrop site.
I created a folder in my project to hold all my styles called “~/custom/styles” with three sub-folders, “css/parallax”, “img/ parallax” and “js/ parallax”. See image below for an example:
Feel free to adjust the folder structure as you see fit, but make sure to adjust the paths in your view if you happen to download the Github repository view. If you do change the folder paths, then remember to also update the image paths in your css files accordingly.
Please note that the “img” folder is for images, like buttons, that are used to control the Slider rotation and not for the images displayed in the Slider itself.
Now let’s create our custom module that we will use to supply our Slider’s content.
Go to the “Content” menu à click on “Parallax Items”. Create 4 items using the 4 images and associated text from the Codrop tutorial. For example item one might be:
Now let’s go to our Sitefinity project in Visual Studio and create a MVC Widget with Sitefinity Thunder. I called my MVC widget “SliderMVC”. You can call your widget whatever you’d like, but just be sure that if you use my code you adjust the namespaces as/if needed. We will not be creating a designer in this tutorial, so you can leave the “Create Designer” checkbox unchecked during the Thunder wizard. Finish up the rest of the Thunder wizard steps until it’s completed.
Thunder will create your controller, model and view automatically for you. They can be found in your “~/Mvc/Controllers”, “~/Mvc/Models” and “~/Mvc/Views/SlidersMVC” folders. The widget will also be auto-registered with Sitefinity, so that the next time you run your project you can drag/drop your widget on to a page as needed.
I’m not going to go in-depth about how to use our Custom Module’s API. There are many resources that explain how to do this in great detail, so please refer to them if you’d like more info before proceeding. I will however provide the code as I have it in my classes and view. It will also be available be in the Github repository linked below.
Add the following code to your Model:
using System;
using System.Collections.Generic;
using System.Linq;
using Telerik.Sitefinity.DynamicModules.Model;
using Telerik.Sitefinity.Libraries.Model;
using Telerik.Sitefinity.Model;
using Telerik.Sitefinity.RelatedData;
namespace SitefinityWebApp.Mvc.Models
{
public class SliderMVCModel
{
public List<
ParallaxItem
> ParallaxItems
{
get;
private set;
}
public class ParallaxItem
{
private string title;
private string details;
private string itemUrl;
private string imageUrl;
private string imageAlt;
public string Title
{
get { return title; }
set { title = value; }
}
public string Details
{
get { return details; }
set { details = value; }
}
public string ItemUrl
{
get { return itemUrl; }
set { itemUrl = value; }
}
public string ImageUrl
{
get { return imageUrl; }
set { imageUrl = value; }
}
public string ImageAlt
{
get { return imageAlt; }
set { imageAlt = value; }
}
}
public SliderMVCModel(IQueryable<
DynamicContent
> items)
{
this.ParallaxItems = SetParallaxItems(items);
}
public List<
ParallaxItem
> SetParallaxItems(IQueryable<
DynamicContent
> items)
{
List<
ParallaxItem
> parallaxItems = new List<
ParallaxItem
>();
foreach (var item in items)
{
ParallaxItem parallaxItem = new ParallaxItem();
parallaxItem.Title = item.GetValue<
Lstring
>("Title");
parallaxItem.Details = item.GetValue<
Lstring
>("Details");
IDataItem pageSelectorItem = item.GetRelatedItems("PageSelector").FirstOrDefault();
parallaxItem.ItemUrl = pageSelectorItem.GetDefaultUrl();
//getting the image
Image imageField = item.GetRelatedItems<
Image
>("Image").SingleOrDefault();
//getting the url
parallaxItem.ImageUrl = imageField.Url;
parallaxItem.ImageAlt = imageField.AlternativeText;
parallaxItems.Add(parallaxItem);
}
return parallaxItems;
}
}
}
Add the following code to your Controller:
using
System;
using
System.ComponentModel;
using
System.Linq;
using
System.Web.Mvc;
using
Telerik.Sitefinity.Mvc;
using
SitefinityWebApp.Mvc.Models;
using
Telerik.Sitefinity.GenericContent.Model;
using
Telerik.Sitefinity.DynamicModules.Model;
using
Telerik.Sitefinity.DynamicModules;
using
Telerik.Sitefinity.Utilities.TypeConverters;
namespace
SitefinityWebApp.Mvc.Controllers
{
[ControllerToolboxItem(Name =
"SliderMVC"
, Title =
"SliderMVC"
, SectionName =
"MvcWidgets"
)]
public
class
SliderMVCController : Controller
{
[Category(
"String Properties"
)]
public
string
LibraryName {
get
;
set
; }
/// <summary>
/// This is the default Action.
/// </summary>
public
ActionResult Index()
{
var items = RetrieveCollectionOfParallaxItems();
var model =
new
SliderMVCModel(items);
return
View(
"Default"
, model);
}
/// <summary>
/// Gets all images in a library with a status of live
/// </summary>
/// <returns></returns>
public
IQueryable<DynamicContent> RetrieveCollectionOfParallaxItems()
{
var providerName =
"OpenAccessProvider"
;
DynamicModuleManager dynamicModuleManager = DynamicModuleManager.GetManager(providerName);
Type parallaxitemType = TypeResolutionService.ResolveType(
"Telerik.Sitefinity.DynamicTypes.Model.ParallaxItems.Parallaxitem"
);
var myCollection = dynamicModuleManager.GetDataItems(parallaxitemType).Where(p => p.Status == ContentLifecycleStatus.Live);
return
myCollection;
}
}
}
Add the following code to your View:
@model SitefinityWebApp.Mvc.Models.SliderMVCModel
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"/Custom/Styles/css/Parallax/demo.css"
/>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"/Custom/Styles/css/Parallax/style.css"
/>
<
script
type
=
"text/javascript"
src
=
"/Custom/Styles/js/Parallax/modernizr.custom.28468.js"
></
script
>
<
link
href
=
'http://fonts.googleapis.com/css?family=Economica:700,400italic'
rel
=
'stylesheet'
type
=
'text/css'
>
<
noscript
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"/Custom/Styles/js/Parallax/nojs.css"
/>
</
noscript
>
<
div
class
=
"container"
>
<
div
id
=
"da-slider"
class
=
"da-slider"
>
@foreach (var parallaxItem in Model.ParallaxItems)
{
<
div
class
=
"da-slide"
>
<
h2
>@Html.Raw(parallaxItem.Title)</
h2
>
<
p
>@Html.Raw(parallaxItem.Details)</
p
>
<
a
href
=
"@Html.Raw(parallaxItem.ItemUrl)"
class
=
"da-link"
>Read more</
a
>
<
div
class
=
"da-img"
><
img
src
=
"@Html.Raw(parallaxItem.ImageUrl)"
alt
=
"@Html.Raw(parallaxItem.ImageAlt)"
/></
div
>
</
div
>
}
<
nav
class
=
"da-arrows"
>
<
span
class
=
"da-arrows-prev"
></
span
>
<
span
class
=
"da-arrows-next"
></
span
>
</
nav
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
src
=
"/Custom/Styles/js/Parallax/jquery.cslider.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(function() {
$('#da-slider').cslider();
});
</
script
>
Finally we need to login to the back-end of our Sitefinity site and start creating a page to host the SliderMVC widget.
Finally publish your Page and then “View” the live version of it. If all is setup correctly, then you should see a Slider with 4 items on a yellow background populated with the content and media files you specified in your module’s content items.
Remember that if you change any paths to folders or names of files, then you will need to update the associated files accordingly.
A public Github repository has been created for this blog post.
View all posts from David Cowart on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.