Skip to content

Commit 8cd9699

Browse files
antoniandreantoniandre
committed
Update documentation.
1 parent b431f1e commit 8cd9699

File tree

4 files changed

+196
-32
lines changed

4 files changed

+196
-32
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ ___
4949

5050
## Release Notes
5151

52+
- __Version 2.2__ Allow syncing 2 slideshows + added previous & next emitted events
5253
- __Version 2.1__ Add fractions option
5354
- __Version 2.0__ Allow new Vue slot syntax & other improvements
5455
- __Version 1.21.0__ Allow external autoplay pause / resume

‎src/documentation/examples.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@
161161
bottom: 1em;
162162
background-color: $secondary;
163163
transition: 0.3s ease-in-out;
164+
z-index: -1;
164165
}
165166

166167
&:not(.slide-multiple) .vueperslide--active:before {
@@ -175,6 +176,7 @@
175176
.ex--show-multiple-slides .vueperslide:before {left: 0.5em;right: 0.5em;}
176177
}
177178

179+
//---------------------//
178180
.ex--3d-rotation {
179181
width: 300px;
180182
margin: auto;
@@ -183,6 +185,33 @@
183185
.vueperslides__arrow--next {right: -6.2em;}
184186
}
185187

188+
//---------------------//
189+
.ex--synced-instances-2 .vueperslide__content-wrapper {
190+
width: 100%;
191+
display: flex;
192+
flex-direction: column;
193+
align-items: center;
194+
justify-content: center;
195+
text-align: center;
196+
color: #fff;
197+
}
198+
.ex--synced-instances-2 {
199+
.vueperslide {padding: 1em 2em;}
200+
201+
.vueperslide .vueperslide__content-wrapper {
202+
transform: scale(0.9);
203+
transition: 0.3s ease-in-out;
204+
opacity: 0.4;
205+
filter: blur(1px);
206+
}
207+
208+
.vueperslide--active .vueperslide__content-wrapper {
209+
transform: scale(1.1, 1.2);
210+
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
211+
opacity: 1;
212+
filter: blur(0);
213+
}
214+
}
186215

187216
@keyframes gradient {
188217
0% {background-position: 0% 50%}

‎src/documentation/index.vue‎

Lines changed: 156 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -226,8 +226,9 @@
226226
vueper-slides.ex--arrows-and-bullets-1.no-shadow(:infinite="false" :slide-ratio="0.25" :bullets="false")
227227
vueper-slide(v-for="i in 2" :key="i" :style="'background-color: ' + ['#42b983', '#ff5252'][i % 2]")
228228
template(v-slot:content)
229-
div You can also increase default arrows thickness, just with:
230-
strong.code .vueperslides__arrow svg {stroke-width: 2;}
229+
.vueperslide__content-wrapper
230+
div You can also increase default arrows thickness, just with:
231+
strong.code .vueperslides__arrow svg {stroke-width: 2;}
231232
p.mt-4 If you still want your own arrows icons, you can use the slots #[span.code v-slot:arrow-left] and #[span.code v-slot:arrow-right] as follows.
232233
li
233234
strong Bullets
@@ -243,7 +244,12 @@
243244
v-icon(color="white" x-large) undo
244245
template(v-slot:arrow-right)
245246
v-icon(color="white" x-large) redo
246-
vueper-slide(v-for="(slide, i) in slides1" :key="slide.id" :title="slide.title" :content="slide.content" :style="'background-color: ' + colors[(i + 1) % 4]")
247+
vueper-slide(
248+
v-for="(slide, i) in slides1"
249+
:key="slide.id"
250+
:title="slide.title"
251+
:content="slide.content"
252+
:style="'background-color: ' + colors[(i + 1) % 4]")
247253
ssh-pre(language="html-vue" label="HTML Vue Template").
248254
<vueper-slides :infinite="false" bullets-outside>
249255
<template v-slot:arrow-left>
@@ -380,11 +386,12 @@
380386
:key="i"
381387
:style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]")
382388
template(v-slot:content)
383-
.subtitle-1
384-
v-icon.mr-2(color="white") check
385-
| Complex content {{ i.toString() }} with Vue.js
386-
| {{ 1 === 1 ? 'interpreted' : 'non-interpreted' }} compilable content like
387-
| components & #[span(v-pre) {{ mustaches }}].
389+
.vueperslide__content-wrapper
390+
.subtitle-1
391+
v-icon.mr-2(color="white") check
392+
| Complex content {{ i.toString() }} with Vue.js
393+
| {{ 1 === 1 ? 'interpreted' : 'non-interpreted' }} compilable content like
394+
| components & #[span(v-pre) {{ mustaches }}].
388395
ssh-pre(language="html-vue" label="HTML Vue Template").
389396
<vueper-slides>
390397
<vueper-slide
@@ -437,11 +444,12 @@
437444
slide-content-outside-class="text-center py-4")
438445
vueper-slide(v-for="(slide, i) in slides4" :key="i" :style="'background-color: ' + ['#42b983', '#ff5252'][i % 2]")
439446
template(v-slot:content)
440-
v-layout(align-center justify-center)
441-
v-icon.pr-3(color="white" size="5em") access_time
442-
.text-left
443-
.headline {{ slide.title }}
444-
div {{ slide.content }}
447+
.vueperslide__content-wrapper
448+
v-layout(align-center justify-center)
449+
v-icon.pr-3(color="white" size="5em") access_time
450+
.text-left
451+
.headline {{ slide.title }}
452+
div {{ slide.content }}
445453

