Carousel Portfolio Hero Template

Showcase a variety of your best work with this clean and functional portfolio carousel.

This hero section allows you to feature multiple projects in one compact space, with intuitive controls for visitors to browse through your work at their own pace.

Screenshot of a hero section featuring a carousel to showcase multiple portfolio projects.

Get Source Code Preview

About the Carousel Portfolio Hero

This template is an effective way to make your portfolio engaging from the first moment. Instead of featuring a single static project, a carousel immediately signals to visitors that you have a depth of work to explore. It's perfect for designers, developers, photographers, and agencies who want to display multiple highlights.

Features

Smooth Transitions: Uses CSS transforms for a smooth sliding animation between projects.
Multiple Navigation Options: Includes "Previous" and "Next" arrow buttons as well as indicator dots for direct slide access.
Keyboard Accessible: Users can navigate the carousel using the Tab and Enter/Space keys on the controls.
Dependency-Free JavaScript: The functionality is powered by a clean, self-contained JavaScript snippet with no external libraries needed.

Code Breakdown

The component is split into three parts: CSS for the head, HTML for the body, and a JavaScript block to be placed before the closing body tag.

The core of the slider mechanism is a .carousel-track container that uses Flexbox. This track holds all the .carousel-slide elements in a single row. The track's parent, .carousel-track-container, has overflow: hidden, which acts as the viewing window. To change slides, the JavaScript applies a transform: translateX() to the entire track, moving it left or right to bring the desired slide into view (translateX() moves elements in a two-dimensional space along the x-axis (horizontally)).

The JavaScript manages the state. It keeps track of the current slide and adds event listeners to the navigation buttons and dots. When a control is clicked, a function is called to calculate the position of the target slide and update the transform style on the track. The script also handles updating the "active" state of the corresponding indicator dot and uses ARIA attributes to improve accessibility for screen reader users.

Code

