Problema javascript para añadir varios slideshow a plantilla para landing page  

 
jorge
 jorge
Usuario activo

Me gustaría que me dieseis una solución con el código para crear varias galerías una debajo de la otra de manera que cada una la pudiese ver como slideshow de izquierda a derecha.

A continuacion os dejo el codigo:

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}

1 / 3

PREBODA - KEVIN & ELVIRA
2 / 3

PREBODA - KEVIN & ELVIRA
3 / 3

PREBODA - KEVIN & ELVIRA




var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

Gracias

Un saludo

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 26/04/2018 10:07 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Jorge,

Desconozco de donde has obtenido ese código pero no creo que sea la solución pegarlo en un widget o donde tengas pensado ponerlo (si usas un constructor) para que muestre diferentes galerías, principalmente por razones de mantenimiento del código, de las galerías y de que además sea responsive.

Si has copiado el código por ejemplo de alguna web es posible que esté supeditado a un tema concreto y por eso al llevártelo a otro tema presente errores por falta de librerías .js que lo soporten.

Además deberías considerar que los sliders en portada son "retardadores" y aumentan el tiempo de carga de la página.

Lo adecuado es hacerlo usando [shortcodes] que te facilite algún plugin de galerías donde puedas establecer comportamientos diferentes para cada slider (galería) mediante "parámetros" añadidos al shortcode.

¿Que plugins utilizas para tal tarea?

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 26/04/2018 10:24 pm

Cursos Gratuitos WordPress

jorge
 jorge
Usuario activo

He cogido el código de aquí.
https://www.w3schools.com/howto/howto_js_slideshow.asp

He creado una plantilla llamada landing.php para después crear en wordpress una página y asignarle dicha plantilla.

No utilizo ningún plugin.

Mi idea es hacer un texto de cabecera, 4 slideshow (uno debajo de otro para mostrar mi trabajo) y un formulario al final.

Agradecería tu ayuda.

Un saludo

ResponderCitar
Respondido : 26/04/2018 10:32 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Tal como te comenta Alejo, es posible que el código que tienes de manera aislada si funcione, el problema es que en WordPress tiene una filosofía de trabajo un poco distinta, si quieres hacer que ese código funcione tienes que dividirlo en varios archivos, registrar un script, un css y poner el código html en alguna página o widget de texto, en conclusión sería más complejo

Lo normal en WordPress para este tipo de funcionalidad es usar plugins, hay muchos plugins para mostrar slides. Revisa por ejemplo : https://www.webempresa.com/blog/5-sliders-para-wordpress-gratuitos-que-deberias-probar.html

La otra opción es que insertes ese contenido, tal como esta como un iframe en alguna parte de tu sitio, usulamente será en una página.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 26/04/2018 10:33 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

jorge
 jorge
Usuario activo

¿Me podríais explicar cómo se introduce ese código en un iframe? ¿De esta manera podría hacer varios slideshows uno debajo del otro? No controlo de javascript.

Gracias

ResponderCitar
Respondido : 26/04/2018 10:39 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

HOla

Puedes insertar un iframe en la vista de código de una página, el iframe son etiquetas html que hace referencia a una url, en tu caso la url de tu slide

Revisa:
https://www.w3schools.com/tags/tag_iframe.asp

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 26/04/2018 10:54 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

jorge
 jorge
Usuario activo

Creo que voy a optar por la opción de plugins. ¿Sabéis si existe algún plugin para crear slideshow con galerias nativas de wordpress ya creadas?

Me gustaría aprovechar todas las galerías nativas de wordpress que ya tengo creadas. Son muchas fotos y la verdad es que volver a hacer todo de nuevo... es un jaleo.

Gracias

Un saludo

ResponderCitar
Respondido : 27/04/2018 12:10 am
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Jorge,

Si me permites la opinión, creo que usar ese código externo en WordPress es como intentar reinventar la rueda.

Ya existen cientos de plugins de sliders de todos los tamaños, formas y posibilidades para instalar en WordPress y mostrar sliders en portada, en una página, en un widget, dentro de un post o página, sin tener que reescribir de cero como se tiene que mostrar un slider con códigos como el que muestras que posiblemente no sea 100% interpretado dentro de WordPress.

Si WordPress, por medios de plugins, ya tiene esas funcionalidades ¿porque añadir algo externo? es como quitarte el fémur para ponerte uno de fibra de carbono ¿si ya tienes uno propio para que complicarte? 🙂

Por ejemplo:

- 5 sliders para WordPress gratuitos que deberías probar - https://www.webempresa.com/blog/5-sliders-para-wordpress-gratuitos-que-deberias-probar.html

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 27/04/2018 1:09 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress