[samples_index] Fix carousel edge cases and make mobile responsive (#608)

* Fix carousel ui issues

* Update carousel to be mobile responsive

web/samples_index/lib/src/carousel.dart

@@ -14,13 +14,30 @@ class Carousel {
 
   Element prevSlide, currentSlide, nextSlide;
 
+  num x0;
+  bool touched = false;
+
   Carousel.init({this.withArrowKeyControl = false}) {
     lastSlideIndex = slides.length - 1;
     currentSlideIndex = -1;
 
+    // Remove container empty space when no images are available
+    if (lastSlideIndex == -1) {
+      container.classes.clear();
+      return;
+    }
+
+    // Skip carousel decoration when only one image is available
+    if (lastSlideIndex == 0) {
+      currentSlide = slides[currentSlideIndex + 1];
+      currentSlide.classes.add('active');
+      return;
+    }
+
     _hideSlides();
     _initBullets();
     _initArrows();
+    _initGestureListener();
 
     if (withArrowKeyControl) {
       _initArrowKeyControl();
@@ -71,6 +88,30 @@ class Carousel {
     container.append(nextArrow);
   }
 
+  void _touchStartListener(TouchEvent e) {
+    x0 = e.changedTouches.first.client.x;
+    touched = true;
+  }
+
+  void _touchEndListener(TouchEvent e) {
+    if (touched) {
+      int dx = e.changedTouches.first.client.x - x0;
+
+      // dx==0 case is ignored
+      if (dx > 0 && currentSlideIndex > 0) {
+        _slideLeft();
+      } else if (dx < 0 && currentSlideIndex < lastSlideIndex) {
+        _slideRight();
+      }
+      touched = false;
+    }
+  }
+
+  void _initGestureListener() {
+    container.onTouchStart.listen(_touchStartListener);
+    container.onTouchEnd.listen(_touchEndListener);
+  }
+
   void _updateBullets() {
     final bullets =
         querySelector('.bullet-container').querySelectorAll('.bullet');