#17 - Calling onChange when selecting through the controls

leandrowd · Nov 21, 2015 · 0d2368f · 0d2368f
1 parent 81232ee
commit 0d2368f
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 208 deletions.
diff --git a/dev/index.html b/dev/index.html
@@ -9,6 +9,7 @@
 		<link href='http://fonts.googleapis.com/css?family=Roboto:100,700,400' rel='stylesheet' type='text/css'>
 	</head>
 	<body>
+		<a href="https://github.com/leandrowd/react-responsive-carousel"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
 		<div class="wrapper">
 			<h1>React Responsive Carousel (WIP)</h1>
 

diff --git a/dist/carousel.css b/dist/carousel.css
@@ -59,72 +59,12 @@
   /* Uncomment for 3D effect */
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }
 
-.icon-cancel:before {
-  content: "\e801"; }
-
 .icon-right-open:before {
   content: "\e802"; }
 
 .icon-left-open:before {
   content: "\e803"; }
 
-.icon-search:before {
-  content: "\e804"; }
-
-.icon-down-dir:before {
-  content: "\e806"; }
-
-.icon-cog:before {
-  content: "\e807"; }
-
-.icon-up-dir:before {
-  content: "\e808"; }
-
-.icon-arrow-combo:before {
-  content: "\e809"; }
-
-.icon-calendar:before {
-  content: "\e600"; }
-
-.icon-parking:before {
-  content: "\e601"; }
-
-.icon-body:before {
-  content: "\e602"; }
-
-.icon-engine3:before {
-  content: "\e603"; }
-
-.icon-engine4:before {
-  content: "\e604"; }
-
-.icon-engine:before {
-  content: "\e606"; }
-
-.icon-gearbox:before {
-  content: "\e607"; }
-
-.icon-odometer1:before {
-  content: "\e805"; }
-
-.icon-odometer2:before {
-  content: "\e608"; }
-
-.icon-odometer:before {
-  content: "\e609"; }
-
-.icon-tires:before {
-  content: "\e60a"; }
-
-.icon-wheel:before {
-  content: "\e60b"; }
-
-.icon-petrol2:before {
-  content: "\e605"; }
-
-.icon-fuel:before {
-  content: "\e800"; }
-
 button {
   outline: 0;
   border: 0;
@@ -195,7 +135,6 @@ button {
     transform: translate3d(0, 0, 0);
     position: relative;
     list-style: none;
-    overflow: hidden;
     white-space: nowrap; }
   .carousel .thumb {
     -webkit-transition: border 0.15s ease-in;
@@ -232,7 +171,9 @@ button {
       .carousel.carousel-slider .control-arrow:hover {
         background: rgba(0, 0, 0, 0.2); }
   .carousel .slider-wrapper {
-    overflow: hidden; }
+    overflow: hidden;
+    margin: auto;
+    width: 100%; }
   .carousel .slider {
     -webkit-transition: all 0.35s ease-in;
     -moz-transition: all 0.35s ease-in;
@@ -244,22 +185,22 @@ button {
     -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
+    display: flex;
     position: relative;
-    list-style: none;
-    overflow: hidden;
-    white-space: nowrap; }
+    list-style: none; }
     .carousel .slider.swiping {
       -webkit-transition: none 0 ease-in;
       -moz-transition: none 0 ease-in;
       -ms-transition: none 0 ease-in;
       -o-transition: none 0 ease-in;
       transition: none 0 ease-in; }
   .carousel .slide {
-    display: inline-block;
-    width: 260px;
-    margin: 0px;
-    white-space: nowrap; }
+    flex-direction: column;
+    flex-flow: column;
+    min-width: 100%;
+    margin: 0; }
     .carousel .slide img {
+      width: 100%;
       vertical-align: top; }
   .carousel .control-dots {
     position: absolute;

diff --git a/dist/carousel.min.css b/dist/carousel.min.css
diff --git a/dist/imageGallery.css b/dist/imageGallery.css
@@ -59,72 +59,12 @@
   /* Uncomment for 3D effect */
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }
 
-.icon-cancel:before {
-  content: "\e801"; }
-
 .icon-right-open:before {
   content: "\e802"; }
 
 .icon-left-open:before {
   content: "\e803"; }
 
-.icon-search:before {
-  content: "\e804"; }
-
-.icon-down-dir:before {
-  content: "\e806"; }
-
-.icon-cog:before {
-  content: "\e807"; }
-
-.icon-up-dir:before {
-  content: "\e808"; }
-
-.icon-arrow-combo:before {
-  content: "\e809"; }
-
-.icon-calendar:before {
-  content: "\e600"; }
-
-.icon-parking:before {
-  content: "\e601"; }
-
-.icon-body:before {
-  content: "\e602"; }
-
-.icon-engine3:before {
-  content: "\e603"; }
-
-.icon-engine4:before {
-  content: "\e604"; }
-
-.icon-engine:before {
-  content: "\e606"; }
-
-.icon-gearbox:before {
-  content: "\e607"; }
-
-.icon-odometer1:before {
-  content: "\e805"; }
-
-.icon-odometer2:before {
-  content: "\e608"; }
-
-.icon-odometer:before {
-  content: "\e609"; }
-
-.icon-tires:before {
-  content: "\e60a"; }
-
-.icon-wheel:before {
-  content: "\e60b"; }
-
-.icon-petrol2:before {
-  content: "\e605"; }
-
-.icon-fuel:before {
-  content: "\e800"; }
-
 .image-gallery {
   overflow: hidden;
   width: 100%;

diff --git a/dist/imageGallery.min.css b/dist/imageGallery.min.css
diff --git a/dist/main.css b/dist/main.css
@@ -125,72 +125,12 @@ code {
   /* Uncomment for 3D effect */
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }
 
-.icon-cancel:before {
-  content: "\e801"; }
-
 .icon-right-open:before {
   content: "\e802"; }
 
 .icon-left-open:before {
   content: "\e803"; }
 
-.icon-search:before {
-  content: "\e804"; }
-
-.icon-down-dir:before {
-  content: "\e806"; }
-
-.icon-cog:before {
-  content: "\e807"; }
-
-.icon-up-dir:before {
-  content: "\e808"; }
-
-.icon-arrow-combo:before {
-  content: "\e809"; }
-
-.icon-calendar:before {
-  content: "\e600"; }
-
-.icon-parking:before {
-  content: "\e601"; }
-
-.icon-body:before {
-  content: "\e602"; }
-
-.icon-engine3:before {
-  content: "\e603"; }
-
-.icon-engine4:before {
-  content: "\e604"; }
-
-.icon-engine:before {
-  content: "\e606"; }
-
-.icon-gearbox:before {
-  content: "\e607"; }
-
-.icon-odometer1:before {
-  content: "\e805"; }
-
-.icon-odometer2:before {
-  content: "\e608"; }
-
-.icon-odometer:before {
-  content: "\e609"; }
-
-.icon-tires:before {
-  content: "\e60a"; }
-
-.icon-wheel:before {
-  content: "\e60b"; }
-
-.icon-petrol2:before {
-  content: "\e605"; }
-
-.icon-fuel:before {
-  content: "\e800"; }
-
 button {
   outline: 0;
   border: 0;
@@ -207,3 +147,9 @@ button {
   margin: 30px auto !important; }
   .demo-carousel .thumb {
     width: 120px; }
+
+.example {
+  margin: 20px 0; }
+
+h5 {
+  margin-bottom: 10px; }
diff --git a/dist/main.js b/dist/main.js