Mi código tiene dos elementos div
. El segundo muestra una lista no numerada horizontal, con cuatro opciones.
Al elegir una de las opciones disponibles, el primer div
muestra el contenido correspondiente a la opción dada.
Disparo código:
<div id="testimonial-slider" class="flexslider animate-this fadeInUp animated" style="height: 229px;">
<ul class="slides">
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class="flex-active-slide">
<p class="author-info"> Sencillez</p>
<p>“Estamos especializados en el mantenimiento online de cuentas bancarias, mediante tecnología digital. Aquí no encontrarás productos toxicos ni rendimientos de capital extraños. En cambio, sí encontrarás: impresión de cuentas, préstamos e hipotecas
pensadas para la gente de hoy… hasta un total de 11 productos de inversión.”
</p>
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class="flex-active-slide">
<p class="author-info"> Facilidad</p>
<p>“En Charlybank obtienes tus productos inmediatamente, sin esperas. El cálculo de las operaciones se realiza al instante, en el mismo momento en que introduces tus datos y las especificaciones del producto que contrates. Una vez que elijas, el proceso
es sencillo y claro. En unos pocos clics estaremos trabajando en tu producto y en pocas horas recibirás en tu correo la activación.”
</p>
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;" class="flex-active-slide">
<p class="author-info"> Economia</p>
<p>“Somos un banco online preocupado por la economia: disponemos de la infraestructura más avanzada del mercado, lo cual, unido a la estandarización de nuestros productos, nos permite ofrecer rendimientos altamente competitivos.”</p>
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class="flex-active-slide">
<p class="author-info"> Calidad</p>
<p>“La calidad es el resultado de la experiencia, la pasión que ponemos en nuestro trabajo y los recursos que hemos puesto al servicio de nuestros clientes. Aunque somos un banco online "joven", los miembros del equipo técnico contamos con una dilatada
experiencia en los sectores de la banca y de la informática. Los productos bancarios que ofrecemos, y que son de última generación, eatán en manos de expertos apasionados por su trabajo, y garantizan un resultado óptimo en el resultado económico
de los clientes.”
</p>
</li>
</ul>
</div>
<div class="flexslider-controls animate-this fadeInUp animated">
<ul class="flex-control-nav">
<li class="flex-active">Sencillez</li>
|
<li class="flex-active">Facilidad</li>
|
<li class="flex-active">Economia</li>
|
<li class="flex-active">Calidad</li>
</ul>
</div>
La cuestión se halla en que siempre sale la misma opción y al elegir otra de la lista, no se altera el div
de arriba.