Skip to content

Commit 2383676

Browse files
maheshtpsmaheshtps
authored
Merge pull request #1 from MeenaAlagiah/master
Adding the Vue Carousel Customization sample
2 parents 6f2cfe0 + 55acb14 commit 2383676

File tree

11 files changed

+331
-0
lines changed

11 files changed

+331
-0
lines changed

‎README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
11
# how-to-customize-the-vue-carousel-component
22
A quick start Vue project that shows how to customize the Vue Carousel Component. It includes a code snippet for customizing the time interval between transitions, auto-play settings, and looping. It also includes a code snippet for customizing the indicator, navigator, and play button using templates.
3+
4+
Refer to the following documentation to learn about the Vue Carousel component:
5+
https://ej2.syncfusion.com/vue/documentation/carousel/navigators-and-indicators
6+
https://ej2.syncfusion.com/vue/documentation/carousel/animations-and-transitions
7+
8+
Check out this online example of the Vue Carousel Component:
9+
https://ej2.syncfusion.com/vue/demos/#/material3/carousel/templates.html
10+
11+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
12+
13+
### How to run this application?
14+
To run this application, you need to clone the `how-to-customize-the-vue-carousel-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `ng serve` command.

‎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+
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')

0 commit comments

Comments
 (0)