Carrousel de cuisine CSS pur avec Keypress?

Vraiment au moment où vous voulez une interaction avec le clavier, vous envisagez d'ajouter des scripts. Alors que CSS peut vous faire économiser beaucoup de travail de grognement en termes d'affichage / masquage, il y a certaines choses que vous avez encore besoin de scripts pour gérer.

Cela dit, la première chose que je suggérerais serait de corriger votre sémantique. Vous avez une LISTE de liens dans aucun ordre particulier, pourquoi est-ce dans un SPAN avec "div pour rien" invalide à l'intérieur au lieu de UL / LI? Comme vous n'avez pas d'imbrication de DIV à l'intérieur de chaque diapositive, pourquoi ont-ils besoin d'une classe? Si toutes les ancres ont la même classe, pourquoi certaines ont-elles besoin de classes?

Alors tout d'abord, écumons les scories.




Capture d'écran de votre site
Capture d'écran de votre site
Capture d'écran de votre site
Capture d'écran de votre site
Capture d'écran de votre site

Code (balisage):

Ensuite, pour le CSS quelque chose de plus dans le sens de (en prenant quelques libertés artistiques)


.lightboxes > div,
.lightboxes .close {
	top:0;
	width:100%;
	height:100%;
}

.lightboxes > div {
	box-sizing:border-box;
	display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
	left:-100vw;
	padding:3em;
	opacity:0;
	transition:left 0s 0.5s, opacity 0.5s;
	background:rgba(0,128,255,0.7);
	box-shadow:inset 0 0 255px rgba(0,0,64,0.7);
}

.lightboxes > div:target {
	left:0;
	opacity:1;
	transition:left 0s, opacity 0.5s;
}

.lightboxes a {
	text-decoration:none;
	color:#000;
	transition:color 0.5s;
}

.lightboxes a:focus,
.lightboxes a:hover {
	color:#0FF;
}

.lightboxes a:before {
	position:absolute;
	font-size:2em;
	line-height:1em;
}

.lightboxes .close {
	position:absolute;
	left:0;
}

.lightboxes .close:before {
	position:absolute;
	top:0.25em;
	right:0.25em;
	content:"1F5D9";
}

.lightboxes .prev:before,
.lightboxes .next:before {
	width:1.5em;
	top:50%;
	text-align:center;
	margin-top:-0.5em;
}

.lightboxes .prev:before {
	left:0;
	content:"25C0";
}

.lightboxes .next:before {
	right:0;
	content:"25BA";
}

.lightboxes img {
	max-width:100%;
	max-height:100%;
	box-shadow:0 0 3em rgba(0,0,128,0.7);
}

Code (balisage):

Désormais, les scripts ne doivent pas devenir trop complexes. Il nous suffit d'intercepter les frappes au niveau du document, puis de regarder le hachage pour voir ce qui est ciblé. Si le parent de l'élément ciblé est un .lightboxes, vérifiez la séquence de touches et saisissez l'ancre enfant appropriée et exécutez .click () dessus. Vérifie naturellement si lesdits éléments existent et la résolution doit être effectuée tout au long du processus.


(function(d, w) {
	// remember, arrows don't trigger keypress :(
	d.addEventListener('keydown', lightBoxCheck, false);
	function lightBoxCheck(e) {
		var hash = w.location.hash ? w.location.hash.substr(1) : '';
		if (!hash) return;
		var
			target = d.getElementById(hash),
			method;
		if (
			target &&
			target.parentNode.className == 'lightboxes'
		) {
			switch(e.keyCode) {
				case 27:
					method = '.close';
					break;
				case 37:
					method = '.prev';
					break;
				case 39:
					method = '.next';
					break;
				default:
					// short circuit out
					return;
			}
			if (target = target.querySelector(method)) {
				target.click();
				e.preventDefault();
			}
		}
	}
})(document, window);

Code (balisage):

… et bien sûr, il est dans un SIF (alias IIFE) pour isoler sa portée afin que les autres scripts n'interfèrent pas. Notez également que si nous interceptons la frappe, nous annulons l'événement empêchant toute propagation, mais permettons aux autres frappes de continuer sur leur activité afin que d'autres scripts s'ils sont présents (ou la fonctionnalité du navigateur) puissent toujours fonctionner.

Démo en direct:

https://cutcodedown.com/for_others/7643sfsag6/lightbox/

Pas très loin de ce que vous avez écrit, et le script est conçu pour AMÉLIORER la page au lieu de supplanter la fonctionnalité. C'est l'astuce d'un milliard de dollars, c'est que le script est toujours utilisable pour la navigation tactile, la souris et même le clavier de style onglet conventionnel – mais le tout petit peu de script l'améliore avec la saisie au clavier.