Skip to content
This repository was archived by the owner on Feb 24, 2023. It is now read-only.

Commit 2cf83f1

Browse files
author
Łukasz Florczak
committed
Demo page fixes + new demo
1 parent ad0b2af commit 2cf83f1

File tree

2 files changed

+174
-1
lines changed

2 files changed

+174
-1
lines changed

‎demo/App.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
example-1
77
example-2
88
example-3
9+
example-4
910

1011
site-footer
1112

@@ -19,6 +20,7 @@
1920
import Example1 from './examples/Example1'
2021
import Example2 from './examples/Example2'
2122
import Example3 from './examples/Example3'
23+
import Example4 from './examples/Example4'
2224
2325
export default {
2426
name: 'Demo',
@@ -29,7 +31,8 @@
2931
3032
Example1,
3133
Example2,
32-
Example3
34+
Example3,
35+
Example4
3336
}
3437
}
3538
</script>

‎demo/examples/Example4.vue‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<template lang="pug">
2+
section.section.section--demo-4
3+
div.container
4+
div.row
5+
div.col-xs-12
6+
h2.section__title #[strong #4] demo
7+
code-pen(id="yrQyBj")
8+
p.section__description responsive settings and two related carousels
9+
10+
div.row
11+
div.col-xs-12
12+
agile.main(ref="main" :options="options1" :as-nav-for="asNavFor1")
13+
div.slide(v-for="(slide, index) in slides", :key="index", :class="`slide--${index}`")
14+
img(:src="slide")
15+
16+
div.col-xs-12
17+
agile.thumbnails(ref="thumbnails" :options="options2" :as-nav-for="asNavFor2")
18+
div.slide.slide--thumbniail(v-for="(slide, index) in slides", :key="index", :class="`slide--${index}`" @click="$refs.thumbnails.goTo(index)")
19+
img(:src="slide")
20+
21+
template(slot="prevButton")
22+
i.fas.fa-chevron-left
23+
24+
template(slot="nextButton")
25+
i.fas.fa-chevron-right
26+
27+
</template>
28+
29+
30+
<script>
31+
export default {
32+
name: 'Example4',
33+
34+
data () {
35+
return {
36+
asNavFor1: [],
37+
asNavFor2: [],
38+
options1: {
39+
dots: false,
40+
fade: true,
41+
navButtons: false
42+
},
43+
44+
options2: {
45+
autoplay: true,
46+
autoplaySpeed: 5000,
47+
centerMode: true,
48+
dots: false,
49+
navButtons: false,
50+
slidesToShow: 3,
51+
responsive: [
52+
{
53+
breakpoint: 600,
54+
settings: {
55+
slidesToShow: 5
56+
}
57+
},
58+
59+
{
60+
breakpoint: 1000,
61+
settings: {
62+
navButtons: true
63+
}
64+
}
65+
]
66+
67+
},
68+
69+
slides: [
70+
'https://images.unsplash.com/photo-1453831362806-3d5577f014a4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ',
71+
'https://images.unsplash.com/photo-1496412705862-e0088f16f791?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ',
72+
'https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ',
73+
'https://images.unsplash.com/photo-1455619452474-d2be8b1e70cd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ',
74+
'https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ',
75+
'https://images.unsplash.com/photo-1472926373053-51b220987527?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ',
76+
'https://images.unsplash.com/photo-1497534547324-0ebb3f052e88?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'
77+
]
78+
}
79+
},
80+
81+
mounted () {
82+
this.asNavFor1.push(this.$refs.thumbnails)
83+
this.asNavFor2.push(this.$refs.main)
84+
}
85+
}
86+
</script>
87+
88+
<style lang="sass">
89+
.section--demo-4
90+
.main
91+
margin-bottom: 30px
92+
93+
.thumbnails
94+
margin: 0 -5px
95+
width: calc(100% + 10px)
96+
97+
// Basic VueAgile styles
98+
.agile
99+
&__actions
100+
position: static
101+
102+
&__nav-button
103+
background: transparent
104+
border: none
105+
color: #ccc
106+
cursor: pointer
107+
font-size: 24px
108+
transition-duration: .3s
109+
110+
&:hover
111+
color: #888
112+
113+
&__dot
114+
margin: 0 10px
115+
116+
button
117+
background-color: #eee
118+
border: none
119+
border-radius: 50%
120+
cursor: pointer
121+
display: block
122+
height: 10px
123+
font-size: 0
124+
line-height: 0
125+
margin: 0
126+
padding: 0
127+
transition-duration: .3s
128+
width: 10px
129+
130+
&--current,
131+
&:hover
132+
button
133+
background-color: #888
134+
135+
.thumbnails
136+
.agile__nav-button
137+
position: absolute
138+
top: 50%
139+
transform: translateY(-50%)
140+
141+
&--prev
142+
left: -45px
143+
144+
&--next
145+
right: -45px
146+
147+
// Slides styles
148+
.slide
149+
align-items: center
150+
box-sizing: border-box
151+
color: #fff
152+
display: flex
153+
height: 450px
154+
justify-content: center
155+
156+
&--thumbniail
157+
cursor: pointer
158+
height: 100px
159+
padding: 0 5px
160+
transition: opacity .3s
161+
162+
&:hover
163+
opacity: .75
164+
165+
img
166+
height: 100%
167+
object-fit: cover
168+
object-position: center
169+
width: 100%
170+
</style>

0 commit comments

Comments
 (0)