Skip to content

feat: Add auto-cycle slideshow with play/pause controls #250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Add auto-cycle slideshow with play/pause controls #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions expanding-cards/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,29 @@
<title>Expanding Cards</title>
</head>
<body>
<div class="controls">
<button id="play-btn">▶️ Play</button>
<button id="pause-btn">⏸️ Pause</button>
</div>

<div class="container">
<div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')" tabindex="0">
<h3>Explore The World</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')" tabindex="0">
<h3>Wild Forest</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')" tabindex="0">
<h3>Sunny Beach</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')" tabindex="0">
<h3>City on Winter</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')" tabindex="0">
<h3>Mountains - Clouds</h3>
</div>

</div>

<script src="script.js"></script>
</body>
</html>
</html>
106 changes: 96 additions & 10 deletions expanding-cards/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,100 @@
const panels = document.querySelectorAll('.panel')
const panels = document.querySelectorAll('.panel');
const playBtn = document.getElementById('play-btn');
const pauseBtn = document.getElementById('pause-btn');

panels.forEach(panel => {
panel.addEventListener('click', () => {
removeActiveClasses()
panel.classList.add('active')
})
})
let currentActive = 0; // Track the index of the currently active panel
let intervalId = null; // To store the interval timer

// --- Core Functions ---

// Function to set a specific panel as active
function setActivePanel(index) {
removeActiveClasses();
if (panels[index]) { // Check if the panel exists
panels[index].classList.add('active');
currentActive = index;
}
}

// Function to remove active classes from all panels
function removeActiveClasses() {
panels.forEach(panel => {
panel.classList.remove('active')
})
}
panel.classList.remove('active');
});
}

// Function to start the auto-cycle
function startAutoCycle() {
if (intervalId === null) { // Only start if not already running
console.log("Starting auto-cycle"); // Debug log
intervalId = setInterval(() => {
let nextActive = (currentActive + 1) % panels.length; // Calculate next index, wraps around
setActivePanel(nextActive);
}, 3000); // Change panel every 3 seconds (3000ms)
}
}

// Function to stop the auto-cycle
function stopAutoCycle() {
console.log("Stopping auto-cycle"); // Debug log
clearInterval(intervalId);
intervalId = null; // Reset intervalId
}

// --- Event Listeners ---

// Original click event listener (stops auto-cycle on manual click)
panels.forEach((panel, index) => {
panel.addEventListener('click', () => {
stopAutoCycle(); // Stop auto-play when user clicks
setActivePanel(index);
});

// Keyboard accessibility (Enter/Space) - stops auto-cycle
panel.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
stopAutoCycle();
setActivePanel(index);
}
// Add arrow key logic here if you implemented it previously
if (event.key === 'ArrowLeft') {
event.preventDefault();
stopAutoCycle(); // Stop auto-cycle on arrow key nav
const prevPanelIndex = (index - 1 + panels.length) % panels.length;
panels[prevPanelIndex].focus();
// Optionally activate the focused panel immediately
// setActivePanel(prevPanelIndex);
}
if (event.key === 'ArrowRight') {
event.preventDefault();
stopAutoCycle(); // Stop auto-cycle on arrow key nav
const nextPanelIndex = (index + 1) % panels.length;
panels[nextPanelIndex].focus();
// Optionally activate the focused panel immediately
// setActivePanel(nextPanelIndex);
}
});
});

// Event listener for Play button
playBtn.addEventListener('click', () => {
// Ensure the current one is visually active before starting
if (!panels[currentActive].classList.contains('active')) {
setActivePanel(currentActive);
}
startAutoCycle();
});

// Event listener for Pause button
pauseBtn.addEventListener('click', () => {
stopAutoCycle();
});

// --- Initial Setup ---
// Find the initially active panel from the HTML to set the starting index
panels.forEach((panel, index) => {
if (panel.classList.contains('active')) {
currentActive = index;
}
});
40 changes: 37 additions & 3 deletions expanding-cards/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@

body {
font-family: 'Muli', sans-serif;
/* Adjust display to allow space for controls */
display: flex;
flex-direction: column; /* Stack controls above container */
align-items: center;
justify-content: center;
height: 100vh;
Expand All @@ -30,7 +32,7 @@ body {
flex: 0.5;
margin: 10px;
position: relative;
-webkit-transition: all 700ms ease-in;
transition: all 700ms ease-in, outline 0.1s linear; /* Keep existing transition */
}

.panel h3 {
Expand All @@ -40,6 +42,9 @@ body {
left: 20px;
margin: 0;
opacity: 0;
/* Add slide animation styles */
transform: translateY(30px);
transition: opacity 0.3s ease-in 0.4s, transform 0.4s ease-in 0.4s;
}

.panel.active {
Expand All @@ -48,9 +53,38 @@ body {

.panel.active h3 {
opacity: 1;
transition: opacity 0.3s ease-in 0.4s;
transform: translateY(0); /* Final position for slide animation */
/* Remove transition from here as it's handled by base .panel h3 */
}

.panel:focus {
outline: 3px solid #fff;
outline-offset: -3px;
}

/* --- ADDED Styles for Auto-Cycle Controls --- */
.controls {
text-align: center;
margin-bottom: 20px; /* Add space between buttons and cards */
}

.controls button {
background-color: #eee;
border: none;
padding: 10px 20px;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
}

.controls button:hover {
background-color: #ddd;
}
/* --- End of Added Styles --- */


@media (max-width: 480px) {
.container {
width: 100vw;
Expand All @@ -60,4 +94,4 @@ body {
.panel:nth-of-type(5) {
display: none;
}
}
}