Image carousel widget improvements

platypush/backend/http/static/css/widgets/image-carousel.css

@@ -1,8 +1,16 @@
 .carousel {
-    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
     background-color: black;
-    background-size: auto 100%;
+    color: #999;
-    background-position: center;
+}
-    background-repeat: no-repeat;
+
+.carousel > img {
+    flex-shrink: 0;
+    max-height: 100%;
+    border-radius: 10px;
+    height: 22.5em;
 }
 

platypush/backend/http/static/js/widgets/image-carousel.js

@@ -1,5 +1,5 @@
 $(document).ready(function() {
-    var $imgElement = $('.image-carousel').find('.carousel'),
+    var $imgContainer = $('.image-carousel').find('.carousel'),
         config = window.widgets['image-carousel'],
         images = config.imageUrls,
         processedImages = 0;
@@ -14,7 +14,22 @@ $(document).ready(function() {
     };
 
     var refreshImage = function() {
-        $imgElement.css('background-image', "url('" + images[processedImages++] + "')");
+        var $oldImg = $imgContainer.find('img');
+        var $newImg = $imgContainer.find('img').clone()
+            .attr('src', images[processedImages++])
+            .hide().appendTo($imgContainer);
+
+        if ($newImg.width() > $newImg.height()) {
+            $newImg.css('min-width', '100%');
+        } else {
+            $newImg.css('min-width', '');
+        }
+
+        $newImg.on('load', function() {
+            $oldImg.remove();
+            $newImg.fadeIn();
+        });
+
         if (processedImages == images.length-1) {
             shuffleImages();
             processedImages = 0;

platypush/backend/http/templates/widgets/image-carousel.html

@@ -8,5 +8,7 @@
     window.widgets['image-carousel'].imageUrls = {{ images|safe }};
 </script>
 
-<div class="carousel"></div>
+<div class="carousel">
+    <img alt="Your carousel images">
+</div>