Skip to content

Commit c91d4b0

Browse files
malopestorresmalopestorres
committed
fix: remove legacy root selector from slider css
1 parent 5b74e0a commit c91d4b0

92 files changed

Lines changed: 526 additions & 387 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ The core is framework-agnostic, while the default authoring experience is built
3737
<p align="center">
3838
<a href="https://sixsrc.github.io/brickslider/">Website</a>
3939
&nbsp;•&nbsp;
40-
<a href="https://sixsrc.github.io/brickslider/docs/examples-basic-slider/">Demos</a>
40+
<a href="https://sixsrc.github.io/brickslider/docs/">Docs</a>
41+
&nbsp;•&nbsp;
42+
<a href="https://sixsrc.github.io/brickslider/docs/examples-basic-slider/">Demo</a>
4143
</p>
4244

4345

@@ -49,7 +51,7 @@ The core is framework-agnostic, while the default authoring experience is built
4951
- [📥 Installation](#installation)
5052
- [🌐 CDN](#cdn)
5153
- [🚀 Quick Start](#quick-start)
52-
- [🏗️ Basic Markup](#basic-markup)
54+
- [🏗️ Basic Configuration](#basic-configuration)
5355
- [🧠 TypeScript](#typescript)
5456
- [⚙️ Options](#options)
5557
- [🧩 Methods](#methods)
@@ -138,7 +140,7 @@ npm install @sixsrc/brick-slider @sixsrc/brick-slider-tailwind tailwindcss
138140
Use the official browser bundles in plain HTML:
139141

140142
```html
141-
<script src="https://cdn.jsdelivr.net/npm/@sixsrc/brick-slider@1.0.15/lib/brick-slider.browser.js"></script>
143+
<script src="https://cdn.jsdelivr.net/npm/@sixsrc/brick-slider@1.0.17/lib/brick-slider.browser.js"></script>
142144
<script src="https://cdn.jsdelivr.net/npm/@sixsrc/brick-slider-accessibility@1.0.10/lib/brick-slider-accessibility.browser.js"></script>
143145
<script src="https://cdn.jsdelivr.net/npm/@sixsrc/brick-slider-stories@1.0.13/lib/brick-slider-stories.browser.js"></script>
144146
<script>
@@ -179,7 +181,7 @@ const slider = new BrickSlider("#slider", {
179181
slider.init()
180182
```
181183

182-
## Basic Markup
184+
## Basic Configuration
183185

184186
```html
185187
<div id="slider">
@@ -205,6 +207,12 @@ slider.init()
205207
</div>
206208
```
207209

210+
### Slide spacing
211+
212+
Use the `gap` option for spacing between slides. Do not mix different horizontal margins on the direct child inside each `bs-slide`; apply the same inner spacing to every slide or leave spacing to `gap`.
213+
214+
BrickSlider blocks inconsistent slide inner margins because they can make navigation appear to jump to the wrong slide.
215+
208216
## TypeScript
209217

210218
Public types are exported from the package entries, so IntelliSense works out of the box.
@@ -676,14 +684,14 @@ If you are using BrickSlider directly in HTML or alongside Tailwind loaded from
676684
```html
677685
<link
678686
rel="stylesheet"
679-
href="https://unpkg.com/@sixsrc/brick-slider-tailwind@1.0.8/brick-slider.css"
687+
href="https://unpkg.com/@sixsrc/brick-slider-tailwind@1.0.9/brick-slider.css"
680688
/>
681689
```
682690

683691
```html
684692
<link
685693
rel="stylesheet"
686-
href="https://cdn.jsdelivr.net/npm/@sixsrc/brick-slider-tailwind@1.0.8/brick-slider.css"
694+
href="https://cdn.jsdelivr.net/npm/@sixsrc/brick-slider-tailwind@1.0.9/brick-slider.css"
687695
/>
688696
```
689697

‎packages/slider/development/dev-demo.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,12 @@ const options = [
268268
slidesPerPage: 1,
269269
gap: 0,
270270
useLoop: false
271+
},
272+
{
273+
slidesPerView: 1,
274+
slidesPerPage: 1,
275+
gap: 16,
276+
useLoop: true
271277
}
272278
]
273279

@@ -305,6 +311,7 @@ export function startDemo(): void {
305311
const slider6 = createInstance("#slider6", options[6])
306312
const slider7 = createInstance("#slider7", options[7])
307313
const slider9 = createInstance("#slider9", options[8])
314+
const slider10 = createInstance("#slider10", options[9])
308315
const storiesPlugin = new BrickSliderStories({
309316
trigger: "#open-stories",
310317
duration: 5000,
@@ -325,6 +332,7 @@ export function startDemo(): void {
325332
slider5.init()
326333
slider6.init()
327334
slider7.init()
335+
slider10.init()
328336
slider9.init()
329337
bindStoriesMethodsDemo(slider9, storiesPlugin)
330338
bindStoriesEventsPanel(slider9, storiesPlugin)
@@ -336,6 +344,7 @@ export function startDemo(): void {
336344
slider8,
337345
slider5,
338346
slider6,
339-
slider7
347+
slider7,
348+
slider10
340349
])
341350
}

‎packages/slider/index.html‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ <h2 class="text-2xl font-semibold text-violet-950">Initial Slide</h2>
6969
></div>
7070

7171
<div class="bs-track col-[1/-1] row-start-1 min-w-0 h-full">
72-
<div class="bs-container box-border font-medium text-purple-100">
73-
<div class="bs-slide">
72+
<div class="bs-container box-border font-medium text-purple-100">
73+
<div class="bs-slide">
7474
<span
7575
class="bs-content w-full h-full flex justify-center items-center bg-purple-200 rounded-lg overflow-hidden [container-type:inline-size]"
7676
><span
@@ -210,9 +210,7 @@ <h2 class="text-2xl font-semibold text-violet-950">Per Page</h2>
210210
class="bs-pages col-start-3 row-start-2 justify-self-center md:justify-self-end self-center flex min-w-10 items-center justify-center text-center text-sm font-semibold tabular-nums text-violet-950/70"
211211
></div>
212212

213-
<div
214-
class="bs-track col-[1/-1] row-start-1 min-w-0 h-full px-12"
215-
>
213+
<div class="bs-track col-[1/-1] row-start-1 min-w-0 h-full px-12">
216214
<div class="bs-container box-border font-medium text-purple-100">
217215
<div class="bs-slide">
218216
<span
@@ -354,9 +352,7 @@ <h2 class="text-2xl font-semibold text-violet-950">SlideSizes</h2>
354352
class="bs-pages col-start-3 row-start-2 justify-self-center md:justify-self-end self-center flex min-w-10 items-center justify-center text-center text-sm font-semibold tabular-nums text-violet-950/70"
355353
></div>
356354

357-
<div
358-
class="bs-track col-[1/-1] row-start-1 min-w-0 h-full px-12"
359-
>
355+
<div class="bs-track col-[1/-1] row-start-1 min-w-0 h-full px-12">
360356
<div class="bs-container box-border font-medium text-purple-100">
361357
<div class="bs-slide">
362358
<span
@@ -552,9 +548,7 @@ <h2 class="text-2xl font-semibold text-violet-950">Responsive</h2>
552548
class="bs-pages col-start-3 row-start-2 justify-self-center md:justify-self-end self-center flex min-w-10 items-center justify-center text-center text-sm font-semibold tabular-nums text-violet-950/70"
553549
></div>
554550

555-
<div
556-
class="bs-track col-[1/-1] row-start-1 min-w-0 h-full px-12"
557-
>
551+
<div class="bs-track col-[1/-1] row-start-1 min-w-0 h-full px-12">
558552
<div class="bs-container box-border font-medium text-purple-100">
559553
<div class="bs-slide">
560554
<span
@@ -698,9 +692,7 @@ <h2 class="text-2xl font-semibold text-violet-950">
698692
class="bs-pages col-start-3 row-start-2 justify-self-center md:justify-self-end self-center flex min-w-10 items-center justify-center text-center text-sm font-semibold tabular-nums text-violet-950/70"
699693
></div>
700694

701-
<div
702-
class="bs-track col-[1/-1] row-start-1 min-w-0 h-full px-12"
703-
>
695+
<div class="bs-track col-[1/-1] row-start-1 min-w-0 h-full px-12">
704696
<div class="bs-container box-border font-medium text-purple-100">
705697
<div class="bs-slide">
706698
<span
@@ -842,9 +834,7 @@ <h2 class="text-2xl font-semibold text-violet-950">Drag Free</h2>
842834
class="bs-pages col-start-3 row-start-2 justify-self-center md:justify-self-end self-center flex min-w-10 items-center justify-center text-center text-sm font-semibold tabular-nums text-violet-950/70"
843835
></div>
844836

845-
<div
846-
class="bs-track col-[1/-1] row-start-1 min-w-0 h-full px-12"
847-
>
837+
<div class="bs-track col-[1/-1] row-start-1 min-w-0 h-full px-12">
848838
<div class="bs-container box-border font-medium text-purple-100">
849839
<div class="bs-slide">
850840
<span
@@ -978,9 +968,7 @@ <h2 class="text-2xl font-semibold text-violet-950">Progress</h2>
978968
class="bs-pages col-start-3 row-start-2 justify-self-center md:justify-self-end self-center flex min-w-10 items-center justify-center text-center text-sm font-semibold tabular-nums text-violet-950/70"
979969
></div>
980970

981-
<div
982-
class="bs-track col-[1/-1] row-start-1 min-w-0 h-full px-12"
983-
>
971+
<div class="bs-track col-[1/-1] row-start-1 min-w-0 h-full px-12">
984972
<div class="bs-container box-border font-medium text-purple-100">
985973
<div class="bs-slide">
986974
<span

packages/slider/lib/AnimationFrame-B6M_aY4L.js renamed to packages/slider/lib/AnimationFrame-rGbMnbmv.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/slider/lib/Arrows-D2e9l3tL.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/slider/lib/Arrows-DXn8NnT5.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)