initialise listeners in JS, set heights at runtime, add readme

diff --git a/slideshow.css b/slideshow.css
index 552d5fb7ee1ceb59a560afea9c15c101b8566fdf..3cd4ce095beee09dded899b55c5d0db2da612c39 100644 (file)
--- a/slideshow.css
+++ b/slideshow.css
@@ -23,9 +23,11 @@ figure.slide:first-child {
 
 figure.slide {
   /* Position slides absolutely to allow overlapping */
+  text-align: center;
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   margin: 0;
   /* Slides start at 0 opacity */
   opacity: 0;
@@ -46,14 +48,8 @@ figure.slide.active {
   -moz-transition: opacity 1s ease;
 }
 
-figure.slide *,
-div.slideshow div#controls {
-  width: 100%;
-}
-
-figure.slide figcaption {
-  height: var(--sl-cap);
-  text-align: center;
+figure.slide img {
+  max-width: 100%;
 }
 
 
@@ -76,7 +72,6 @@ figure.slide figcaption {
   top: calc(50% - calc(var(--sl-cap) + var(--sl-dots) + 50px) / 2);
   width: auto;
   padding: 16px;
-  border-radius: 0 3px 3px 0;
 }
 
 #state {
@@ -90,6 +85,11 @@ figure.slide figcaption {
   border-radius: 3px;
 }
 
+#prev {
+  left: 0;
+  border-radius: 0 3px 3px 0;
+}
+
 #next {
   /* Position next button on right */
   right: 0;
@@ -116,6 +116,7 @@ div.slideshow:hover #state {
 
 div.slideshow div#controls {
   text-align: center;
+  width: 100%;
 }
 
 div.slideshow div#controls span {