diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2017-08-29 01:56:53 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2017-08-29 01:56:53 +0200 |
| commit | 4e79eee06ab3eee2f5c25f7815217102b5630248 (patch) | |
| tree | 5c34d470ff7936fe4407ca7d057b1b64b68e0be7 | |
| parent | f64b202f35e8034e4dfd1e8e9a2cfe6ffce172ee (diff) | |
arrows
| -rw-r--r-- | public/assets/css.css | 22 | ||||
| -rw-r--r-- | public/assets/site.js | 4 | ||||
| -rw-r--r-- | templates/entry.liquid | 4 |
3 files changed, 15 insertions, 15 deletions
diff --git a/public/assets/css.css b/public/assets/css.css index 04e26da..468d69f 100644 --- a/public/assets/css.css +++ b/public/assets/css.css @@ -154,15 +154,21 @@ h2 { #left { position: absolute; - top: 0; right: 94vw; + top: 2vw; left: 2vw; max-width: 5vw; - height: 30vh; + height: 100%; + max-height: 82vh; + cursor: pointer; + z-index: 2; } #right { position: absolute; - top: 0; left: 94vw; + top: 2vw; right: 2vw; max-width: 5vw; - height: 30vh; + height: 100%; + max-height: 82vh; + cursor: pointer; + z-index: 2; } /* TESTIMONIALS */ @@ -205,12 +211,4 @@ h2 { #testimonials { margin: 0; } - #left { - left: -3vw; - right: auto; - } - #right { - left: auto; - right: -3vw; - } } diff --git a/public/assets/site.js b/public/assets/site.js index 478cffc..fd0f181 100644 --- a/public/assets/site.js +++ b/public/assets/site.js @@ -61,7 +61,7 @@ function bind(){ autoPlay: 5000, }) - new Flickity( "#posts", { + postGallery = new Flickity( "#posts", { cellSelector: '.cell', wrapAround: true, prevNextButtons: false, @@ -70,6 +70,8 @@ function bind(){ draggable: true, autoPlay: 5000, }) + $("#left").click(() => { postGallery.next() }) + $("#right").click(() => { postGallery.previous() }) } function build(){ $('.cell').each( function(){ diff --git a/templates/entry.liquid b/templates/entry.liquid index cbb839a..bf1d64d 100644 --- a/templates/entry.liquid +++ b/templates/entry.liquid @@ -49,8 +49,8 @@ </div> {% endunless %} {% endfor %} - <a href="#"><img src="/assets/left" id="left"></a> - <a href="#"><img src="/assets/left" id="right"></a> + <img src="/assets/left.png" id="left"> + <img src="/assets/right.png" id="right"> </div> <div id="footer"> |