Commit ea180193 authored by santiaago's avatar santiaago
Browse files

make example images carousel like 

issue #47
parent 40f6ab36

app/assets/css/examples.css

+32 −1
Original line number Diff line number Diff line
@@ -5,9 +5,40 @@ 
.examples--square{

    padding-bottom: 50px;

    padding-top: 50px;

    height: 200px;

    height: 300px;

}



.examples--backgroundGrey{

    background: #F4F4F4;

}



/* CUSTOMIZE CAROUSEL

-------------------------------------------------- */



.carouselExamples {

  height: 182px;

  width: 660px;

  margin-bottom: 0px;

  position: relative;

}



.carouselExamples .item {

  height: 182px;

  width: 660px;

}



.carouselExamples-inner > .item > img {

      height: 142px;

      width: 142px;

      display: inline;

      margin-left: 10px;

      margin-top: 20px;

      margin-bottom: 20px;

      margin-right: 10px;

}



.carouselExamples--background{

    background: #F4F4F4;

    padding-bottom: 50px;

    padding-top: 50px;

}

app/partials/marketing/example.html

+36 −12
Original line number Diff line number Diff line
@@ -4,17 +4,41 @@ 
  </div>

  <div class="col-md-9 examples--square">

    <h4>CAROUSEL HERE</h4>

    <div id="Carousel1" class="carousel carouselExamples slide center-block">

      <ol class="carousel-indicators">

	<li data-target="Carouselk1" data-slide-to="0" class="active"></li>

	<li data-target="Carouselk1" data-slide-to="1"></li>

	<li data-target="Carouselk1" data-slide-to="2"></li>

      </ol>

      <div class="carousel-inner carouselExamples-inner">

	<div class="item active">

	  <img src="/squares/tinygrap?theme=frogideas&numcolors=3" class="img-responsive">	  



	  <img src="/squares/tinygrap?theme=heatwave&numcolors=4" class="img-responsive">

	  <img src="/squares/tinygrap?theme=bythepool&numcolors=4" class="img-responsive">

	  <img src="/squares/tinygrap?theme=daisygarden&numcolors=4" class="img-responsive">

	</div>

	<div class="item">

	  <img src="/isogrids/tinygrap?theme=frogideas&numcolors=3" class="img-responsive">	  



	  <img src="/isogrids/tinygrap?theme=heatwave&numcolors=4" class="img-responsive">

	  <img src="/isogrids/tinygrap?theme=bythepool&numcolors=4" class="img-responsive">

	  <img src="/isogrids/tinygrap?theme=daisygarden&numcolors=4" class="img-responsive">

	</div>

	<div class="item">

	  <img src="/labs/isogrids/hexa/tinygrap?theme=frogideas&numcolors=3" class="img-responsive">	  



	  <img src="/labs/isogrids/hexa/tinygrap?theme=heatwave&numcolors=4" class="img-responsive">

	  <img src="/labs/isogrids/hexa/tinygrap?theme=bythepool&numcolors=4" class="img-responsive">

	  <img src="/labs/isogrids/hexa/tinygrap?theme=daisygarden&numcolors=4" class="img-responsive">

	</div>

      </div>

      <span class="left carousel-control" data-target="#Carousel1" data-slide="prev">

	<span class="glyphicon glyphicon-chevron-left"></span>

      </span>

      <span class="right carousel-control" data-target="#Carousel1" data-slide="next">

	<span class="glyphicon glyphicon-chevron-right"></span>

      </span>

    </div> <!-- / .carousel -->

  </div>

</div>
 
<!-- "labs/checkerboard?size=402" -->

<!-- "/labs/squares/random?theme=summerwarmth&fmt=svg&size=400" -->

<!-- "/squares/tinygraphs?size=400" -->

<!-- "/squares/tinygraphs?theme=bythepool&size=400" -->

<!-- "/labs/isogrids/skeleton?size=400" -->

<!-- "/labs/isogrids/random?theme=sugarsweets&size=420" -->

<!-- "/isogrids/tinygraphs?size=420" -->

<!-- "/isogrids/tinygraphs?theme=duskfalling&size=420" -->

<!-- "/labs/isogrids/hexa?theme=heatwave&numcolors=4&size=420" -->

<!-- "/labs/isogrids/hexa?theme=seascape&numcolors=4&size=420" -->

<!-- "/labs/isogrids/hexa/tinygraphs?theme=frogideas&numcolors=4&size=420" -->

<!-- "/labs/isogrids/hexa/tinygraphs?theme=duskfalling&numcolors=4&size=420" -->