The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
The correct way to create space between slides depends on the carousel implementation. In Swiper, set the spaceBetween option in the JavaScript configuration. In a hand-built flex carousel, set gap on the flex container that directly lays out the slides. A site-builder carousel or another slider library may expose its own spacing control, so identify the implementation before choosing a selector.
Start by identifying what controls the slide layout
There is no universal CSS selector that safely adds space to every carousel. Libraries often calculate slide positions, widths and transforms themselves, while a custom carousel may simply be a flex container with several child elements. Applying a margin to an arbitrary element can therefore produce a visual gap in one implementation and break navigation in another.
Inspect the rendered markup and the code that initializes the slider. You are looking for one of three cases:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches- Swiper: the page has a Swiper initialization such as
new Swiper('.swiper', { ... }). Use Swiper’s configuration rather than adding margins to each slide. - Custom flex layout: a wrapper directly contains the slide items and has, or should have,
display: flex. Putgapon that wrapper. - Another library or a site-builder carousel: use the product’s documented spacing setting or configuration. Its internal wrappers may not behave like either of the examples below.
In browser developer tools, select a slide and move up the DOM tree until you find the element whose computed styles lay the slides out in a row or column. That is usually the element that needs the spacing rule. If you cannot find a flex wrapper or a Swiper configuration, do not guess at a generic selector; first determine which component generated the carousel.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Swiper: set spaceBetween in the initialization
Swiper documents spaceBetween as the “Distance between slides in px.” Its default is zero, so slides touch unless you set a value. The option accepts a number or a string. For a 16-pixel gap, add this property to the object passed to the Swiper constructor:
const swiper = new Swiper('.swiper', {
spaceBetween: 16,
});The official API reference is Swiper API. Change 16 to the pixel distance you want. The value is a request to Swiper’s layout engine, so it remains part of the calculations used to position and move slides.
Step-by-step Swiper setup
- Find the constructor. Search your JavaScript, module, or component for
new Swiperand identify the container selector. If the initialization is in a bundled file, edit the source component rather than an output bundle when possible. - Add the option inside the configuration object. Keep the property separated from neighboring options with a comma, as in
spaceBetween: 16. - Choose a number that matches your design. The setting represents pixel distance. Start with a small value such as 12, 16 or 24 and check the result at the viewport sizes your project supports.
- Reload the page and test movement. Confirm that next and previous controls, dragging or touch movement, and any pagination still move to the expected slide positions.
- Remove competing slide margins. Do not add a second spacing system to the slide elements unless you have tested the combination carefully.
Why slide margins can cause a Swiper problem
Swiper specifically warns that applying CSS margin to slide elements while using spaceBetween may prevent navigation from working properly. The two approaches can make the visual distance look correct while causing Swiper’s calculated positions and the actual slide edges to disagree. Use spaceBetween as the single source of spacing for a Swiper carousel. If an existing theme already adds a rule such as .swiper-slide { margin-right: 16px; }, remove or override that rule before diagnosing navigation issues.
/* Avoid combining this with Swiper's spaceBetween option */
.swiper-slide {
margin-right: 16px;
}There can be legitimate project-specific reasons to use custom margins, but Swiper’s warning means the result must be verified in the actual project rather than assumed to be interchangeable with spaceBetween.
Custom flex carousel: put gap on the layout wrapper
For a carousel you built yourself, the cleanest approach is to set gap on the element whose display is flex and whose direct children are the slides. For example:
.slides {
display: flex;
gap: 16px;
}This rule creates a 16-pixel gap between adjacent flex items. The selector is only an example: replace .slides with the class or element that actually lays out your slides. A common structure looks like this:
<div class='carousel'>
<div class='slides'>
<article class='slide'>First slide</article>
<article class='slide'>Second slide</article>
<article class='slide'>Third slide</article>
</div>
</div>Here, .slides is the correct target because it directly arranges the .slide elements. Adding gap to .carousel would do nothing unless that element is itself the flex container. Adding a margin to every slide may also create unwanted space at the beginning or end of the track and can complicate any JavaScript that calculates slide offsets.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Confirm the wrapper before changing the CSS
- Open developer tools and select a slide.
- Move to its parent and check the computed
displayvalue. - Verify that the parent contains the slide items as direct children. If another wrapper sits between them, the gap belongs on the wrapper whose children are being laid out.
- Add
display: flexandgapto that element, or edit the existing rule if it already uses flexbox. - Check the rendered distance between every neighboring slide, including slides that appear after a drag or scripted transition.
If the layout uses a vertical flex direction, gap still works, but the distance will be along the column rather than across a row. If the component uses grid or a different layout system, use that system’s spacing mechanism instead of assuming the flex example applies.
Rank #3
Choosing between the two approaches
| Carousel type | Where to set spacing | Example | Important caution |
|---|---|---|---|
| Swiper | Swiper initialization object | spaceBetween: 16 |
Swiper warns that slide margins used with spaceBetween may interfere with navigation. |
| Hand-built flex carousel | The flex container that directly lays out the slides | .slides { display: flex; gap: 16px; } |
The selector must match the real layout wrapper; the class name is project-specific. |
| Another slider library | The library’s spacing option or documented configuration | Not stated; consult that implementation’s settings. | A generic slide selector may conflict with its position calculations. |
| Site-builder carousel | The builder’s carousel spacing control, if provided | Not stated; labels differ by builder and version. | Inspect the generated DOM before adding custom CSS overrides. |
The deciding question is not “which CSS property looks familiar?” It is “which component owns slide positioning?” Use the component’s own option when a library owns the calculations; use CSS gap when your flex wrapper owns the layout.
When the gap does not appear
The rule targets the wrong element
The most frequent failure is placing gap on a shell around the actual track. In the Elements panel, select the element whose direct children are the slides and verify that its computed display is flex. If it is not, the rule cannot create a flex gap. Move the declaration to the real track or adapt the rule to the layout system that is actually in use.
A later rule overrides your CSS
Look at the computed styles for the wrapper and the gap property. If your declaration is crossed out, a later stylesheet, a more specific selector, or an inline style is winning. Place the correction in the component stylesheet loaded after the original rule, or match the existing selector’s specificity without resorting to !important unless the project genuinely requires it.
Recommended Free Tools
The slides are not direct children
gap applies between flex items, not between arbitrary descendants. If each visible slide is nested inside another generated element, put the property on the wrapper whose direct children are those generated items. A gap on an outer container will not pass through an intermediate wrapper.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Swiper navigation starts behaving incorrectly
Remove margins from the Swiper slide elements and leave the distance in spaceBetween. Re-test next, previous, pagination and drag behavior. If the issue remains, inspect whether another rule changes slide dimensions or adds padding to the track; the documented margin warning specifically makes mixed spacing a prime suspect.
The visual distance is inconsistent
Check whether more than one rule adds space: a flex gap, slide margins, wrapper padding and a library option can all contribute. Keep one deliberate source for the inter-slide distance, then separately decide whether the carousel needs padding at its outer edges. This prevents the first and last slide from receiving a different treatment by accident.
Making a custom CSS gap easy to maintain
For a hand-built carousel, a custom property keeps the value in one place and makes later adjustments safer:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute.carousel {
--slide-gap: 16px;
}
.slides {
display: flex;
gap: var(--slide-gap);
}With this pattern, changing --slide-gap changes the entire track without editing every selector. Keep the variable on the carousel or another component-scoped element so unrelated flex layouts do not inherit it. If your design uses different values at different viewport widths, change the custom property in the component’s responsive rules rather than adding separate margins to individual slides. The same principle applies to a site-builder override: scope the rule to the specific carousel instance.
Do not confuse the gap between slides with padding around the carousel. gap belongs to the layout wrapper and applies between its items; padding belongs to the container’s inside edge. Decide those two measurements independently so the first and last slides align with the intended content boundary.
Testing checklist before publishing the change
- Identify whether the component is Swiper, a custom flex layout, another library or a site-builder widget.
- For Swiper, confirm that
spaceBetweenis present in the initialization and that its value is the intended pixel distance. - For a custom carousel, confirm that
gapis on the flex container whose direct children are slides. - Search for slide-level margins or other spacing rules that would duplicate the distance.
- Test the first, middle and last visible positions, not only the initial render.
- Use every navigation method the component provides, including next, previous, pagination, dragging or touch movement where applicable.
- Inspect the computed styles at each supported viewport and verify that no breakpoint rule removes or overrides the gap.
- Check that the added space does not create an unexpected outer margin before the first slide or after the last one.
Practical decision guide
Use Swiper’s option when the project uses Swiper
Choose spaceBetween when Swiper is responsible for slide dimensions and movement. It expresses the intent directly to the library and avoids asking CSS margins to imitate a value that Swiper must calculate. Keep slide margins out of the equation unless you have a tested, project-specific reason to combine them.
Use CSS gap when you own the flex track
Choose gap when the carousel is a straightforward flex layout and your code controls how slides are arranged. It keeps the spacing rule on the element that owns the layout and avoids repeating a margin declaration on every slide.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use the component’s setting when the implementation is unknown
If the title of a template, page builder or plugin does not reveal its slider engine, start with its settings panel or documentation. Only after identifying the generated track should you add a custom override. This is slower than guessing at a selector, but it preserves the component’s navigation and snapping behavior.
Complete reference snippets
Swiper configuration
const swiper = new Swiper('.swiper', {
spaceBetween: 16,
});This asks Swiper for a 16-pixel distance between slides. Replace the number with the distance required by your design, then test navigation after removing any conflicting slide margins.
Custom flex track
.slides {
display: flex;
gap: 16px;
}Use this only when .slides is the element that directly lays out the slide items. If the gap is missing, inspect the rendered DOM and move the rule to the actual flex wrapper instead of adding margin to every slide.
Final checklist
Find the owner of slide positioning first. Configure Swiper with spaceBetween; configure a custom flex carousel with gap on its real track; and use a different library’s own spacing control when applicable. Keep one spacing mechanism per implementation, then verify navigation and the first and last slide positions at the viewports your project supports.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