446454
ssh-pre(language="html-vue" label="HTML Vue Template").
447455
<button @click="toggleSlidesTime">Keep updating time</button>
@@ -602,14 +610,17 @@
602610
}
603611

604612
h3
605-
a(href="#ex--events") Events
613+
a(href="#ex--events") Emitted Events
606614
a(name="ex--events")
607615
p.
608616
This example demonstrates how to use the vueper slides provided events and how to style the current slide.#[br]
609617
The events box bellow will log all the events triggered while using the slideshow along with their returned params.#[br]
610-
Change slide to see new events in the events box bellow.
618+
Change slide to see new events in the events box bellow.#[br]
619+
Read more about the emitted events in the #[a(href="#events") emitted events section].
611620
vueper-slides.ex--events(
612621
@ready="logEvents('ready', $event)"
622+
@previous="logEvents('previous', $event)"
623+
@next="logEvents('next', $event)"
613624
@before-slide="logEvents('before-slide', $event)"
614625
@slide="logEvents('slide', $event)"
615626
:slide-ratio="0.2"
@@ -621,14 +632,22 @@
621632
:style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]")
622633

623634
pre.ssh-pre.events-box(data-label="Event box" style="min-height: 120px")
624-
div.grey--text(v-if="events")
625-
strong // event-name:
626-
span.ml-2 params
627-
div(v-html="events")
635+
v-layout.justify-space-between
636+
div.grey--text(v-if="logs")
637+
strong // event-name:
638+
span.ml-2 params
639+
v-btn(color="primary" x-small outlined @click="logs = []")
640+
v-icon.mr-1(small) close
641+
| Clear logs
642+
div(v-for="(log, i) in logs")
643+
strong.mr-2 {{ log.eventName }}:
644+
| {{ JSON.stringify(log.params) }}
628645
div.mt-2 Listening...
629646
ssh-pre(language="html-vue" label="HTML Vue Template").
630647
<vueper-slides
631648
@ready="logEvents('ready', $event)"
649+
@previous="logEvents('previous', $event)"
650+
@next="logEvents('next', $event)"
632651
@before-slide="logEvents('before-slide', $event)"
633652
@slide="logEvents('slide', $event)"
634653
:slide-ratio="0.2"
@@ -937,6 +956,71 @@
937956
<vueper-slide v-for="i in 10" :key="i" :title="i.toString()"></vueper-slide>
938957
</vueper-slides>
939958

