Avisos
Vaciar todo
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}
}
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
Respondido : 26/04/2018 10:07 pm
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
Respondido : 26/04/2018 10:24 pm
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
Respondido : 26/04/2018 10:32 pm
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.
Respondido : 26/04/2018 10:33 pm
¿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
Respondido : 26/04/2018 10:39 pm
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.
Respondido : 26/04/2018 10:54 pm
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
Respondido : 27/04/2018 12:10 am
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
Respondido : 27/04/2018 1:09 am