<style>
    :root {
        --cph-padding: 3rem 1.5rem;
        --cph-bg-color: #f3f4f6;
        --cph-slide-text-color: #ffffff;
        --cph-nav-color: #1f2937;
        --cph-nav-hover-color: #000000;
        --cph-dots-color: #d1d5db;
        --cph-dots-active-color: #1f2937;
    }
    .carousel-hero {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
        background-color: var(--cph-bg-color);
        padding: var(--cph-padding);
        width: 100%;
    }
    .carousel-hero * {
         box-sizing: border-box;
    }
    .carousel-hero-container {
        max-width: 1100px;
        margin: 0 auto;
        position: relative;
    }
    .carousel-hero .carousel-track-container {
        overflow: hidden;
        border-radius: 8px;
    }
    .carousel-hero .carousel-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }
    .carousel-hero .carousel-slide {
        flex: 0 0 100%;
        min-height: 450px;
        width: 100%;
        position: relative;
        display: flex;
        align-items: flex-end;
        padding: 2.5rem;
        background-size: cover;
        background-position: center;
        color: var(--cph-slide-text-color);
    }
    .carousel-hero .carousel-slide::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.0) 100%);
    }
    .carousel-hero .slide-content {
        position: relative;
        z-index: 2;
        max-width: 600px;
    }
    .carousel-hero .slide-content h2 {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-weight: 700;
        line-height: 1.2;
    }
    .carousel-hero .slide-content p {
        margin: 0;
        line-height: 1.5;
        font-size: 1rem;
    }
    /* Buttons */
    .carousel-hero .carousel-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(255,255,255,0.8);
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease;
        z-index: 10;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    .carousel-hero .carousel-button:hover {
        background-color: #fff;
    }
    .carousel-hero .carousel-button.prev {
        left: 1rem;
    }
    .carousel-hero .carousel-button.next {
        right: 1rem;
    }
    .carousel-hero .carousel-button svg {
        width: 24px;
        height: 24px;
        stroke: var(--cph-nav-color);
    }
    /* Dots */
    .carousel-hero .carousel-nav {
        display: flex;
        justify-content: center;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }
    .carousel-hero .carousel-dot {
        border: none;
        background-color: var(--cph-dots-color);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        padding: 0;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .carousel-hero .carousel-dot.active {
        background-color: var(--cph-dots-active-color);
    }
</style>

<section class="carousel-hero">
    <div class="carousel-hero-container" role="region" aria-roledescription="carousel" aria-label="Featured Projects">

<div class="carousel-track-container">
            <div class="carousel-track">
                
                <div class="carousel-slide" 
                     role="group" 
                     aria-roledescription="slide"
                     aria-label="1 of 3"
                     style="background-image:url('https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?q=80&w=1200')">
                    <div class="slide-content">
                        <h2>Project Zenith: Enterprise SaaS</h2>
                        <p>A comprehensive cloud-based solution for managing corporate logistics.</p>
                    </div>
                </div>
                
                <div class="carousel-slide"
                     role="group" 
                     aria-roledescription="slide"
                     aria-label="2 of 3"
                     style="background-image:url('https://images.unsplash.com/photo-1542744095-291d1f67b221?q=80&w=1200')">
                    <div class="slide-content">
                        <h2>Aura Health: Mobile Wellness App</h2>
                        <p>An intuitive mobile app designed for tracking fitness and mental wellbeing.</p>
                    </div>
                </div>
                
                <div class="carousel-slide"
                     role="group" 
                     aria-roledescription="slide"
                     aria-label="3 of 3"
                     style="background-image:url('https://images.unsplash.com/photo-1516321497487-e288fb19713f?q=80&w=1200')">
                    <div class="slide-content">
                        <h2>Nomad Creative: Brand Website</h2>
                        <p>A portfolio website for a digital creative agency focused on user engagement.</p>
                    </div>
                </div>
            </div>
        </div>

</div>
</section>

<script>
(function(){
    const carouselContainer = document.querySelector('.carousel-hero-container');
    if (!carouselContainer) return;

const dots = Array.from(nav.children);
    const slideWidth = slides[0].getBoundingClientRect().width;

const setSlidePosition = (slide, index) => {
        slide.style.left = slideWidth * index + 'px';
    };
    // Initially arrange slides side-by-side, but this is handled by Flexbox
    // slides.forEach(setSlidePosition);

// Initial setup
    slides[0].classList.add('is-selected');

const moveToSlide = (current, target) => {
        const targetSlide = slides[target];
        const currentSlide = slides[current];
        
        track.style.transform = `translateX(-${targetSlide.style.left || (target * slideWidth)}px)`;
        currentSlide.classList.remove('is-selected');
        targetSlide.classList.add('is-selected');

const currentDot = nav.querySelector('.active');
        currentDot.classList.remove('active');
        dots[target].classList.add('active');

// Show/hide prev/next buttons at ends
        if (target === 0) {
            prevButton.style.display = 'none';
            nextButton.style.display = 'block';
        } else if (target === slides.length - 1) {
            prevButton.style.display = 'block';
            nextButton.style.display = 'none';
        } else {
            prevButton.style.display = 'block';
            nextButton.style.display = 'block';
        }
    };
    
    // Initial button state
    prevButton.style.display = 'none';
    
    prevButton.addEventListener('click', e => {
        const currentSlide = track.querySelector('.is-selected');
        const currentIndex = slides.findIndex(slide => slide === currentSlide);
        const prevIndex = currentIndex - 1;
        moveToSlide(currentIndex, prevIndex);
    });
    
    nextButton.addEventListener('click', e => {
        const currentSlide = track.querySelector('.is-selected');
        const currentIndex = slides.findIndex(slide => slide === currentSlide);
        const nextIndex = currentIndex + 1;
        moveToSlide(currentIndex, nextIndex);
    });

// Recalculate width on resize to be robust
    window.addEventListener('resize', () => {
        const currentSlide = track.querySelector('.is-selected');
        const currentIndex = slides.findIndex(slide => slide === currentSlide);
        const newSlideWidth = slides[0].getBoundingClientRect().width;
        track.style.transition = 'none'; // Disable transition for instant adjustment
        track.style.transform = `translateX(-${currentIndex * newSlideWidth}px)`;
        setTimeout(() => {
            track.style.transition = 'transform 0.5s ease-in-out';
        }, 10);
    });

})();
</script>

View Output