Aquí el ejemplo junto con el código css:
Código HTML
Código HTML:
<div class="coda-slider-wrapper"> <div class="coda-slider preload" id="coda-slider-1"> <div class="panel"> <div class="panel-wrapper"> <h2 class="title">HIT</h2> <div class="coda-izq"> <p>Es un producto que contiene ácido giberélico (giberelina A3). Una de las hormonas vegetales más activas que existen para estimular y regular el crecimiento de numerosas especies vegetales, como frutales, hortalizas, forestales, ornamentales y forrajes. </p> <p><b>Tipo: </b>Bioestimulantes de crecimiento.</p> <p><b>Presentación: </b>15 pzas x 1<br /> </p> <p><b>Estado:</b> Polvo</p> <p><a href="PDF/hit.pdf">Ver especificaciones del producto</a> </div> <div class="coda-der"> <div class="hit"> </div> </div> <!-- Cortar aquí --> </div> </div> <div class="panel"> <div class="panel-wrapper"> <h2 class="title">Vitozim</h2> <div class="coda-izq"> <p>Los extractos de origen orgánico que componen VITOZIM contienen: un bioestimulante, enzimas y citoquininas que actúan conjunta y sistemáticamente estimulando los procesos vitales de las plantas, germinación de las semilla, brotación de yemas, desarrollo del talluelo, integración del follaje, inducción de floración y fructificación y amarre de flores y frutos. <br /><br /> VITOZIM al catalizar las reacciones bioquímicas aumenta las reservas de las plantas tratadas al máximo, no es un regulador de crecimiento sino más bien un bioestimulante concentrado del desarrollo vegetal, cuya acción se traduce en una máxima capacidad productiva a través de las facultades de las plantas. </p> <p><b>Tipo: </b>Bioestimulantes de crecimiento.</p> <p><b>Presentación: </b>15 pzas x 1<br /> 20 pzas x 250 ml<br /> 12 pzas x 950 ml<br /> </p> <p><b>Estado:</b> Líquido</p> <p><a href="PDF/vitozim.pdf">Ver especificaciones del producto</a> </div> <div class="coda-der"> <div class="vitozim"> </div> </div> <!-- Cortar aquí --> </div> </div> </div><!-- .coda-slider --> </div><!-- .coda-slider-wrapper -->
Código HTML:
/* jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider Copyright (c) 2009 Niall Doherty This plugin available for use in all personal or commercial projects under both MIT and GPL licenses. */ /* Insignificant stuff, for demo purposes */ .panel h2.title { margin-bottom: 10px } noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px } /* Most common stuff you'll need to change */ .coda-slider-wrapper { padding: 20px 0 } .coda-slider { background: #ffffff } .coda-izq {width: 74%; float:left; border-right:#CCCCCC 1px solid; padding: 0px 5px 0px 0px;} .coda-der {width: 25%; float:right;} /*Productos*/ .fulbios {display:block; background:url(Imagenes/fulbios.jpg) no-repeat; width:205px; height:205px; float:right;} .trackw50 {display:block; background:url(Imagenes/trackw50.jpg) no-repeat; width:205px; height:205px; float:right;} .asper {display:block; background:url(Imagenes/asper.jpg) no-repeat; width:205px; height:205px; float:right;} .hit {display:block; background:url(Imagenes/hit.jpg) no-repeat; width:205px; height:205px; float:right;} .vitozim {display:block; background:url(Imagenes/bitozim.jpg) no-repeat; width:205px; height:205px; float:right;} /* Use this to keep the slider content contained in a box even when JavaScript is disabled */ .coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px } /* Change the width of the entire slider (without dynamic arrows) */ .coda-slider, .coda-slider .panel { width: 960px } /* Arrow styling */ .coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px } /* Tab nav */ .coda-nav ul li a.current { background: #084a1c } /* Panel padding */ .coda-slider .panel-wrapper { padding: 20px } /* Preloader */ .coda-slider p.loading { padding: 20px; text-align: center } /* Don't change anything below here unless you know what you're doing */ /* Tabbed nav */ .coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden; } .coda-nav ul li { display: inline } .coda-nav ul li a { background: #85c33a; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px;} /* Miscellaneous */ .coda-slider-wrapper { clear: both; overflow: auto } .coda-slider { float: left; overflow: hidden; position: relative } .coda-slider .panel { display: block; float: left } .coda-slider .panel-container { position: relative } .coda-nav-left, .coda-nav-right { float: left } .coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }