Roy 
Drop the Image Carousel widget onto the page, pick your images from the media library, set slides-per-view for each device, and turn on autoplay. Four steps, about two minutes, no licence needed.
That’s the short version. The rest of this covers the settings that separate a carousel that works from one that looks slightly wrong on phones, plus the coverflow layout, the lightbox, and the two image mistakes that make an otherwise fine carousel slow. Not sure an image carousel is even the right shape? The full carousel widget lineup compares every type in one place.
Elementor free and Master Addons free. Elementor’s own Image Carousel exists but has no slide captions and limited responsive control, so this walkthrough uses the Master Addons Image Carousel, which is also free and adds captions, a lightbox and a coverflow layout.
Open the page in Elementor and search the widget panel for “image carousel.” Drag it into a container.
It renders with placeholder images so you can see the shape before you commit any content. Leave them for now. It’s easier to set up the layout against consistent placeholders than against your real photos, which are all different sizes.
Click the gallery field and pick from the media library, or upload. Order matters and drag-to-reorder works, so put your strongest image first, because on mobile it may be the only one anyone sees.
Under the content settings you’ll find image size, caption source and link behaviour.
Image size is the setting people leave on Full and regret. Full means the original upload: a 4000px camera export served into a 400px slide. WordPress already generated smaller versions; pick medium_large or large and you’ll cut the carousel’s weight by most of it without any visible difference.
Captions pull from the media library’s Caption or Description field, so if the slides need text, write it there rather than looking for a per-slide text box in the widget.
Arrows, dots, fraction, or a scrollbar. Pick based on how many slides you have:
On mobile, check the arrow size. The desktop default is often a 30px target, and the accessible minimum for a tap is 44px. Bump it on the mobile breakpoint or drop arrows entirely and rely on swipe.
This is the panel that decides whether the carousel feels right.
Slides per view: set it three times. Click the device icons at the top of the setting and give desktop, tablet and mobile their own value. Four, two, one is the safe default. This single step is the difference between a carousel that works on phones and one that shows four squashed thumbnails.
Slides to scroll. Set it to 1 for a continuous browsing feel, or match slides-per-view for page-style paging. Matching is better when the slides form groups; 1 is better for a long undifferentiated set.
Autoplay. Turn it on for decorative galleries. Turn it off if the slides are clickable, because someone will reach for an image and click the one that replaced it. Pause-on-hover covers desktop but there’s no hover on touch.
Infinite loop needs enough slides. Swiper clones slides to fake the wrap, and it needs at least double your slides-per-view. Four images at three-per-view will visibly jump. Add images or turn the loop off.
Speed. 300 to 500ms. Below 200 it looks like a cut rather than a transition; above 800 people start clicking twice.
Switch Layout from Standard to Coverflow and the side slides rotate away in 3D, dim and recede, leaving the centre slide as the only readable one.
It suits portfolios and case studies, anything where one image at a time is the point. It’s wrong for anything people need to compare, because the whole design exists to stop you looking at the neighbours.
Two settings to get right: rotate between 30 and 40 degrees (past 50 and the side slides become unreadable slivers), and centered slides on, or the active image sits flush left and the composition collapses.
Style tab handles spacing between slides, border radius, shadows and hover states.
The setting worth a second thought is gap. Zero gap makes the carousel read as one continuous image strip, which is right for a panorama and wrong for distinct items. 16 to 24px is the range where slides read as separate cards without the row looking sparse.
Hover effects (scale, overlay, caption reveal) apply to the whole set, not per slide. Keep the scale under 1.05. A slide that grows 15% on hover pushes into its neighbours and looks like a layout bug.
Turn on the lightbox and clicking a slide opens the full-size image over the page, with its own next and previous controls stepping through the whole carousel.
This is the reason to use a carousel rather than a grid for photography. The carousel is the index; the lightbox is the viewer. Titles and subtitles carry through into the lightbox, so caption once and it works in both places.
One caution: the lightbox serves the full-size image, not the thumbnail. If you set image size to medium_large for the carousel and your originals are 8MB camera files, the lightbox will still fetch the 8MB version. Compress the originals on upload, not just the display size.
The Image Carousel is a single row. There’s no thumbnail strip driving a large preview. If that two-part layout is what you’re after, import the Vitrine Plate Gallery instead, one of the free designs in the slider templates collection: a single plate under a thumbnail strip, with a caption panel that includes an editable frame-data table for place, time, lens, aperture, shutter and ISO. It was built for photography.
To import it: Master Addons → Widget Builder → Import Widget, drag the JSON in, and it appears in Elementor under Favorites. It runs on the free plugin, no Pro licence needed. The same collection has the Plinth Hero Slider, a full-bleed hero slider with per-slide links, which is also free to import. Twenty named designs in total, eight of them free.
Size, colour, background, border radius, and position: inside the carousel, outside it, or overlapping the edges.
Arrows positioned outside the carousel need horizontal room, and on a full-width container there isn’t any. They’ll clip. Either keep the container narrower than the viewport or position the arrows inside.
Before you call it done, load the page on an actual phone over cellular. Not the browser’s device emulator, which resizes the viewport but keeps your desktop’s connection and GPU. Most carousel problems only appear on real hardware on a real network.
Serving full-size images. Covered above, and it’s the big one. A ten-slide carousel at Full size on a photography site can be 20MB. The same carousel at large is under 2MB and nobody can tell.
Putting it above the fold with autoplay on. The carousel becomes your largest contentful paint, and autoplay means the browser is animating during the most performance-sensitive second of the page load. If a carousel has to be at the top, turn autoplay off and let it sit still until the page has settled.
Yes. Elementor’s free plugin includes an Image Carousel widget with arrows, dots and autoplay. It has no slide captions and limited per-device control. The Master Addons Image Carousel, also free, adds captions, a lightbox, coverflow layout and full responsive settings.
Set slides-per-view separately on each breakpoint using the device icons at the top of the setting rather than leaving one value for all screens. Four on desktop, two on tablet, one on mobile works for most galleries. Check arrow size on mobile too, because the default is often below the 44px accessible tap target.
Captions come from the media library’s Caption or Description field, not from a text box in the widget. Set the caption source in the widget’s content settings, then edit the text on each image in the media library. They carry through to the lightbox automatically.
Yes. Set the link behaviour to Custom URL in the content settings and each slide takes its own destination from the media item’s link field. This is what people are after when they search for an image carousel with multiple custom URLs.
Not enough slides for the loop. Swiper clones slides to create the wrap-around and needs at least twice the slides-per-view count. Four images shown three at a time will jump every cycle. Add more images or turn infinite loop off.
JavaScript combining or deferring stopped Swiper loading before the init code ran. Exclude swiper, elementor-frontend and jquery-core from JS optimisation in your cache plugin, and on LiteSpeed add them to the Guest Mode exclusion field as well. Full walkthrough: Elementor Swiper slider troubleshooting.
Get all the premium widgets and templates you desire, built with clean code that keeps your site fast. Ditch the bloat, not the features.
110+ Premium Widgets & Lifetime Updates – Build Beyond Limits. An Exclusive Creation by Pixar Labs
Every Master Addons Pro license comes with a 14-day no-questions refund, lifetime updates, and priority support. Try it risk-free this Spring – 40% OFF with “RESET40″ coupon.
