Intermediate 3 sections ~20 min C++17/20

Carousel

A scrollable container that renders items into an off-screen texture with smooth animation, optional navigation arrows, and 17 built-in GLSL shader styles.

Introduction

Basic Carousel Setup

ml::Carousel renders its items into an internal sf::RenderTexture and presents a scrollable viewport. Items are ml::Core* pointers — the caller owns their lifetime.

    Creating a carousel
    cpp
  

ml::Rectangle item1, item2, item3, item4, item5;
item1.setSize({150.f, 200.f}); item1.setFillColor(sf::Color(83, 74, 183));
item2.setSize({150.f, 200.f}); item2.setFillColor(sf::Color(50, 140, 80));
// ... more items

ml::Carousel carousel;
carousel.setPosition({80.f, 260.f});
carousel.setPreviewCount(4);  // 4 items visible at once
carousel.setSpacing(16.f);    // 16px gap between items
carousel.setSpeed(3.f);       // scroll speed

carousel.add(item1);
carousel.add(item2);
carousel.add(item3);
carousel.add(item4);
carousel.add(item5);

addComponent(carousel);

1Core Concepts

Navigation and Arrows

    Navigation — programmatic and arrow-based
    cpp
  

// Programmatic scroll
carousel.next();      // scroll right
carousel.previous();  // scroll left

// Built-in navigation arrows
carousel.showArrows(true);
carousel.setArrowPlacement(ml::CarouselManifest::ArrowPlacement::SIDES);   // default
// carousel.setArrowPlacement(ml::CarouselManifest::ArrowPlacement::TOP);
// carousel.setArrowPlacement(ml::CarouselManifest::ArrowPlacement::OVERLAY);

// Customize arrows
carousel.setArrowSize(48.f);
carousel.setArrowColor(sf::Color(80, 80, 80, 200));
carousel.setArrowHoverColor(sf::Color(140, 140, 140, 240));

// Custom arrow texture
sf::Texture leftTex; leftTex.loadFromFile("assets/arrow_left.png");
carousel.setArrowTexture(ml::CarouselManifest::ArrowSide::LEFT, leftTex);

// Manual arrow position
carousel.setArrowPosition(ml::CarouselManifest::ArrowSide::LEFT, {40.f, 380.f});
carousel.clearArrowPosition(ml::CarouselManifest::ArrowSide::LEFT); // revert

2Core Concepts

Built-in Shader Effects

    Applying shader styles
    cpp
  

using Style = ml::CarouselManifest::Style;

// One call to change the entire look
carousel.setStyle(Style::COVERFLOW_3D);
carousel.setStyle(Style::FADE_EDGES);
carousel.setStyle(Style::BLUR_UNFOCUSED);
carousel.setStyle(Style::SCALE_CENTER);
carousel.setStyle(Style::GLOW_CENTER);
carousel.setStyle(Style::DEPTH_OF_FIELD);
carousel.setStyle(Style::WAVE_DISTORTION);
carousel.setStyle(Style::VIGNETTE);
carousel.setStyle(Style::GRAYSCALE_EDGES);
carousel.setStyle(Style::REFLECTION);
carousel.setStyle(Style::SEPIA_TONE);
carousel.setStyle(Style::ZOOM_PULSE);
carousel.setStyle(Style::DEFAULT);  // no shader

// Tune parameters after setting style
auto& p = carousel.getShaderParams();
p.blurAmount  = 5.f;    // BLUR_UNFOCUSED — more blur on edge items
p.focusWidth  = 0.18f;  // narrower focus zone
p.perspective = 0.7f;   // COVERFLOW_3D — flatter 3D effect
p.minScale    = 0.55f;  // smaller edge items in SCALE_CENTER

    Custom GLSL shader
    cpp
  

sf::Shader myShader;
myShader.loadFromFile("assets/heat.frag", sf::Shader::Type::Fragment);

static sf::Clock clock;
carousel.setShader(&myShader, [](sf::Shader& s) {
    s.setUniform("uTime", clock.getElapsedTime().asSeconds());
    s.setUniform("uIntensity", 0.015f);
});