The gallery has minimal styling and mainly contains the functionality of flicking through a gallery. In the examples below, minimal styling has been applied for demo purposes.
+gallery()(data-fx='slide').gallery-demo-1 +gallery-items() +gallery-item() +image('lg', [400,400], ['http://placehold.it/400x400&text=1']) +gallery-item() +image('lg', [400,400], ['http://placehold.it/400x400/eee/000&text=2']) +gallery-item() +image('lg', [400,400], ['http://placehold.it/400x400/ffaaaa/0000ff&text=3']) +gallery-nav(3) +gallery-nav-item('0') +image('lg', [100,100], ['http://placehold.it/100x100&text=1']) +gallery-nav-item('1') +image('lg', [100,100], ['http://placehold.it/100x100&text=2']) +gallery-nav-item('2') +image('lg', [100,100], ['http://placehold.it/100x100&text=3']) .controls +button-standard(href='#bar', data-dir='prev') Prev +button-standard(href='#foo', data-dir='next') Next
+gallery().gallery-demo-2 +gallery-items() +gallery-item() h1 Hello +gallery-item() h1 How are you? +gallery-item() h1 Yeah, me too. +gallery-item() h1 Goodbye +gallery-nav(4) +gallery-nav-item('0') +image('lg', [100,100], ['http://placehold.it/100x100&text=1']) +gallery-nav-item('1') +image('lg', [100,100], ['http://placehold.it/100x100&text=2']) +gallery-nav-item('2') +image('lg', [100,100], ['http://placehold.it/100x100&text=3']) +gallery-nav-item('3') +image('lg', [100,100], ['http://placehold.it/100x100&text=4'])
The paginated gallery dots are centered by default, but the gallery contents are not. This is because the centering method is left to the application that uses this gallery, if one is desired. If the gallery content just spans the entire width of the parent, no centering is needed on the gallery contents.
+gallery().gallery-demo-3.is-paginated +gallery-items() +gallery-item() +image('lg', [400,400], ['http://placehold.it/400x400&text=Dot1']) +gallery-item() +image('lg', [400,400], ['http://placehold.it/400x400&text=Dot2']) +gallery-item() +image('lg', [400,400], ['http://placehold.it/400x400&text=Dot3']) +gallery-nav(3) //- The nav strikethrough is optional. +gallery-nav-strikethrough() +gallery-nav-dots() +gallery-nav-dot('0') +gallery-nav-dot('1') +gallery-nav-dot('2') .controls +button-standard(href='#bar', data-dir='prev') Prev +button-standard(href='#foo', data-dir='next') Next