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;
}