Карусель «Гранки» на чистом CSS с нажатием клавиш?

Привет, у меня есть лайтбокс-карусель на чистом CSS, который работает нормально.

Однако я хотел бы сделать три вещи:

-Когда я нажимаю ESC, это имитирует нажатие кнопки закрытия;

-при нажатии влево и вправо имитируется нажатие кнопки влево/вправо; и,

- когда я нажимаю на изображение, лайтбокс закрывается.

В идеале было бы здорово, если бы это можно было сделать на чистом CSS.

Вот скрипка: https://jsfiddle.net/postcolonialboy/Lxa2pgrw/3/

(Если нет, готов принять jquery) Вот что у меня есть:

 .lightbox__slide img {


position: absolute;


z-index: 30;


max-width: 90%;


max-height: 80%;


top: 50%;


left: 50%;


transform: translate(-50%, -50%);


animation-name: hide;


animation-duration: 0.5s;


animation-iteration-count: 1;


animation-direction: linear;


animation-fill-mode: forwards;


}


.lightbox__slide:target .btn {


display: block;


}


.lightbox__slide:target img {


opacity: 0;


animation-name: show;


animation-duration: 0.5s;


animation-iteration-count: 1;


animation-direction: linear;


animation-fill-mode: forwards;


}


.lightbox__slide:target~.lightbox__bg {


position: relative;


background: white;


opacity: 0.6;


top: 0;


left: 0;


width: 100%;


height: 100%;


z-index: 1;


}


@-webkit-keyframes show {


0% {


opacity: 0;


}


100% {


opacity: 1;


}


}


@-webkit-keyframes hide {


0% {


opacity: 1;


}


100% {


opacity: 0;


}


}


.btn {


position: absolute;


z-index: 20;


display: none;


transition: all 0.2s;


width: 40px;


height: 40px;


margin: -20px 0 0 -20px;


text-align: center;


line-height: 40px;


text-decoration: none;


color: black;


}


.btn:hover {


background: rgba(255, 255, 255, 0.8);


}


.btn--close {


top: 40px;


right: 20px;


}


.btn--close:after {


content: '\2715';


}


.btn--left {


top: 50%;


left: 40px;


}


.btn--left:after {


content: '⯇';


}


.btn--right {


top: 50%;


right: 20px;


}


.btn--right:after {


content: '⯈';


}

HTML:

 <span class="feature_category active" id="A"> <div class="feature_box_wrapper"><a href="#groys1">Link</a></div> <div class="feature_box_wrapper"><a href="#groys2">Link</a></div> <div class="feature_box_wrapper"><a href="#groys3">Link</a></div> <div class="feature_box_wrapper"><a href="#groys4">Link</a></div> <div class="feature_box_wrapper"><a href="#groys5">Link</a></div> </span> <div class="lightbox"> <!-- Groys --> <div class="lightbox__slide" id="groys1"> <a href="#_" class="btn btn--close"></a> <a href="#groys5" class="btn btn--left"></a> <a href="#groys2" class="btn btn--right"></a> <img src="[URL='https://lumtu.com/yti/NQzzQNTBodHRwczovL3BpY3N1bS5waG90b3Mvc2VlZC9waWNzdW0vODAwLADO']https://picsum.photos/seed/picsum/800/450[/URL]" alt="Скриншот вашего сайта"> </div> <div class="lightbox__slide" id="groys2"> <a href="#_" class="btn btn--close"></a> <a href="#groys1" class="btn btn--left"></a> <a href="#groys3" class="btn btn--right"></a> <img src="[URL='https://lumtu.com/yti/NQzzQNTBodHRwczovL3BpY3N1bS5waG90b3Mvc2VlZC9waWNzdW0vODAwLADO']https://picsum.photos/seed/picsum/800/450[/URL]" alt="Скриншот вашего сайта"> </div> <div class="lightbox__slide" id="groys3"> <a href="#_" class="btn btn--close"></a> <a href="#groys2" class="btn btn--left"></a> <a href="#groys4" class="btn btn--right"></a> <img src="[URL='https://lumtu.com/yti/NQzzQNTBodHRwczovL3BpY3N1bS5waG90b3Mvc2VlZC9waWNzdW0vODAwLADO']https://picsum.photos/seed/picsum/800/450[/URL]" alt="Скриншот вашего сайта"> </div> <div class="lightbox__slide" id="groys4"> <a href="#_" class="btn btn--close"></a> <a href="#groys3" class="btn btn--left"></a> <a href="#groys5" class="btn btn--right"></a> <img src="[URL='https://lumtu.com/yti/NQzzQNTBodHRwczovL3BpY3N1bS5waG90b3Mvc2VlZC9waWNzdW0vODAwLADO']https://picsum.photos/seed/picsum/800/450[/URL]" alt="Скриншот вашего сайта"> </div> <div class="lightbox__slide" id="groys5"> <a href="#_" class="btn btn--close"></a> <a href="#groys4" class="btn btn--left"></a> <a href="#groys1" class="btn btn--right"></a> <img src="[URL='https://lumtu.com/yti/NQzzQNTBodHRwczovL3BpY3N1bS5waG90b3Mvc2VlZC9waWNzdW0vODAwLADO']https://picsum.photos/seed/picsum/800/450[/URL]" alt="Скриншот вашего сайта"> </div> <div class="lightbox__bg"></div><!-- Close --> </div><!-- Close Lightbox -->

Код (CSS):

Хорошо, я не хочу, чтобы меня ругали по этому поводу. Я использую getAttribute, чтобы получить идентификацию изображения из ссылки, как вы это делаете с хешем и substr и мне просто интересно это. Используя substr, он должен иметь определенную длину. Если это сработало, то это просто работает.

Он динамичен, потому что хэш и :target определяют, как разметка работает без сценариев. Это самый быстрый и простой способ получить текущий слайд, не перехватывая скрипту полный контроль над его работой. Что бы вы предложили вместо этого/откуда бы вы взяли текущий слайд?

Определите «не работает» — как в клавиатуре (что обеспечивает сценарий) или в обычном интерфейсе мыши? И какое отношение к чему-либо имеют имена? Также определите, что вы подразумеваете под словом «ваш».

.lightbox__slide изображение {

позиция: абсолютная;

z-индекс: 30;

максимальная ширина: 90%;

максимальная высота: 80%;

верх: 50%;

осталось: 50%;

трансформировать: транслировать(-50%, -50%);

имя-анимации: скрыть;

продолжительность анимации: 0,5 с;

количество итераций анимации: 1;

направление анимации: линейное;

режим анимации-заполнения: вперед;

}

.lightbox__slide:цель .btn {

дисплей: блок;

}

.lightbox__slide:target img {

непрозрачность: 0;

имя-анимации: показать;

продолжительность анимации: 0,5 с;

количество итераций анимации: 1;

направление анимации: линейное;

режим анимации-заполнения: вперед;

}

.lightbox__slide:target~.lightbox__bg {

положение: относительное;

фон: белый;

непрозрачность: 0,6;

верх: 0;

слева: 0;

ширина: 100%;

высота: 100%;

z-индекс: 1;

}

@-webkit-keyframes показать {

0% {

непрозрачность: 0;

}

100% {

непрозрачность: 1;

}

}

@-webkit-keyframes скрыть {

0% {

непрозрачность: 1;

}

100% {

непрозрачность: 0;

}

}

.btn {

позиция: абсолютная;

z-индекс: 20;

дисплей: нет;

переход: все 0,2 с;

ширина: 40 пикселей;

высота: 40 пикселей;

поле: -20px 0 0 -20px;

выравнивание текста: по центру;

высота строки: 40 пикселей;

текстовое оформление: нет;

черный цвет;

}

.btn:наведите {

фон: rgba(255, 255, 255, 0,8);

}

.btn--закрыть {

верх: 40 пикселей;

справа: 20 пикселей;

}

.btn--закрыть:после {

содержимое: '\2715';

}

.btn--left {

верх: 50%;

слева: 40 пикселей;

}

.btn--left:после {

содержание: '⯇';

}

.btn--право {

верх: 50%;

справа: 20 пикселей;

}

.btn--right:после {

содержание: '⯈';

}

От чего? Не могли бы вы привести пример кода того, что вы имеете в виду, поскольку я заинтересован в других способах ведения дел, и я действительно не имею ни малейшего представления о том, о чем вы говорите. ... и с помощью substr все, что я делаю, это удаляю первый символ, который всегда является #, так о чем вы вообще?

GetAttribute для чего? вам нужен элемент, чтобы сначала получить атрибут OF. Само слайд-шоу работает БЕЗ JavaScript, используя хэши... текущий хеш и :target являются единственными индикаторами того, какой слайд является текущим... Так как же «getAttribute» предоставит вам текущий элемент :target?

Я бы предложил использовать ползунки карусели на чистом JavaScript (не jQuery). Они отлично работают в большинстве браузеров и на мобильных устройствах.

Ползунки только css не будут работать так, как вы ожидаете, на iPad и мобильных телефонах.

Не создавайте себе головную боль, используйте слайдер с JavaScript. PS @deathshadow имеет ползунки на чистом JavaScript.

Возможно, он сможет указать вам правильную ссылку на своем сайте.