F#
HTML
Result
Hosted on
Try WebSharper
<
>
namespace Samples open WebSharper open WebSharper.JavaScript open WebSharper.Swiper open WebSharper.UI open WebSharper.UI.Html open WebSharper.UI.Client [<JavaScript>] module HelloWorld = let Main = let currentSlideIndex = Var.Create 0 let config = SwipeParameters( OnSlideChangeStart = (fun swiper -> Var.Set currentSlideIndex swiper.ActiveIndex ) ) let swiper = new WebSharper.Swiper.Swiper( ".swiper-container", config ) let answerButtons = Doc.Concat [ text "Pick an answer: " Doc.Button "A" [] (fun () -> ()) Doc.Button "B" [] (fun () -> ()) Doc.Button "C" [] (fun () -> swiper.UnlockSwipeToNext() swiper.SlideNext() let newSlide () = Elt.div [attr.``class`` "swiper-slide"] [ text "You have finished the tutorial!" ] swiper.AppendSlide(newSlide().Dom) ) ] currentSlideIndex.View |> View.Map (fun index -> let questionSlideIndex = 5 if index = questionSlideIndex then swiper.LockSwipeToNext() answerButtons else swiper.UnlockSwipeToNext() Doc.Empty ) |> Doc.EmbedView |> Doc.RunAppendById "main"
<html lang="en"> <head> <style> #main { width: 500px; margin: auto; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; } .swiper-container { width: 500px; height: 300px; margin: 20px auto; } .swiper-slide { background-color: lightcyan; text-align: center; font-size: 24px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .title { display: block; } </style> </head> <body> <div id="main"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" data-hash="slide1">Let's look at F# syntax!</div> <div class="swiper-slide" data-hash="slide2"> <pre>This is how we create an array: <br/><br/>let myArray = [|1; 2; 3|]</pre> </div> <div class="swiper-slide" data-hash="slide3"> <pre>This is how we create a list: <br/><br/>let myList = [1; 2; 3]</pre> </div> <div class="swiper-slide" data-hash="slide4"> <pre>This is how we create a sequence: <br/><br/>let mySequence = seq { 1..3 }</pre> </div> <div class="swiper-slide" data-hash="slide5"> Question! <br/> Which is the correct syntax to define a list? </div> <div class="swiper-slide" data-hash="slide6"> <ol type="A"> <li><pre>let myList = [|1; 2; 3|]</pre></li> <li><pre>let myList = seq { 1..3 }</pre></li> <li><pre>let myList = [1; 2; 3]</pre></li> </ol> </div> <div class="swiper-slide" data-hash="slide7"> Good job! </div> </div> </div> </div> <!--[BODY]--> </body> </html>