Using Swiper in WebSharper

Swiper is a JavaScript library to easily create modern, touch-driven slides on your website. It is designed for iOS but also works on most Android devices and Desktop browsers, and is now available for WebSharper. If you haven’t heard of WebSharper yet, it is a web development framework for .NET which enables you to create reactive web-apps within the safety and elegance of F# and C#.

Below I’ll go through the very basics of Swiper and the differences when reaching for its abilities from WebSharper. You can assume that everything else works just as it is described in Swiper’s API documentation.

Configuring Swiper

To use Swiper, first you’ll have to define your slides’ contents in HTML. This step is exactly the same as you would do it when dealing with Swiper from JavaScript.

The next step is to get an instance of the Swiper class. There are two ways to do this: You can either pass the HTML class selector of your Swiper container (.swiper-container in this case) or you can pass the selector and a configuration object. Here, the syntax to create the configuration object is just a little different in F#.

Note: In general, JavaScript config objects will appear as F# or C# record or struct types with required and/or optional fields when accessing them from WebSharper.

Using Swiper

As I said, the API is mostly the same as the original (see the documentation here). There are some minor differences though, which I’ll list right below.

Method and property names

By F# naming conventions, all class-level names (e.g. methods, properties) start with a capital letter, so look out for that.

DOM elements

To pass DOM elements (WebSharper.Javasctript.Dom.Element) to functions, you can call the Dom property of an Elt, or you can also call the Html property of any Elt to get the HTML string representing that Elt.

Union types

When a field of the config object can have multiple types, it appears as a WebSharper.JavaScript.Union<_,_>. You have a range of functions in the WebSharper.JavaScript namespace for dealing with unions. Let's look at an example:

Some parameters in the config object can be assigned either a string or a Dom.Element, which means they'll have the type Union<Dom.Element, string>. To instantiate such a type with a string value, use Union2Of2 "example". To create it with a Dom.Element, use Union1Of2 elt.Dom. The pattern is the same for different types and sizes of unions.

When using the Union<> type in C# you can simply assign a value of any of the appropriate generic type parameters since there’s an implicit conversion for every case.

Enums

Also to provide some more type safety to the programmer, the F# bind uses enums where the JavaScript expects a small set of (usually) string constants. For example, instead of just passing 'vertical' or 'horizontal' to the direction field, you have to use the following syntax:

To see the full list of affected types and fields, refer to the WebSharper.Swiper documentation.

Getting Reactive

WebSharper is all about easy reactive web development, so let’s look at what we can do with Swiper.

Let’s say you want your client to behave differently depending on the active slide in Swiper. To achieve this, first you’ll have to create a reactive variable with let currentSlideIndex = Var.Create 0, where 0 stands for the default active index. (If you want to make sure that your first slide is indeed the one with the 0 index, add InitialSlide = 0 to your config object.)

Now we have to update this reactive variable whenever we change slides. One way to do this is to add a fitting callback function in our config. The OnSlideChangeStart parameter seems good for this purpose.

Great! All we have to do now is make our page react to the changes of the variable using currentSlideInde.View and View.Map .

And we’re done! The app will now tell you in the JavaScript console if you pass through the 6th slide.

Note: for the snippet to work, make sure that you have the Swiper element hierarchy and an element with the id main in your HTML template.

To see a little more sophisticated version of this idea, please look at this presentation example, which won’t let you past a question slide until you click the correct answer.

You can find other cool examples for Swiper and other extensions at Try WebSharper. I’m quite proud of my Android-style tabs created with Swiper’s custom pagination options.

Get Swiper for WebSharper

Just like other JavaScript binds for WebSharper, you can get the extension from the NuGet Package Manager in Visual Studio or you can compile it from source. In case you don’t have WebSharper you can download it from here. Be sure to check out the Zafir (4.x beta) version!