Skip to content

Instantly share code, notes, and snippets.

@muriloazevedo
Last active December 19, 2015 09:09
Show Gist options
  • Save muriloazevedo/5931391 to your computer and use it in GitHub Desktop.
Save muriloazevedo/5931391 to your computer and use it in GitHub Desktop.
Home magento com scrolling carousel
<div class="row-fluid">
<div id="carousel-maior" class="carousel-demo" style="padding-left: 0px; padding-right: 0px; height: 65px; overflow: hidden; position: relative;">
<ul>
<li class="contentBox thumbnail"><img src="http://placehold.it/370x370" alt="" />
<div class="caption"><!-- Hover content -->
<div class="row-fluid">
<div class="inner-caption span7">
<h4 class="span12">Imperd&iacute;vel</h4>
<p class="preco span4 offset4">De R$ 200,00 por <span class="desconto">89,00</span> <a class="span2" href="outlet_product_detail.php">+detalhes</a> <a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/370x370" alt="" />
<div class="caption"><!-- Hover content -->
<div class="row-fluid">
<div class="inner-caption span7">
<h4 class="span12">Imperd&iacute;vel</h4>
<p class="preco span4 offset4">De R$ 200,00 por <span class="desconto">89,00</span> <a class="span2" href="outlet_product_detail.php">+detalhes</a> <a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/370x370" alt="" />
<div class="caption"><!-- Hover content -->
<div class="row-fluid">
<div class="inner-caption span7">
<h4 class="span12">Imperd&iacute;vel</h4>
<p class="preco span4 offset4">De R$ 200,00 por <span class="desconto">89,00</span> <a class="span2" href="outlet_product_detail.php">+detalhes</a> <a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/370x370" alt="" />
<div class="caption"><!-- Hover content -->
<div class="row-fluid">
<div class="inner-caption span7">
<h4 class="span12">Imperd&iacute;vel</h4>
<p class="preco span4 offset4">De R$ 200,00 por <span class="desconto">89,00</span> <a class="span2" href="outlet_product_detail.php">+detalhes</a> <a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/370x370" alt="" />
<div class="caption"><!-- Hover content -->
<div class="row-fluid">
<div class="inner-caption span7">
<h4 class="span12">Imperd&iacute;vel</h4>
<p class="preco span4 offset4">De R$ 200,00 por <span class="desconto">89,00</span> <a class="span2" href="outlet_product_detail.php">+detalhes</a> <a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/370x370" alt="" />
<div class="caption"><!-- Hover content -->
<div class="row-fluid">
<div class="inner-caption span7">
<h4 class="span12">Imperd&iacute;vel</h4>
<p class="preco span4 offset4">De R$ 200,00 por <span class="desconto">89,00</span> <a class="span2" href="outlet_product_detail.php">+detalhes</a> <a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/370x370" alt="" />
<div class="caption"><!-- Hover content -->
<div class="row-fluid">
<div class="inner-caption span7">
<h4 class="span12">Imperd&iacute;vel</h4>
<p class="preco span4 offset4">De R$ 200,00 por <span class="desconto">89,00</span> <a class="span2" href="outlet_product_detail.php">+detalhes</a> <a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div id="carousel" class="carousel-demo" style="padding-left: 0px; padding-right: 0px; height: 65px; overflow: hidden; position: relative;">
<ul>
<li class="contentBox thumbnail"><img src="http://placehold.it/275x275" alt="" />
<div class="caption span3"><!-- Hover content -->
<div class="inner-caption span3 offset4">
<h4>Imperd&iacute;vel</h4>
<p class="preco span4 offset2">De R$ 200,00 por <span class="desconto">89,00</span><a href="outlet_product_detail.php">+detalhes</a><a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/275x275" alt="" />
<div class="caption span3"><!-- Hover content -->
<div class="inner-caption span3 offset4">
<h4>Imperd&iacute;vel</h4>
<p class="preco span4 offset2">De R$ 200,00 por <span class="desconto">89,00</span><a href="outlet_product_detail.php">+detalhes</a><a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/275x275" alt="" />
<div class="caption span3"><!-- Hover content -->
<div class="inner-caption span3 offset4">
<h4>Imperd&iacute;vel</h4>
<p class="preco span4 offset2">De R$ 200,00 por <span class="desconto">89,00</span><a href="outlet_product_detail.php">+detalhes</a><a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/275x275" alt="" />
<div class="caption span3"><!-- Hover content -->
<div class="inner-caption span3 offset4">
<h4>Imperd&iacute;vel</h4>
<p class="preco span4 offset2">De R$ 200,00 por <span class="desconto">89,00</span><a href="outlet_product_detail.php">+detalhes</a><a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/275x275" alt="" />
<div class="caption span3"><!-- Hover content -->
<div class="inner-caption span3 offset4">
<h4>Imperd&iacute;vel</h4>
<p class="preco span4 offset2">De R$ 200,00 por <span class="desconto">89,00</span><a href="outlet_product_detail.php">+detalhes</a><a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/275x275" alt="" />
<div class="caption span3"><!-- Hover content -->
<div class="inner-caption span3 offset4">
<h4>Imperd&iacute;vel</h4>
<p class="preco span4 offset2">De R$ 200,00 por <span class="desconto">89,00</span><a href="outlet_product_detail.php">+detalhes</a><a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/275x275" alt="" />
<div class="caption span3"><!-- Hover content -->
<div class="inner-caption span3 offset4">
<h4>Imperd&iacute;vel</h4>
<p class="preco span4 offset2">De R$ 200,00 por <span class="desconto">89,00</span><a href="outlet_product_detail.php">+detalhes</a><a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/275x275" alt="" />
<div class="caption span3"><!-- Hover content -->
<div class="inner-caption span3 offset4">
<h4>Imperd&iacute;vel</h4>
<p class="preco span4 offset2">De R$ 200,00 por <span class="desconto">89,00</span><a href="outlet_product_detail.php">+detalhes</a><a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/275x275" alt="" />
<div class="caption span3"><!-- Hover content -->
<div class="inner-caption span3 offset4">
<h4>Imperd&iacute;vel</h4>
<p class="preco span4 offset2">De R$ 200,00 por <span class="desconto">89,00</span><a href="outlet_product_detail.php">+detalhes</a><a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/275x275" alt="" />
<div class="caption span3"><!-- Hover content -->
<div class="inner-caption span3 offset4">
<h4>Imperd&iacute;vel</h4>
<p class="preco span4 offset2">De R$ 200,00 por <span class="desconto">89,00</span><a href="outlet_product_detail.php">+detalhes</a><a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/275x275" alt="" />
<div class="caption span3"><!-- Hover content -->
<div class="inner-caption span3 offset4">
<h4>Imperd&iacute;vel</h4>
<p class="preco span4 offset2">De R$ 200,00 por <span class="desconto">89,00</span><a href="outlet_product_detail.php">+detalhes</a><a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</li>
<li class="contentBox thumbnail"><img src="http://placehold.it/275x275" alt="" />
<div class="caption span3"><!-- Hover content -->
<div class="inner-caption span3 offset4">
<h4>Imperd&iacute;vel</h4>
<p class="preco span4 offset2">De R$ 200,00 por <span class="desconto">89,00</span><a href="outlet_product_detail.php">+detalhes</a><a class="btn btn-warning checkout" href="outlet_checkout.php">Comprar</a></p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div id="myCarousel3" class="carousel slide span12">
<div class="carousel-inner span10 offset1">
<div class="item">
<div class="span2 slide">
<div class="thumbnail span12"><img style="max-width: 100%;" src="http://placehold.it/250x250" alt="Image" /></div>
</div>
<div class="span2 slide">
<div class="thumbnail"><img style="max-width: 100%;" src="http://placehold.it/250x250" alt="Image" /></div>
</div>
<div class="span2 slide">
<div class="thumbnail"><img style="max-width: 100%;" src="http://placehold.it/250x250" alt="Image" /></div>
</div>
<div class="span2 slide">
<div class="thumbnail"><img style="max-width: 100%;" src="http://placehold.it/250x250" alt="Image" /></div>
</div>
<div class="span2 slide">
<div class="thumbnail span12"><img style="max-width: 100%;" src="http://placehold.it/250x250" alt="Image" /></div>
</div>
<div class="span2 slide">
<div class="thumbnail"><img style="max-width: 100%;" src="http://placehold.it/250x250" alt="Image" /></div>
</div>
</div>
<!--/item-->
<div class="item active">
<div class="span2 slide">
<div class="thumbnail span12"><img style="max-width: 100%;" src="http://placehold.it/250x250" alt="Image" /></div>
</div>
<div class="span2 slide">
<div class="thumbnail"><img style="max-width: 100%;" src="http://placehold.it/250x250" alt="Image" /></div>
</div>
<div class="span2 slide">
<div class="thumbnail"><img style="max-width: 100%;" src="http://placehold.it/250x250" alt="Image" /></div>
</div>
<div class="span2 slide">
<div class="thumbnail"><img style="max-width: 100%;" src="http://placehold.it/250x250" alt="Image" /></div>
</div>
<div class="span2 slide">
<div class="thumbnail span12"><img style="max-width: 100%;" src="http://placehold.it/250x250" alt="Image" /></div>
</div>
<div class="span2 slide">
<div class="thumbnail"><img style="max-width: 100%;" src="http://placehold.it/250x250" alt="Image" /></div>
</div>
</div>
<!--/item--></div>
<a class="left carousel-control" href="#myCarousel3" data-slide="prev">&lsaquo;</a> <a class="right carousel-control" href="#myCarousel3" data-slide="next">&rsaquo;</a></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment