Свойство CSS :checked для использования без javascript — функциональность, которую можно нажать, сохраняется после щелчк ⇐ CSS

[Anonymous]

У меня возникли проблемы с правильной работой функции прокрутки с использованием CSS только со скрытыми полями ввода с использованием свойства Checked. Кажется, что при первой загрузке страницы он работает так, как ожидалось: щелкните стрелку вправо и влево и работает отлично, но при повторном нажатии стрелки вправо действие, похоже, было удалено - я думаю, поскольку элемент ввода был установлен как отмеченный, так что может быть проблема, поскольку статус изменен (я думал, что есть способ сохранить функциональность после первого щелчка), возможно, можно использовать not(:checked) или сбросить его до значения по умолчанию, используя обходной путь CSS?
Я просто пытаюсь выяснить, есть ли способ сохранить то, что у меня есть, используя только CSS, без использования Javascript.

Код: Выделить всё

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
}

/* Scroll wrapper with hidden overflow */

.scroll-wrapper {
position: relative;
width: 1200px;
/* Fixed width for the wrapper */
overflow: hidden;
/* Hide default scrollbar */
margin: 0 auto;
/* Center the wrapper horizontally */
}

/* Scrollable container with scroll behavior */

.scroll-container {
display: flex;
/* Arrange items horizontally */
/*width: 100%;*/
/* Same width as the wrapper */
width: 1400px;
overflow-x: auto;
/* Allow horizontal scroll */
scroll-snap-type: x mandatory;
/* Snapping effect */
scroll-behavior: smooth;
/* Smooth scroll */
transition: transform 0.5s ease;
/* Small animation movement */
}

/* Style for each scroll item */

.scroll-item {
display: inline-block;
width: 350px;
/* Fixed width for images */
height: 350px;
/* Fixed height for images */
margin-right: 10px;
/* Space between items */
scroll-snap-align: start;
/* Snap to the start of each item */
}

.scroll-item img {
width: 100%;
/* Make the image fill the scroll item */
height: 100%;
/* Ensure the image maintains the container's size */
object-fit: cover;
/* Ensure the image covers the area */
}

.scroll-item:nth-child(4) {
margin-right: 0;
}

/* Hide the scrollbar in Webkit browsers (Chrome, Safari) */

.scroll-container::-webkit-scrollbar {
display: none;
}

/* Style for the hidden checkboxes used for interaction */

input[type="checkbox"] {
display: none;
}

/* Arrows (using labels for styling) */

.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.3);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 24px;
z-index: 10;
opacity: 0;
transition: opacity 0.3s ease;
}

.arrow-left {
left: 10px;
}

.arrow-right {
right: 10px;
}

/* Show arrows when container is hovered */

.scroll-wrapper:hover .arrow {
opacity: 1;
}

/* Movement of the scroll container when arrows are clicked */

#scrollRight[type="checkbox"]:checked~.scroll-container {
/*transform: translateX(-350px);*/
/* Move container to the left when checkbox is checked */
transform: translateX(-200px);
}

/* Movement of the scroll container when arrows are clicked */

#scrollLeft[type="checkbox"]:checked~.scroll-container {
/*transform: translateX(-350px);*/
/* Move container to the left when checkbox is checked */
transform: translateX(0px);
}

/* Arrows via labels (styled as buttons) */

label.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.3);
color: white;
padding: 15px;
font-size: 24px;
cursor: pointer;
}

label.arrow-left {
left: 5px;
}

label.arrow-right {
right: 5px;
}

/* New styling to prevent whitespace after sliding */

.scroll-wrapper input:checked~.scroll-container {
transition:  transform 0.5s ease-in-out;
}

Код: Выделить всё

Horizontal Scroll with CSS Arrows and Smooth Transition










←
→




[img]https://picsum.photos/350[/img]

[img]https://picsum.photos/350[/img]

[img]https://picsum.photos/350[/img]

[img]https://picsum.photos/350[/img]

Подробнее здесь: https://stackoverflow.com/questions/791 ... ionality-s