959+
h3
960+
a(href="#ex--synced-instances") Sync 2 instances
961+
a(name="ex--synced-instances")
962+
p.
963+
This example demonstrates how to sync 2 Vueper Slides instances.#[br]
964+
You can use any navigation controller from both sliders and keep the current slide in sync.
965+
vueper-slides.ex--synced-instances(
966+
ref="vueperslides1"
967+
@slide="$refs.vueperslides2 && $refs.vueperslides2.goToSlide($event.currentSlide.index, { emit: false })"
968+
:slide-ratio="1 / 4"
969+
:bullets="false")
970+
vueper-slide(
971+
v-for="i in 8"
972+
:key="i"
973+
:title="i.toString()"
974+
content="Navigation in sync"
975+
:style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]")
976+
br
977+
vueper-slides.ex--synced-instances.no-shadow.ex--synced-instances-2(
978+
ref="vueperslides2"
979+
:dragging-distance="50"
980+
@slide="$refs.vueperslides1 && $refs.vueperslides1.goToSlide($event.currentSlide.index, { emit: false })"
981+
:visible-slides="3"
982+
fixed-height="120px")
983+
vueper-slide(
984+
v-for="i in 8"
985+
:key="i"
986+
@click.native="$refs.vueperslides2 && $refs.vueperslides2.goToSlide(i - 1)")
987+
template(v-slot:content)
988+
.vueperslide__content-wrapper(:style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]")
989+
.vueperslide__title {{ i.toString() }}
990+
991+
ssh-pre(language="html-vue" label="HTML Vue Template").
992+
<vueper-slides
993+
ref="vueperslides1"
994+
@slide="$refs.vueperslides2 && $refs.vueperslides2.goToSlide($event.currentSlide.index, { emit: false })"
995+
:slide-ratio="1 / 4"
996+
:bullets="false">
997+
<vueper-slide
998+
v-for="i in 8"
999+
:key="i"
1000+
:title="i.toString()"
1001+
content="Navigation in sync"
1002+
:style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]"></vueper-slide>
1003+
</vueper-slides>
1004+
1005+
<vueper-slides
1006+
ref="vueperslides2"
1007+
:slide-ratio="1 / 8"
1008+
:dragging-distance="50"
1009+
@slide="$refs.vueperslides1 && $refs.vueperslides1.goToSlide($event.currentSlide.index, { emit: false })"
1010+
:visible-slides="3"
1011+
fixed-height="100px">
1012+
<vueper-slide
1013+
v-for="i in 8"
1014+
:key="i"
1015+
@click.native="$refs.vueperslides2 && $refs.vueperslides2.goToSlide(i - 1)">
1016+
<template v-slot:content>
1017+
<div class="vueperslide__content-wrapper" :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]">
1018+
<div class="vueperslide__title">{{ '\{\{ i.toString() \}\}' }}</div>
1019+
</div>
1020+
</template>
1021+
</vueper-slide>
1022+
</vueper-slides>
1023+
9401024
h2
9411025
a(href="#vueper-slides--api") #[span.code <vueper-slides>] API
9421026
a(name="vueper-slides--api")
@@ -1280,7 +1364,7 @@
12801364
p See this setting live in the #[a(href="#ex--3d-rotation") 3D Rotation] example.
12811365

