Member Avatar for ryan12193

I am building a website with many images. I am looking for a code that will scroll my images. i am looking for it to show like 3 pics then have arrows on either side so when you clik them (arrows) it will scroll to the next 3 pics. i have only been doing Xhtml and CSS for about 2 years so i am pretty new at this.

  • 4 Contributors
  • 3 Replies
  • 198 Views
  • 9 Months Discussion Span
  • Latest Post Latest Post by savageocean

Dani AI

Generated

asked for a simple gallery that shows three images at once and pages by three when the arrows are clicked. pointed to searching, and shared a single-image rotator (that cycles one <img> element). That rotator is a different pattern than a 3-up carousel — below is a lightweight, responsive example that shows 3 images and advances one “page” (three items) per arrow click, plus quick debugging tips for if scripts aren’t running.

Copy this minimal pattern (replace the image paths and alt text):

<!-- HTML -->
<div class="carousel" aria-label="Image carousel">
  <button class="btn prev" aria-label="Previous">Prev</button>
  <div class="viewport">
    <ul id="track" class="track">
      <li class="item"><img src="images/1.jpg" alt="desc 1"></li>
      <li class="item"><img src="images/2.jpg" alt="desc 2"></li>
      <li class="item"><img src="images/3.jpg" alt="desc 3"></li>
      <li class="item"><img src="images/4.jpg" alt="desc 4"></li>
      <li class="item"><img src="images/5.jpg" alt="desc 5"></li>
      <li class="item"><img src="images/6.jpg" alt="desc 6"></li>
    </ul>
  </div>
  <button class="btn next" aria-label="Next">Next</button>
</div>

<!-- CSS (keep simple) -->
<style>
.viewport{overflow:hidden;width:100%}
.track{display:flex;transition:transform .35s ease}
.item{flex:0 0 calc(100% / 3);box-sizing:border-box;padding:6px}
.item img{display:block;width:100%;height:auto}
</style>

<!-- JS -->
<script>
const track = document.getElementById('track');
const items = track.querySelectorAll('.item');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const visible = 3;
let page = 0;
const pages = Math.ceil(items.length / visible);

function update(){
  const pctPerPage = (visible / items.length) * 100;
  track.style.transform = `translateX(-${page * pctPerPage}%)`;
  prev.disabled = page === 0;
  next.disabled = page === pages - 1;
}

prev.addEventListener('click', () => { page = Math.max(0, page - 1); update(); });
next.addEventListener('click', () => { page = Math.min(pages - 1, page + 1); update(); });
update();
</script>

Troubleshooting notes: if your JS “does nothing,” open the browser console for errors, verify image paths, and ensure the script runs after the DOM (put it before </body>, use defer, or wrap in DOMContentLoaded). If you copied ’s script, note it replaces one <img> by name — that requires a named image or different selectors; for a multi-item carousel use getElementById/querySelector as above. For accessibility, add meaningful alt text, keep buttons focusable (they are), and consider keyboard handlers or swipe support for touch devices.

Recommended Answers

All 3 Replies

Member Avatar for Thirusha

I dont have one, but try google, there are loads of examples out there. You can search for "sroll images script" or "image slideshow"

Member Avatar for sreein1986

Hi Use below Javascript where you want scrolling images in your html page

<SCRIPT LANGUAGE="JavaScript">
var interval = 2; // delay between rotating images (in seconds)
var random_display = 0; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list = new Array();
image_list[image_index++] = new imageItem("../Images/cdsamples/cd1.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd2.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd3.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd4.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd5.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd6.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd7.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd8.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd9.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd10.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd12.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd13.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd14.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd15.jpg"); // Your Image URL here
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
//  End -->
</SCRIPT>
Edited by sreein1986 because: n/a
Member Avatar for savageocean

Hey - I added the javascript to the page, but it's not working, is there some more code I'm missing, or something else I need to do? please advise

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.