Slider simple y responsive. En celulares no trabaja

markplan · #1 (**permalink**) 07/09/2015, 12:34

Estoy reduciendo el peso de una web para que descargue mas rapido he medido con "PageSpeed Insights" y para eso he conseguido un Slider menos complejo y simple y funciona en mi PC, cuando reajusto la pantalla funciona normal en uan PC, pero en un Smartphone solo se muestra la imagen pero NO FUNCIONA, osea no recorre las imagenes , y supongo en otros celulares igual.

Ahora no se a que se debera, o que podria estar mal o que podria aumentar para que me funcione en celulares, aqui les dejo el codigo. Es tan simple el slider.

index.html

Código HTML:

<!DOCTYPE html>
<html class=" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<link rel="stylesheet prefetch" href="css/reset.css">
<link rel="stylesheet" href="css/estilos.css" />
</head>
<body>
<div class="diy-slideshow">
	<figure class="">
		<img src="images/snowying.jpg" width="100%"><figcaption>Texto 1</figcaption> 
	</figure>
  <figure class="">
    <img src="images/starlight.jpg" width="100%"><figcaption>Texto 2</figcaption> 
	</figure>
	<figure class="show">
		<img src="images/snowstorm.jpg" width="100%"><figcaption>Texto 3</figcaption>
	</figure>
  <figure>
		<img src="images/misty-winter-afternoon.jpg" width="100%"><figcaption>Texto 4</figcaption>
	</figure>
  <figure>
		<img src="images/good-morning.jpg" width="100%"><figcaption>Texto 5</figcaption>
	</figure>
  <figure>
		<img src="images/driving-home-for-christmas.jpg" width="100%"><figcaption>Texto 6</figcaption>
	</figure>
  <span class="prev">«</span>
  <span class="next">»</span>
</div>  
<script>
(function () {
    var counter = 0, $items = document.querySelectorAll('.diy-slideshow figure'), numItems = $items.length;
    var showCurrent = function () {
        var itemToShow = Math.abs(counter % numItems);
        [].forEach.call($items, function (el) {
            el.classList.remove('show');
        });
        $items[itemToShow].classList.add('show');
    };
    document.querySelector('.next').addEventListener('click', function () {
        counter++;
        showCurrent();
    }, false);
    document.querySelector('.prev').addEventListener('click', function () {
        counter--;
        showCurrent();
    }, false);
}());
</script>
</body></html>

estilos.css

Código:

body {
  margin: 0; 
  padding: 0;
  background: #111;
  height: 100%;
}
.diy-slideshow{
  display: block;
  overflow: hidden;
  position: relative;
}
.diy-slideshow figure{
  opacity: 0;
  position: absolute;
  transition: 1s opacity;
}
.diy-slideshow figcaption{
  background: rgba(0,0,0, .25);
  border-radius: 2px;
  bottom: .75em;
  color: #fff;
  font-family: sans-serif;
  font-size: .8em;
  padding: .25em;
  position: absolute;
  right: .35em;
}
.diy-slideshow figcaption a{
  color: #fff;
}
figure.show{
  opacity: 1;
  position: static;
  transition: 1s opacity;
}
.next, .prev{
  background: rgba(0,0,0, .6);
  color: #fff;
  font-size: 2em;
  margin-top: -.75em;
  opacity: .3;
  position: absolute;
  top: 50%;
  z-index: 1;
  -moz-user-select: none;
}
.diy-slideshow .next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}
.diy-slideshow .next{
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  padding: 10px 5px 15px 10px;
  right: 0;
}
.diy-slideshow .prev{
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  left: 0;
  padding: 10px 10px 15px 5px;
}
.diy-slideshow p{
  color: #fff;
  margin: 10px 20px;
}

AngelKrak · #2 (**permalink**) 07/09/2015, 12:52

yo no veo que tenga el responsive(@media queries) en el css ._. y recuerda agregarle el Meta Viewport para que se vea bien en el movil ;)

markplan · #3 (**permalink**) 07/09/2015, 20:11

Es este el enlace donde funciona en la PC normal, y aqui te lo puedes descargar si tratas de revisarlo en un Celular no funciona los slider.

El codigo que puse ahi arriba si funciona y carga las fotos en el celular, pero al apretar siguiente o anterior, no avanza solo se muestra la foto que carga por defecto.

No se si se pueda modificar para que funcione para celulares.

Ahora porque tanto voy con este Slider habiendo otros bonitos y espectaculares, la razon es que de todos los slider que he buscado, donde solo para mostrarse, se carga jquery, javascrip, muchos archivos CSS, etc, y hace que la pagina sea lenta, y estoy haciendo mejoras de una web cambiando todo a responsive y la descarga que sea mas rapida, hasta ahora todo va bien, solo que no corren las imagenes en los celulares.

Saludos

AngelKrak · #4 (**permalink**) 07/09/2015, 22:20

amigo conmigo funciona bien el slider, Tengo un MOTO G y lo abri con Chrome y funciona bien el slider y si cambia con las flechitas tambien ;) debe de ser un problema de tu celular amigo ;) intente probar con algun otro celular o navegador haber si te funciona ;)