Skip to content

Commit e706f99

Browse files
MeenaAlagiahMeenaAlagiah
authored
Committing the Vue Carousel Customization sample
1 parent a75b164 commit e706f99

File tree

10 files changed

+319
-0
lines changed

10 files changed

+319
-0
lines changed

‎babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎jsconfig.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "esnext",
5+
"baseUrl": "./",
6+
"moduleResolution": "node",
7+
"paths": {
8+
"@/*": [
9+
"src/*"
10+
]
11+
},
12+
"lib": [
13+
"esnext",
14+
"dom",
15+
"dom.iterable",
16+
"scripthost"
17+
]
18+
}
19+
}

‎package.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "myvueapp",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"@syncfusion/ej2-vue-buttons": "^22.1.36",
12+
"@syncfusion/ej2-vue-navigations": "*",
13+
"core-js": "^3.8.3",
14+
"vue": "^3.2.13"
15+
},
16+
"devDependencies": {
17+
"@babel/core": "^7.12.16",
18+
"@babel/eslint-parser": "^7.12.16",
19+
"@vue/cli-plugin-babel": "~5.0.0",
20+
"@vue/cli-plugin-eslint": "~5.0.0",
21+
"@vue/cli-service": "~5.0.0",
22+
"eslint": "^7.32.0",
23+
"eslint-plugin-vue": "^8.0.3"
24+
},
25+
"eslintConfig": {
26+
"root": true,
27+
"env": {
28+
"node": true
29+
},
30+
"extends": [
31+
"plugin:vue/vue3-essential",
32+
"eslint:recommended"
33+
],
34+
"parserOptions": {
35+
"parser": "@babel/eslint-parser"
36+
},
37+
"rules": {}
38+
},
39+
"browserslist": [
40+
"> 1%",
41+
"last 2 versions",
42+
"not dead",
43+
"not ie 11"
44+
]
45+
}

‎public/favicon.ico‎

