Image Carousel

A portable, self-contained PHP/JavaScript image carousel for displaying client logos

Live Demo

Installation

The carousel is completely self-contained and portable. To install on any PHP-enabled web server:

Create a directory on your web server (e.g., /logos/)
Copy image-carousel.php into that directory
Add your SVG logo files to the same directory
Edit the configuration parameters at the top of image-carousel.php (optional)
Include the script on any page where you want the carousel

That's it! The script automatically finds all .svg files in its directory and creates the carousel. No build step, no dependencies, no database.

Directory Structure

/your-website/logos/
    image-carousel.php    # The carousel script
    client-a.svg          # Your logo files
    client-b.svg
    client-c.svg
    ...

Configuration

Edit the parameters at the top of image-carousel.php to customize behavior:

<?php
/*
 * Image Carousel - Configurable Parameters
 */

// Number of logos to display in the carousel
$logoCount = 6;

// Slider rotation interval in milliseconds
// (how long each "page" shows before auto-advancing)
$rotateInterval = 15000; // 15 seconds

// Logo shuffle interval in seconds
// (how often the random selection changes for all users)
$shuffleInterval = 300; // 5 minutes

// Optional: Link URL - if set, clicking any logo navigates to this URL
// Leave empty string '' to disable links
$linkUrl = '';

// Link target: true = open in new tab/window, false = open in same tab
$linkNewTab = true;

Configuration Reference

Parameter	Default	Description
`$logoCount`	6	Maximum number of logos to include in the carousel. Logos are randomly selected from available SVGs.
`$rotateInterval`	15000	Time in milliseconds before auto-advancing to the next page (only in slider mode).
`$shuffleInterval`	300	Time in seconds before selecting a new random set of logos. All visitors see the same logos during each interval.
`$linkUrl`	'' (empty)	URL to navigate to when any logo is clicked. Leave empty to disable click behavior.
`$linkNewTab`	true	If true, links open in a new tab/window. If false, links open in the same tab.

Embedding

Add the carousel to any HTML page using a script tag:

Option 1: Auto-insert (Simplest)

The carousel automatically inserts itself at the script location:

<script src="/logos/image-carousel.php"></script>

Option 2: Specify Container

Control exactly where the carousel appears:

<div id="logo-carousel"></div>
<script src="/logos/image-carousel.php"></script>

Cache Busting

To force browsers to reload the carousel after changes:

<!-- PHP -->
<script src="/logos/image-carousel.php?v=<?php echo time(); ?>"></script>

<!-- Static HTML (update manually) -->
<script src="/logos/image-carousel.php?v=2"></script>

CSS Customization

Fine-tune the carousel appearance with CSS custom properties:

#logo-carousel {
  --logo-carousel-height: 80px;    /* Logo container height (default: 80px) */
  --logo-carousel-padding: 20px;   /* Vertical padding (default: 20px) */
  --logo-carousel-gap: 40px;       /* Space between logos (default: 40px) */
}

Example: Larger Logos

#logo-carousel {
  --logo-carousel-height: 120px;
  --logo-carousel-padding: 40px;
}

Example: Compact Display

#logo-carousel {
  --logo-carousel-height: 50px;
  --logo-carousel-padding: 10px;
  --logo-carousel-gap: 20px;
}

Features

Fully Portable: Single PHP file + SVG images. No dependencies or build process.
Responsive: Automatically adjusts number of visible logos based on screen width.
Auto-rotate: Cycles through logos at configurable intervals (slider mode only).
Pause on Hover: Rotation pauses when user hovers over the carousel.
Navigation: Arrow buttons and dot indicators for manual navigation.
Touch/Scroll: Horizontal swipe and scroll support on touch devices.
Grayscale: All logos displayed in grayscale for uniform professional appearance.
Clickable Links: Optional click-through URL for all logos.
Synchronized Selection: All visitors see the same random selection during each time window.
Base64 Embedded: SVGs are embedded in the JavaScript, eliminating extra HTTP requests.

How It Works

The PHP script scans its directory for .svg files
A deterministic random selection is made based on the current time window
Selected SVGs are base64-encoded and embedded in the JavaScript output
The JavaScript creates a responsive carousel with the embedded images
On narrow screens, the carousel enters "slider mode" with navigation controls

Server Requirements: PHP 5.4 or higher. No database or additional extensions required.

Logo Guidelines

For best results, your SVG logos should:

Use a transparent background
Be converted to grayscale (or they will be filtered to grayscale by CSS)
Have no fixed width/height attributes (use viewBox instead for responsive scaling)
Be reasonably optimized (remove unnecessary metadata)

Tip: Name your SVG files descriptively (e.g., acme-corp.svg) as the filenames may be used for organization and debugging.

Troubleshooting

Carousel doesn't appear

Check browser console for JavaScript errors
Verify the script URL is correct and accessible
Ensure PHP is enabled on your server
Check that SVG files exist in the same directory as the PHP script

Logos look distorted

Ensure SVGs use viewBox instead of fixed width/height
Check that the SVG content isn't clipped by its viewBox

Changes not reflecting

Clear browser cache or add a cache-busting query parameter
The PHP script has a 5-minute cache header by default