Member Avatar for leroi green

hey all,

i've only been using ajax for about 2 weeks but i was wondering, if at all, can you make an effect similar to the one here:

www.okayplayer.com (this also happens on sites like nba.com, etc)

on the top of the page with the pictures scrolling with news and links inside of them without using flash. like with ajax or something?

and if it can be done... how would i go about it?

  • 2 Contributors
  • 2 Replies
  • 91 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by leroi green

Dani AI

Generated

A Flash-style top carousel is easily reproduced today with HTML/CSS/JS (AJAX only needed to fetch dynamic content). asked about the effect and pointed in the right direction toward a carousel example. Two pragmatic choices: drop in a tested slider (fast to get running) or build a small custom component for tighter control and lighter output.

A simple, robust approach:

  • Markup: a semantic list of slides where each slide is an anchor with an image and caption; add ARIA roles and sensible alt text.
  • Styling: use overflow:hidden on the viewport and animate slides with transform: translateX(...) plus transition or CSS keyframes for smooth motion (hardware accelerated).
  • Behavior: fetch JSON or HTML fragments via fetch to populate slides, lazy-load images (native loading="lazy" or IntersectionObserver), and either advance discretely (slide-to-slide) or implement a continuous loop by duplicating slides and translating indefinitely.
  • Accessibility/fallback: provide visible controls, keyboard focus handling, and a server-side or no-JS fallback list.

Minimal examples (illustrative):

<div class="carousel" role="region" aria-label="Featured">
  <ul class="slides"></ul>
</div>
.slides { display:flex; transition:transform .5s ease; }
.slide { min-width:100%; }
fetch('/api/topstories.json')
  .then(r => r.json())
  .then(items => { /* create li > a > img + caption into .slides */ });

Troubleshooting and tips: prefer transform (not left/top) to avoid layout thrash; use requestAnimationFrame for JS-driven motion; clone nodes for seamless loops; debounce resize handlers; ensure images share aspect ratios or use object-fit:cover. For ready-made, actively maintained options include Swiper or Slick. For reference on animation and modern APIs see MDN docs for CSS transforms and requestAnimationFrame (transform, requestAnimationFrame).

Recommended Answers

All 2 Replies

Member Avatar for Luckychap

may this help you:

Member Avatar for leroi green

OH MAN! this looks helpful as hell. (if i can say that here...)


BUT THANX!!!

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.