4.19 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎src/App.vue‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<template>
2+
<div class="control-container">
3+
<ejs-carousel ref="Carousel_instance" :dataSource="birdsList" :itemTemplate="'itemTemplate'"
4+
:interval="2000" :pauseOnHover="true" :loop="false"
5+
:indicatorsTemplate="'indicatorsTemplate'"
6+
:previousButtonTemplate="'previousTemplate'"
7+
:nextButtonTemplate="'nextTemplate'"
8+
:animationEffect="Fade"
9+
:showPlayButton="true"
10+
:playButtonTemplate="'playTemplate'"
11+
>
12+
<template v-slot:itemTemplate = "{data}">
13+
<div>
14+
<img :src="getImage(data.imageName)" :alt="data.Name"
15+
style="height:250px;width:100%;">
16+
<div><h2>{{ data.Name }}</h2>
17+
</div>
18+
</div>
19+
</template>
20+
<template v-slot:indicatorsTemplate="{data}">
21+
<div class="indicator">
22+
<img :src="getIndicatorThumbnail(data.index)" alt="image" style="height:3.1rem;width:4.6rem; padding:3px;"/>
23+
</div>
24+
</template>
25+
<template v-slot:previousTemplate>
26+
<ejs-button cssClass="e-flat e-outline nav-btn">
27+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
28+
<path d="m13.5 7.01 13 13m-13 13 13-13"></path>
29+
</svg>
30+
</ejs-button>
31+
</template>
32+
<template v-slot:nextTemplate>
33+
<ejs-button cssClass="e-flat e-outline nav-btn">
34+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
35+
<path d="m13.5 7.01 13 13m-13 13 13-13"></path>
36+
</svg>
37+
</ejs-button>
38+
</template>
39+
<template v-slot:playTemplate>
40+
<ejs-button content="Pause" v-on:click="btnClick"
41+
cssClass="e-info playBtn"
42+
ref="playBtn"></ejs-button>
43+
</template>
44+
</ejs-carousel>
45+
</div>
46+
</template>
47+
48+
<script>
49+
import { CarouselComponent } from "@syncfusion/ej2-vue-navigations";
50+
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons"
51+
export default {
52+
components: {
53+
"ejs-carousel": CarouselComponent,
54+
"ejs-button": ButtonComponent
55+
},
56+
data: function()
57+
{
58+
return{
59+
birdsList:[
60+
{ ID: 1, Name: "Cardinal", imageName: 'cardinal', Content: "Cardinalidae is a family of New World-endemic passerine birds that consists of cardinals, grosbeaks, and buntings. It also includes several birds such as the tanager-like Piranga and the warbler-like Granatellus. As such, membership of this group is not easily defined by a single or even a set of physical characteristics, but instead by molecular work." },
61+
{ ID: 2, Name: "Kingfisher", imageName: 'hunei',Content: "Kingfishers are a family, the Alcedinidae, of small to medium-sized, brightly colored birds in the order Coraciiformes. They have a cosmopolitan distribution, with most species found in the tropical regions of Africa, Asia, and Oceania, but also can be seen in Europe."},
62+
{ ID: 3, Name: "Keel-billed-toucan", imageName: 'costa-rica',Content: "The keel-billed toucan (Ramphastos sulfuratus), also known as sulfur-breasted toucan, keel toucan, or rainbow-billed toucan, is a colorful Latin American member of the toucan family. It is the national bird of Belize. The species is found in tropical jungles from southern Mexico to Colombia." },
63+
{ ID: 4, Name: "Yellow-warbler", imageName: 'kaohsiung',Content: "Yellow warblers are small widespread songbirds found in the Americas. The summer males of this species are generally the yellowest warblers wherever they occur. They are brilliant yellow below and greenish-golden above. Winter females and immature birds all have similarly greenish-yellow uppersides and are a duller yellow below. " },
64+
],
65+
};
66+
},
67+
methods:
68+
{
69+
getImage: function(bird) {
70+
return "https://ej2.syncfusion.com/products/images/carousel/" + bird + ".png";
71+
},
72+
getIndicatorThumbnail: function(index){
73+
var birds= ["cardinal", "hunei", "costa-rica", "kaohsiung", ];
74+
return "https://ej2.syncfusion.com/products/images/carousel/" + birds[index] + ".png";
75+
},
76+
btnClick: function()
77+
{
78+
var carousel_instance=this.$refs.Carousel_instance.ej2Instances;
79+
var button_instance=this.$refs.playBtn.ej2Instances;
80+
if(carousel_instance.autoPlay)
81+
{
82+
carousel_instance.autoPlay=false;
83+
button_instance.content="Play";
84+
}
85+
else{
86+
carousel_instance.autoPlay=true;
87+
button_instance.content="Pause";
88+
}
89+
90+
}
91+
}
92+
}
93+
</script>
94+
95+
<style>
96+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
97+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
98+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
99+
100+
.control-container {
101+
margin: 0 auto 2em;
102+
max-width: 450px;
103+
height: 365px;
104+
}
105+
.e-carousel-indicators .e-indicator-bars .e-indicator-bar .indicator {
106+
background-color: #ececec;
107+
border-radius: 0.25rem;
108+
cursor: pointer;
109+
height: 3.5rem;
110+
margin: 0.5rem;
111+
width: 5rem;
112+
}
113+
.e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-active .indicator {
114+
background-color: #3c78ef;
115+
}
116+
117+
.e-carousel-navigators .e-previous
118+
{
119+
margin-bottom:118px;
120+
margin-left:-44px;
121+
}
122+
.e-carousel-navigators .e-next
123+
{
124+
margin-bottom:118px;
125+
margin-right:-44px;
126+
}
127+
128+
.e-carousel-navigators .e-previous svg {
129+
transform: rotate(180deg);
130+
}
131+
132+
.e-carousel-items,
133+
.e-carousel-navigators {
134+
height: calc(100% - 3rem);
135+
}
136+
137+
.e-carousel-navigators .e-previous,
138+
.e-carousel-navigators .e-next,
139+
.e-carousel-navigators .nav-btn {
140+
padding: 0;
141+
}
142+
143+
.e-carousel-navigators .nav-btn:active,
144+
.e-carousel-navigators .nav-btn:focus,
145+
.e-carousel-navigators .nav-btn:hover {
146+
background-color: transparent !important;
147+
color: inherit;
148+
}
149+
150+
.e-carousel-navigators svg {
151+
fill: none;
152+
stroke:currentColor;
153+
stroke-linecap: square;
154+
stroke-width: 8px;
155+
height: 2rem;
156+
vertical-align: middle;
157+
width: 2rem;
158+
}
159+
160+
.e-carousel-navigators .e-previous svg {
161+
transform: rotate(180deg);
162+
}
163+
.e-play-pause
164+
{
165+
margin-bottom:118px;
166+
}
167+
</style>

‎src/assets/logo.png‎

6.69 KB
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class="hello">
3+
<h1>{{ msg }}</h1>
4+
<p>
5+
For a guide and recipes on how to configure / customize this project,<br>
6+
check out the
7+
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8+
</p>
9+
<h3>Installed CLI Plugins</h3>
10+
<ul>
11+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13+
</ul>
14+
<h3>Essential Links</h3>
15+
<ul>
16+
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17+
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18+
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19+
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20+
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21+
</ul>
22+
<h3>Ecosystem</h3>
23+
<ul>
24+
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25+
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26+
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27+
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28+
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29+
</ul>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
name: 'HelloWorld',
36+
props: {
37+
msg: String
38+
}
39+
}
40+
</script>
41+
42+
<!-- Add "scoped" attribute to limit CSS to this component only -->
43+
<style scoped>
44+
h3 {
45+
margin: 40px 0 0;
46+
}
47+
ul {
48+
list-style-type: none;
49+
padding: 0;
50+
}
51+
li {
52+
display: inline-block;
53+
margin: 0 10px;
54+
}
55+
a {
56+
color: #42b983;
57+
}
58+
</style>

‎src/main.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
createApp(App).mount('#app')

‎vue.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const { defineConfig } = require('@vue/cli-service')
2+
module.exports = defineConfig({
3+
transpileDependencies: true
4+
})

0 commit comments

Comments
 (0)