12821366
h3
1283-
a(href="#events") Events
1367+
a(href="#events") Emitted Events
12841368
a(name="events")
12851369
p.
12861370
Here is the list of all the available events. To see them in action you can check
@@ -1292,6 +1376,28 @@
12921376
p.
12931377
Fired right after the initialization of the slideshow is complete.#[br]
12941378
No parameter available.
1379+
li
1380+
h4
1381+
code previous
1382+
p.
1383+
Fired when going to previous slide either from user drag or from slideshow arrows or from keyboard arrows.#[br]
1384+
Happens before the `before-slide` event.#[br]
1385+
This event returns an object containing:
1386+
ul
1387+
li.
1388+
#[span.code currentSlide]: object containing the slide index, title, content, image & link of
1389+
the new current slide.
1390+
li
1391+
h4
1392+
code next
1393+
p.
1394+
Fired when going to next slide either from user drag or from slideshow arrows or from keyboard arrows.#[br]
1395+
Happens before the `before-slide` event.#[br]
1396+
This event returns an object containing:
1397+
ul
1398+
li.
1399+
#[span.code currentSlide]: object containing the slide index, title, content, image & link of
1400+
the new current slide.
12951401
li
12961402
h4
12971403
code before-slide
@@ -1300,10 +1406,10 @@
13001406
This event returns an object containing:
13011407
ul
13021408
li.
1303-
a #[span.code currentSlide] object containing the slide index, title & content
1409+
#[span.code currentSlide]: object containing the slide index, title, content, image & link
13041410
of the current slide.
13051411
li.
1306-
a #[span.code nextSlide] object containing the slide index, title & content
1412+
#[span.code nextSlide]: object containing the slide index, title, content, image & link
13071413
of the next slide.
13081414
li
13091415
h4
@@ -1313,7 +1419,7 @@
13131419
This event returns an object containing:
13141420
ul
13151421
li.
1316-
a #[span.code currentSlide] object containing the slide index, title & content of
1422+
#[span.code currentSlide]: object containing the slide index, title, content, image & link of
13171423
the new current slide.
13181424
li
13191425
h4
@@ -1324,7 +1430,7 @@
13241430
This event returns an object containing:
13251431
ul
13261432
li.
1327-
a #[span.code currentSlide] object containing the slide index, title & content of
1433+
#[span.code currentSlide]: object containing the slide index, title, content, image & link of
13281434
the new current slide.
13291435
li
13301436
h4
@@ -1335,7 +1441,7 @@
13351441
This event returns an object containing:
13361442
ul
13371443
li.
1338-
a #[span.code currentSlide] object containing the slide index, title & content of
1444+
#[span.code currentSlide]: object containing the slide index, title, content, image & link of
13391445
the new current slide.
13401446

13411447
h2
@@ -1433,13 +1539,35 @@
14331539
possible breaking changes.
14341540

14351541
ul.max-widthed.mt-8
1542+
li
1543+
strong Version 2.2
1544+
ul.mt-0
1545+
li
1546+
| For more flexibility, the default wrapper #[span.code `.vueperslide__content-wrapper`] has been removed
1547+
| when using the slide content slot. Which means your slot content will be directly at the slide root in
1548+
| the #[span.code `.vueperslide`] tag.#[br]
1549+
| You can still wrap your slot content with the #[span.code `.vueperslide__content-wrapper`] class to
1550+
| horizontally and vertically align center:
1551+
ssh-pre(language="html-vue" label="HTML Vue Template").
1552+
<vueper-slide v-for="i in 8" :key="i">
1553+
<template v-slot:content>
1554+
<div class="vueperslide__content-wrapper">
1555+
<div class="vueperslide__title">{{ '\{\{ i.toString() \}\}' }}</div>
1556+
</div>
1557+
</template>
1558+
</vueper-slide>
1559+
li Added previous & next emitted events
1560+
li Added current numeric index in all the emitted events
1561+
li Allow using previous() and next() functions without emitting event (useful for synced slideshows)
1562+
li Added a default margin bottom on the slideshow when using fixed height and bullets outside
1563+
14361564
li
14371565
strong Version 2.0
14381566
highlight(type="warning" no-icon)
14391567
p.mb-2.subtitle-1.
14401568
The v2 features a deep refactoring of the library, with revised logic and multiple improvements, in particular:
14411569
ul.mt-0
1442-
li New Vue.js 2.6+ slots syntax is now possible!
1570+
li Using the new Vue.js 2.6+ slots syntax is now possible!
14431571
li Slides cloning, slides rendering, and more performant & reliable content updating.
14441572
li Autoplay pause & resume - manual slide does not resume if paused.
14451573
li Hide first clone during init - on infinite mode.
@@ -1524,6 +1652,7 @@ export default {
15241652
internalAutoPlaying: true,
15251653
pauseOnHover: true,
15261654
events: '',
1655+
logs: [],
15271656
slideshowDisabled: false,
15281657
parallax: 1,
15291658
slidesTimeTimerId: null,
@@ -1613,7 +1742,7 @@ export default {
16131742
setTimeout(() => (this.highlightWhatAreClones = false), 3000)
16141743
},
16151744
logEvents (eventName, params) {
1616-
this.events += `<strong>${eventName}</strong>: ${JSON.stringify(params)}<br>`
1745+
this.logs.push({ eventName, params })
16171746
},
16181747
appendSlide () {
16191748
this.slides3.push({

0 commit comments

Comments
 (0)