 
                         (set! (.-scrollLeft (@state :container)) target-x)))
 
+        scroll-page! (fn [n-pages]
+                       (let [container (@state :container)
+                             scroll-x (.-scrollLeft container)
+                             page-width (.-offsetWidth container)
+                             current-page (js/Math.floor (/ scroll-x page-width))]
+                         (set! (.-scrollLeft container) (* page-width (+ n-pages current-page)))))
+        scroll-next! (fn [] (scroll-page! 1))
+        scroll-prev! (fn [] (scroll-page! -1))
+
         touch-end! (fn [e]
                      (swap! state assoc :dragging? false))
 

           :display "inline-block"
           :vertical-align "top"}]]])]))

(defn arrow-view [direction]
  (let [[w h] [30 120]
        x1 (case direction :left 5 :right w)
        x2 (case direction :left w :right 5)]

             (for [[idx panel-item] (map-indexed vector panel-items)]
               ^{:key (:id panel-item)}
               [:div.panel
                [panel-view panel-item]
                (when (not= idx 0)
                  [:div.arrow-prev
                   {:on-click (fn [_] (scroll-prev!))}
                   [arrow-view :left]])
                (when (not= idx (dec (count panel-items)))
                  [:div.arrow-next
                   {:on-click (fn [_] (scroll-next!))}
                   [arrow-view :right]])]))]])})))
