Creating an image carousel with jQuery can be a great way to add dynamic, interactive content to your website without relying on external CSS files. Having a logo carousel on a B2B website with the customers you’re serving is also a fantastic trust indicator.
This article provides an example that handles the carousel’s layout, styling, and behavior entirely through jQuery. You’ll see how to define options such as alignment, padding, margins, the pause between slides (in milliseconds), and the animation speed. All CSS is applied using jQuery’s methods, so no external or static CSS is necessary.
jQuery Carousel
When the page loads, jQuery initializes the carousel by styling the container, wrapping each image, and calculating the required width for the inner container. The images are wrapped so that each has defined dimensions and margins. This creates visible spacing and allows the carousel to display parts of adjacent images within a 600-pixel-wide container.
In discrete (restart) mode, the carousel moves from one image to the next in set intervals, and the updateFilters() function is called after each animation step to ensure that only the image nearest the center is in full color. In continuous mode, the inner container’s content is duplicated, and the left offset is updated continuously, with updateFilters() running on every tick.
The pause-on-hover feature is implemented by listening for mouseenter and mouseleave events. When the user hovers over the carousel, the automatic sliding stops, and updateFilters() is executed to maintain the visual effect of a single, highlighted center image. Once the mouse leaves, the animation resumes according to the selected loop mode.
For demonstration purposes, we’ll use placeholder images. The HTML is minimal because jQuery will handle most styling and layout. Here’s how it looks:
HTML Structure
We start with a simple HTML structure. In our example, we have a container div with an ID of carousel that holds several image elements.
<div id="carousel">
<img src="https://yourdomain.com/yourimage.png" alt="Image 1">
<img src="https://yourdomain.com/yourimage.png" alt="Image 2">
<img src="https://yourdomain.com/yourimage.png" alt="Image 3">
<img src="https://yourdomain.com/yourimage.png" alt="Image 4">
<img src="https://yourdomain.com/yourimage.png" alt="Image 5">
<img src="https://yourdomain.com/yourimage.png" alt="Image 6">
</div>Full HTML Page With jQuery Carousel
Here’s the full page with working code. Here are the options:
- carouselWidth: The visible width of the carousel container in pixels.
- carouselHeight: The visible height of the carousel container in pixels.
- imageWidth: The width of each individual image in pixels.
- speed: The transition speed in milliseconds for discrete (restart) mode animations.
- pause: The duration in milliseconds between slides when in restart mode.
- margin: The margin in pixels around each image, creating visible spacing.
- padding: The padding in pixels inside each image container.
- alignment: The alignment of the images within the carousel container (e.g.,
centerorleft). - loopType: Defines how the carousel loops, either
restartfor discrete slides orcontinuousfor smooth scrolling. - onHover: Determines whether the carousel pauses when hovered (
"pause") or continues running.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Carousel: Center Highlight with Pause on Hover</title>
<!-- Include jQuery from a CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<!-- Carousel container with six images -->
<div id="carousel">
<img src="http://martech.zone/wp-content/uploads/2024/08/martech-zone-email-logo.png" alt="Image 1">
<img src="http://martech.zone/wp-content/uploads/2024/08/martech-zone-email-logo.png" alt="Image 2">
<img src="http://martech.zone/wp-content/uploads/2024/08/martech-zone-email-logo.png" alt="Image 3">
<img src="http://martech.zone/wp-content/uploads/2024/08/martech-zone-email-logo.png" alt="Image 4">
<img src="http://martech.zone/wp-content/uploads/2024/08/martech-zone-email-logo.png" alt="Image 5">
<img src="http://martech.zone/wp-content/uploads/2024/08/martech-zone-email-logo.png" alt="Image 6">
</div>
<script>
$(document).ready(function() {
// Carousel configuration options
var options = {
carouselWidth: 600, // Visible width of the carousel container (in px)
carouselHeight: 150, // Visible height of the carousel container (in px)
imageWidth: 150, // Width of each image (in px)
speed: 500, // Transition speed in ms for discrete (restart) mode
pause: 3000, // Pause duration in ms between slides (restart mode)
margin: 10, // Margin (px) around each image, creating visible spacing
padding: 5, // Padding (px) inside each image container
alignment: 'center', // Alignment of the carousel’s content
loopType: 'continuous', // 'restart' for discrete slide transitions or 'continuous' for a smooth scroll
onHover: 'pause' // Option to pause the carousel when the user hovers over it
};
// Set up the carousel container.
$("#carousel").css({
"width": options.carouselWidth + "px",
"height": options.carouselHeight + "px",
"overflow": "hidden",
"position": "relative",
"text-align": options.alignment,
"margin": "0 auto"
});
// Wrap each image in a dedicated container to manage spacing and styling.
$("#carousel > img").wrap("<div class='carouselItem'></div>");
// Wrap all carousel items in an inner container which will be animated.
$("#carousel").wrapInner("<div id='carouselInner'></div>");
// Apply styling to each carousel item container.
$(".carouselItem").css({
"width": options.imageWidth + "px",
"height": options.carouselHeight + "px",
"margin": options.margin + "px",
"padding": options.padding + "px",
"display": "inline-block",
"box-sizing": "border-box",
"vertical-align": "top",
"position": "relative"
});
// Style the images so they fill their container without being stretched.
// Start with all images in grayscale.
$(".carouselItem img").css({
"width": "100%",
"height": "100%",
"object-fit": "contain",
"object-position": "center",
"filter": "grayscale(100%)"
});
// Calculate the total width of the inner container.
var itemCount = $(".carouselItem").length;
var totalWidth = itemCount * (options.imageWidth + (options.margin * 2));
options.totalWidth = totalWidth; // Save total width for later reference
// Apply styling to the inner container holding all items.
$("#carouselInner").css({
"width": totalWidth + "px",
"position": "absolute",
"left": "0",
"top": "0",
"white-space": "nowrap"
});
// Variables to hold the carousel’s timer and state.
var carouselTimer;
var currentIndex = 0; // For discrete (restart) mode
var currentLeft = 0; // For continuous mode
// This function computes which carousel item is nearest the center of the container.
// It then applies full color (removes grayscale) only to that item.
function updateFilters() {
var containerOffset = $("#carousel").offset().left;
var containerCenter = options.carouselWidth / 2;
var closestDistance = Infinity;
var centerItem = null;
$(".carouselItem").each(function() {
var $this = $(this);
var itemOffset = $this.offset().left - containerOffset;
var itemCenter = itemOffset + $this.outerWidth(true) / 2;
var distance = Math.abs(itemCenter - containerCenter);
if(distance < closestDistance) {
closestDistance = distance;
centerItem = $this;
}
});
// Set all images to grayscale.
$(".carouselItem img").css("filter", "grayscale(100%)");
// Remove grayscale for the image in the center.
if(centerItem) {
centerItem.find("img").css("filter", "grayscale(0%)");
}
}
// For discrete (restart) mode.
function startRestartMode() {
carouselTimer = setInterval(function() {
currentIndex = (currentIndex + 1) % itemCount;
var newLeft = -currentIndex * (options.imageWidth + (options.margin * 2));
$("#carouselInner").animate({
"left": newLeft + "px"
}, options.speed, updateFilters); // update filters after each animation
}, options.pause);
}
// For continuous mode.
function startContinuousMode() {
var $carouselInner = $("#carouselInner");
var originalContent = $carouselInner.html();
$carouselInner.append(originalContent);
var continuousTotalWidth = totalWidth * 2;
$carouselInner.css("width", continuousTotalWidth + "px");
carouselTimer = setInterval(function() {
currentLeft -= 1; // Adjust scrolling speed as needed.
if(Math.abs(currentLeft) >= totalWidth) {
currentLeft = 0;
}
$carouselInner.css("left", currentLeft + "px");
updateFilters(); // update filters on every tick
}, 20);
}
// Function to resume the carousel animation.
function resumeCarousel() {
if(options.loopType === "continuous") {
startContinuousMode();
} else {
startRestartMode();
}
}
// Start the carousel in the chosen loop mode.
if(options.loopType === "continuous") {
startContinuousMode();
} else {
startRestartMode();
}
// If onHover is set to 'pause', then pause the carousel on mouse enter.
if(options.onHover === "pause") {
$("#carousel").on("mouseenter", function() {
clearInterval(carouselTimer);
updateFilters(); // Update filter so that only the center image remains in color.
}).on("mouseleave", function() {
resumeCarousel();
});
}
});
</script>
</body>
</html>This comprehensive example demonstrates how to create a highly customizable, jQuery-driven image carousel with advanced features—all without relying on external CSS files. It provides a robust foundation that can be further extended or modified to suit the needs of various projects.
Related Martech Zone Content
