Lightbox

2 files changed, 28 insertions, 0 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 09a228b..f2f83ef 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -80,15 +80,39 @@
             @include iro.bem-sibling-elem('img') {
                 @include iro.bem-modifier('default') {
                     display: block;
+
+                    @include iro.bem-next-elem('nav-btn') {
+                        display: block;
+    
+                        @include iro.bem-next-elem('nav-btn') {
+                            display: block;
+                        }
+                    }
                 }
             }
 
             @include iro.bem-multi('&:target', 'is' 'visible') {
                 display: block;
 
+                @include iro.bem-next-elem('nav-btn') {
+                    display: block;
+
+                    @include iro.bem-next-elem('nav-btn') {
+                        display: block;
+                    }
+                }
+
                 @include iro.bem-sibling-elem('img') {
                     @include iro.bem-modifier('default') {
                         display: none;
+
+                        @include iro.bem-next-elem('nav-btn') {
+                            display: none;
+        
+                            @include iro.bem-next-elem('nav-btn') {
+                                display: none;
+                            }
+                        }
                     }
                 }
             }
@@ -150,6 +174,7 @@
         }
 
         @include iro.bem-elem('nav-btn') {
+            display:    none;
             position:   relative;
             align-self: center;
             overflow:   visible;
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 633cf3f..58abdae 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -8,6 +8,9 @@ mixin lightbox(images)
             +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
         each img, i in images
             img.o-lightbox__img(src=images[i] id='image-' + i)
+            +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
+            +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+
         img.o-lightbox__img.o-lightbox__img--default(src=images[0])
         if images.length > 1
             +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')