Carousel with images example

Ecosystem
1

The other day, I wanted to display some images on one ocsigen website of mine. I thought it would be a good opportunity to try to use ocsigen-toolkit. But I failed to have it work.

In order to improve my understanding, I decided to have a new try, based on one simple ocsigen-start example, and to ask for help in order to have it work. Doing so, I obtained a working example, which I could back-port in my real website. :smile:

Well, I still have to work on CSS style-sheet but that is another story.

Anyway, since I wrote it down, here is what I did: it may be of use to others, who knows…

  • Create a fresh ocsigen-start project
$ eliom-distillery -name toto -template basic.ppx
$ cd toto
  • Gather css files from ocsigen-toolkit 
$ pushd toto/static/css
$ cp $(opam config var share)/ocsigen-toolkit/css/ot_carousel.css .
$ popd
  • Add some images into static/images directory
  • Add ocsigen-toolkit in Makefile.options 
$ sed -i 's/SERVER_PACKAGES := lwt.ppx js_of_ocaml.deriving.ppx/SERVER_PACKAGES := lwt.ppx js_of_ocaml.deriving.ppx ocsigen-toolkit.server/' Makefile.options 
$ sed -i 's/CLIENT_PACKAGES := lwt.ppx js_of_ocaml.ppx js_of_ocaml.deriving.ppx/CLIENT_PACKAGES := lwt.ppx js_of_ocaml.ppx js_of_ocaml.deriving.ppx ocsigen-toolkit.client/' Makefile.options
  • Add an Ot_carousel to toto.eliom, with the images embedded
  • And modify toto.eliom:
[%%shared
    open Eliom_content.Html.D
]

module Toto_app =
  Eliom_registration.App (
    struct
      let application_name = "toto"
      let global_data_path = None
    end)

let main_service =
  Eliom_service.create
    ~path:(Eliom_service.Path [])
    ~meth:(Eliom_service.Get Eliom_parameter.unit)
    ()

[%%shared
 let myimg pth alt =
   div [img ~src:(make_uri (Eliom_service.static_dir ()) pth) ~alt ()]

 let imgs =  [
     myimg ["images";"dessin1.jpg"] "Dessin 1";
     myimg ["images";"dessin2.jpg"] "Dessin 2";
     myimg ["images";"dessin1.jpg"] "Dessin 1'";
     myimg ["images";"dessin2.jpg"] "Dessin 2'";
   ]

 let length = List.length imgs
]

let () =
  Toto_app.register
    ~service:main_service
    (fun () () ->
      let carousel_change_signal =
        [%client (React.E.create () :
                    ([ `Goto of int | `Next | `Prev ] as 'a) React.E.t
                    * (?step:React.step -> 'a -> unit)) ] in
      let update = [%client fst ~%carousel_change_signal] in
      let change = [%client fun a -> (snd ~%carousel_change_signal ?step:None a) ] in
      let carousel, pos, size, _ = Ot_carousel.make ~update imgs in
      let bullets = Ot_carousel.bullets ~change ~pos ~length ~size () in
      let prev = Ot_carousel.previous ~change ~pos [] in
      let next = Ot_carousel.next ~change ~pos ~size ~length [] in
      Lwt.return
        (Eliom_tools.F.html
           ~title:"essai"
           ~css:[["css";"toto.css"];
                 ["css";"ot_carousel.css"]]
           (body [
                h1 [pcdata "Small carousel test!"];
                div ~a:[a_class ["my_carousel"]]
                    [carousel; prev; next; bullets]
    ])))
3 Likes