slider

app/assets/javascripts/public.js.coffee

@@ -39,7 +39,9 @@ $ ->
       
     test = 10
 
-    $("#home_slider").css("height", ($("#main").width()*(640 / 1200))+"px")
+    $("#home_slider").css("height", ($("#main").width()*(9 / 20))+"px")
+    
+    $("#home_slider .inner").css("height", ($("#main").width()*(9 / 20))+"px")
     
       
     

app/assets/stylesheets/public.scss

@@ -111,7 +111,7 @@ h1,h2,h3{
     right:20px;
     left:20px;
     text-align:center;
-    font-size:2.4em;
+  
     
   }
   &.principal{
@@ -119,3 +119,14 @@ h1,h2,h3{
     //min-height:600px;
   }
 }
+
+#home_slider{
+  .inner{
+    background:black center center no-repeat;
+    background-size:100%;
+    background-size:cover;
+    overflow:hidden;
+   
+   
+  }
+}

app/views/layouts/public.html.haml

@@ -80,10 +80,12 @@
                   -if home_slider_slide.image_file
                   
                     %li
+                      
                       -if home_slider_slide.url?
-                        =link_to image_tag(home_slider_slide.image_file.file.url), home_slider_slide.url
+                        =link_to  home_slider_slide.url do
+                          .inner{:style => "background-image:url('#{home_slider_slide.image_file.file.url}');"}
                       -else
-                        =image_tag(home_slider_slide.image_file.file.url)
+                        .inner{:style => "background-image:url('#{home_slider_slide.image_file.file.url}');"}
                     
             
             

public/images/arrows.svg

@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="100px" height="50px" viewBox="0 0 100 50" enable-background="new 0 0 100 50" xml:space="preserve">
+	 viewBox="-33 85.3 100 50" style="enable-background:new -33 85.3 100 50;" xml:space="preserve">
-<polyline fill="none" stroke="#4D4D4D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+<style type="text/css">
-	26.232,35.01 15.039,23.817 25.865,12.99 "/>
+	.st0{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
-<polyline fill="none" stroke="#4D4D4D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+</style>
-	73.693,35.69 85.578,23.805 74.083,12.31 "/>
+<polyline class="st0" points="-6.8,120.3 -18,109.1 -7.1,98.3 "/>
+<polyline class="st0" points="40.7,121 52.6,109.1 41.1,97.6 "/>
 </svg>