Member Avatar for topsege2007

I have 3 images and i want them to show up one after the other within a column. i guess this is called swapping. Pease help out

  • 3 Contributors
  • 6 Replies
  • 126 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by topsege2007

Dani AI

Generated

A quick practical guide that builds on what and hinted at: there are two simple, reliable ways to show three images one after another in a fixed column area — a CSS-only timed rotation for very small needs, or a tiny JavaScript controller for better control (pause, keyboard, accessibility). Below are minimal, modern patterns you can drop into your page and tweak.

HTML (shared)

<div id="rotator" class="rotator" aria-live="polite">
  <img src="img1.jpg" alt="Description 1">
  <img src="img2.jpg" alt="Description 2">
  <img src="img3.jpg" alt="Description 3">
</div>

CSS-only (good for a simple loop)

.rotator { position: relative; width: 320px; height: 240px; overflow: hidden; }
.rotator img { position: absolute; inset: 0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease; }
.rotator img:nth-child(1){ animation: swap 9s infinite; }
.rotator img:nth-child(2){ animation: swap 9s infinite 3s; }
.rotator img:nth-child(3){ animation: swap 9s infinite 6s; }

@keyframes swap {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  33%  { opacity: 0; }
  100% { opacity: 0; }
}

JavaScript (more control — pause/resume, keyboard, variable timing)

const rot = document.getElementById('rotator');
const imgs = [...rot.querySelectorAll('img')];
let i = 0, intervalId = null;

function show(idx){ imgs.forEach((img,j)=> img.classList.toggle('visible', j===idx)); }
function start(){ intervalId = setInterval(()=> show(i=(i+1)%imgs.length), 3000); }
function stop(){ clearInterval(intervalId); intervalId = null; }

show(i); start();
rot.addEventListener('mouseenter', stop);
rot.addEventListener('mouseleave', start);

A few practical notes: always give the container explicit width/height to avoid layout shift; include good alt text; preload or ensure images are cached for smooth fades; provide controls or pause-on-focus for keyboard users and follow ARIA guidance for carousels (see the WAI-ARIA example). For API details and patterns, see MDN on CSS animations and on timers: Using CSS animations and setInterval.

Recommended Answers

All 6 Replies

Member Avatar for topsege2007

I have 3 images and i want them to show up one atfer the other within a column. I guess this is called swapping. Plese help out.

Member Avatar for Dannyo329

I hear you can do that in javascript but other wise i have no idea

Member Avatar for peter_budo

You should use JavaScript for this

Member Avatar for Dannyo329

And one more thing. Please don't double post.

commented: Spot on +10
Member Avatar for peter_budo

Spot on, I just merged these two

Member Avatar for topsege2007

thanks how do i mark this thread as solved

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.