I am using ngx-slick-carousel in angular 8.2.14 and I am getting images in 2 lines during scroll
This is my HTML code:
<ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
This is my TS code:
slides = [
{ img: "../../assets/xd5.jpg" },
{ img: "../../assets/xd5.jpg" },
{ img: "../../assets/xd5.jpg" },
{ img: "../../assets/xd5.jpg" },
{ img: "../../assets/xd5.jpg" },
{ img: "../../assets/xd5.jpg" }
];
slideConfig = { "slidesToShow": 4, "slidesToScroll": 1, "autoplay": true, "centerMode": true };
first you must be installed the slick-carousel with npm then add the line below into your
angular.json file into scrpits section
"node_modules/slick-carousel/slick/slick.min.js"
and then you must add the
"node_modules/slick-carousel/slick/slick.scss",
"node_modules/slick-carousel/slick/slick-theme.scss"
files into css section.
Related
I would like to implement a select element with different colored-labels for each entry:
My code looks like this:
var Main = {
data() {
return {
selectedState: null,
processStates: [
{
value: 0,
label: 'New',
color: 'ffffff'
},
{
value: 1,
label: 'Ready',
color: 'ff9933'
},
{
value: 2,
label: 'Running',
color: '008000'
},
{
value: 3,
label: 'Rejected',
color: 'cc0000'
},
{
value: 4,
label: 'Terminated',
color: '2E9AFE'
}
]
}
},
methods: {}
}
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app');
#import url("//unpkg.com/element-ui#2.4.4/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.4.11/lib/index.js"></script>
<div id="app">
<el-select v-model="selectedState" style="width:200px">
<el-option
v-for="state in processStates"
:key="state.value"
:label="state.label"
:value="state.value"
>
<span>
<el-tag :style="'background-color:#' + state.color"> </el-tag> {{ state.label }}
</span>
</el-option>
</el-select>
</div>
AS you can see, I managed to inject html into the option tag and have the desired result.
However, I would like to have the same html when one option is selected.
Desired result:
Any idea how can I achieve it?
You have to use the prefix slot for this. As done below, also I changed the selectedState to an object, but you can also still use the string value, but then you have to do a lookup to get the color
var Main = {
data() {
return {
selectedState: { color: 'ffffff'},
processStates: [
{
value: 0,
label: 'New',
color: 'ffffff'
},
{
value: 1,
label: 'Ready',
color: 'ff9933'
},
{
value: 2,
label: 'Running',
color: '008000'
},
{
value: 3,
label: 'Rejected',
color: 'cc0000'
},
{
value: 4,
label: 'Terminated',
color: '2E9AFE'
}
]
}
},
methods: {}
}
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app');
#import url("//unpkg.com/element-ui#2.4.4/lib/theme-chalk/index.css");
.el-input--prefix .el-input__inner {
padding-left: 40px;
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.4.11/lib/index.js"></script>
<div id="app">
<el-select v-model="selectedState" value-key="value" style="width:200px">
<template slot="prefix">
<el-tag class="prefix" :style="`background-color: #${selectedState.color}`"/>
</template>
<el-option
v-for="state in processStates"
:key="state.value"
:label="state.label"
:value="state"
>
<span>
<el-tag :style="'background-color:#' + state.color"> </el-tag> {{ state.label }}
</span>
</el-option>
</el-select>
</div>
I have a <b-modal> from VueBootstrap, inside of which I'm trying to render a <GmapMap> (https://www.npmjs.com/package/gmap-vue)
It's rendering a grey box inside the modal, but outside the modal it renders the map just fine.
All the searching I've done leads to the same solution which I'm finding in some places is google.maps.event.trigger(map, 'resize') which is not working. Apparently, it's no longer part of the API [Source: https://stackoverflow.com/questions/13059034/how-to-use-google-maps-event-triggermap-resize]
<template>
<div class="text-center">
<h1>{{ title }}</h1>
<div class="row d-flex justify-content-center">
<div class="col-md-8">
<GmapMap
ref="topMapRef"
class="gmap"
:center="{ lat: 42, lng: 42 }"
:zoom="7"
map-type-id="terrain"
/>
<b-table
bordered
dark
fixed
hover
show-empty
striped
:busy.sync="isBusy"
:items="items"
:fields="fields"
>
<template v-slot:cell(actions)="row">
<b-button
size="sm"
#click="info(row.item, row.index, $event.target)"
>
Map
</b-button>
</template>
</b-table>
<b-modal
:id="mapModal.id"
:title="mapModal.title"
#hide="resetInfoModal"
ok-only
>
<GmapMap
ref="modalMapRef"
class="gmap"
:center="{ lat: 42, lng: 42 }"
:zoom="7"
map-type-id="terrain"
/>
</b-modal>
</div>
</div>
</div>
</template>
<script>
// import axios from "axios";
import { gmapApi } from 'gmap-vue';
export default {
name: "RenderList",
props: {
title: String,
},
computed: {
google() {
return gmapApi();
},
},
updated() {
console.log(this.$refs.modalMapRef);
console.log(window.google.maps);
this.$refs.modalMapRef.$mapPromise.then((map) => {
map.setCenter(new window.google.maps.LatLng(54, -2));
map.setZoom(2);
window.google.maps.event.trigger(map, 'resize');
})
},
data: function () {
return {
items: [
{ id: 1, lat: 42, long: 42 },
{ id: 2, lat: 42, long: 42 },
{ id: 3, lat: 42, long: 42 },
],
isBusy: false,
fields: [
{
key: "id",
sortable: true,
class: "text-left",
},
{
key: "text",
sortable: true,
class: "text-left",
},
"lat",
"long",
{
key: "actions",
label: "Actions"
}
],
mapModal: {
id: "map-modal",
title: "",
item: ""
}
}
},
methods: {
// dataProvider() {
// this.isBusy = true;
// let promise = axios.get(process.env.VUE_APP_LIST_DATA_SERVICE);
// return promise.then((response) => {
// this.isBusy = false
// return response.data;
// }).catch(error => {
// this.isBusy = false;
// console.log(error);
// return [];
// })
// },
info(item, index, button) {
this.mapModal.title = `Label: ${item.id}`;
this.mapModal.item = item;
this.$root.$emit("bv::show::modal", this.mapModal.id, button);
},
resetInfoModal() {
this.mapModal.title = "";
this.mapModal.content = "";
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
margin-bottom: 60px;
}
.gmap {
width: 100%;
height: 300px;
margin-bottom: 60px;
}
</style>
Does anyone know how to get the map to display properly in the modal?
Surely, I'm not the first to try this?
Had this problem, in my case it was solved by providing the following options to google maps:
mapOptions: {
center: { lat: 10.365365, lng: -66.96667 },
clickableIcons: false,
streetViewControl: false,
panControlOptions: false,
gestureHandling: 'cooperative',
mapTypeControl: false,
zoomControlOptions: {
style: 'SMALL'
},
zoom: 14
}
However you can probably make-do with just center and zoom.
Edit: Try using your own google maps components, follow this tutorial:
https://v2.vuejs.org/v2/cookbook/practical-use-of-scoped-slots.html#Base-Example
You can use the package described in the tutorial to load the map, dont be scared by the big red "deprecated" warning on the npm package page.
However for production, you should use the package referenced by the author, which is the one backed by google:
https://googlemaps.github.io/js-api-loader/index.html
The only big difference between the two:
The 'google' object is not returned by the non-deprecated loader, it is instead attached to the window. See my answer here for clarification:
'google' is not defined Using Google Maps JavaScript API Loader
Happy coding!
I want to have the image be shown in my project; however, I wasn't able to work it out.
I did search for a solution, and I tried it but it didn't work out for me.
What could be the solution here? Thank you in advance for your help.
Here is the html part:
<template>
<div id="app">
<div class="productListing">
<div class="box effect1" :key="product.id" v-for="product in ProductFilter.slice(0,3)">
<h1>{{product.title}}</h1>
<img :src="product.img" alt="dd">
</div>
</div>
</div>
</template>
vue js part
<script>
export default {
data: function () {
return {
userFilterKey: 'all',
products:[
{
id: 1,
title: "Google Pixel - Black",
price: 10,
company: "GOOGLE",
status : "TopSell",
img: "../../bg.jpeg"
}
],
}
},
computed: {
ProductFilter() {
return this[this.userFilterKey]
},
all() {
return this.products
},
TopSell() {
return this.products.filter((product) => product.status === "TopSell")
},
highRated() {
return this.products.filter((product) => product.status === "HighRated")
},
}
}
// # is an alias to /src
</script>
Thanks again in advance for your help.
Assuming the image path you provided is correct, use the require function instead.
products: [
{
id: 1,
title: "Google Pixel - Black",
price: 10,
company: "GOOGLE",
status : "TopSell",
img: require("../../bg.jpeg")
}
],
Sorry for my bad english this isn't my main language, also sorry for the markup!!
Hi im trying to send data from my parent component to the child components. The idea behind this, is so that i can use a specifik color for every component. This color is declared in the parent component in the routers array. But the data sended to the component was from the previous one, so it sends to color which was previously stored in routerColor.
<template>
<div class="flex" id="app">
<quick-acces>
</quick-acces>
<nav>
<router-link v-for="(router, index) in routers" class="nav-item" :to="{name:router.name, params: {routerColor}}" :style="{background: router.color}" #click.native="changeBorderColor(router.color)" v-bind:key="index">{{router.label}}</router-link>
</nav>
<main :style="{border: currentBorder}">
<router-view class="router-view">
</router-view>
</main>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
routers: [
{
name: 'ToDo',
link: '/to-do-list',
label: "To do list",
color: "#F9BE02"
},
{
name: 'Daily',
link: '/dailyplanner',
label: "Daily Planner",
color: "#F53240"
},
{
name: 'Projects',
link: '/projects',
label: "Projects",
color: "#02C8A7"
},
{
name: 'Steps',
link: '/function-steps',
label: "Steps",
color: "#2E302C"
},
{
name: 'Timer',
link: '/timer',
label: "Timer",
color: "#8FC33A"
},
{
name: 'Test',
link: '/test',
label: "Test",
color: "orange"
}
],
routerColor: "",
openTab: this.routers,
currentBorder: ""
}
},
methods: {
changeBorderColor: function(color){
this.routerColor = color
console.log(this.routerColor)
this.currentBorder = "3px solid" + color
},
I modified your code so I could make a snippet that runs.
I found that clicking the "orange" strip would update the color, but the border color did not show up until you clicked another color. I saw that you build the border color string without a space after "color", so when it built the string with "orange", it would be 3px solidorange, which does not work. Other colors were ok, because 3px solid#F9BE02 parses.
So I think your problem is just putting in a space after "color".
new Vue({
el: '#app',
data() {
return {
routers: [{
name: 'ToDo',
link: '/to-do-list',
label: "To do list",
color: "#F9BE02"
},
{
name: 'Daily',
link: '/dailyplanner',
label: "Daily Planner",
color: "#F53240"
},
{
name: 'Projects',
link: '/projects',
label: "Projects",
color: "#02C8A7"
},
{
name: 'Steps',
link: '/function-steps',
label: "Steps",
color: "#2E302C"
},
{
name: 'Timer',
link: '/timer',
label: "Timer",
color: "#8FC33A"
},
{
name: 'Test',
link: '/test',
label: "Test",
color: "orange"
}
],
routerColor: "",
openTab: this.routers,
currentBorder: ""
}
},
methods: {
changeBorderColor: function(color) {
this.routerColor = color
// I added a space after "solid"
this.currentBorder = "3px solid " + color
}
},
components: {
routerLink: {
props: {
to: Object
},
template: '<div>X{{to.params.routerColor}}</div>'
},
routerView: {
template: '<div>V</div>'
}
}
});
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<div class="flex" id="app">
<router-link v-for="(router, index) in routers" class="nav-item" :to="{name:router.name, params: {routerColor}}" :style="{background: router.color}" #click.native="changeBorderColor(router.color)" v-bind:key="index">{{router.label}}</router-link>
<main :style="{border: currentBorder}">
<router-view class="router-view">
</router-view>
</main>
</div>
I am working on a project using Vue Carousel for some product slides with images and text in each slide. I only want 5 to show up on a page and I want the nav arrows and I want it to drag. I can't get any of that stuff working. I tried following the examples as best as I can, but there is limited resources that I can find on this plugin.
new Vue({
el: "#app",
components: {
'carousel': VueCarousel.Carousel,
'slide': VueCarousel.Slide
},
props: {
numSlides: {
type: Number,
default: 5
},
itemsPerPageCssStyle: {
type: String,
default: "slider5buckets"
}
},
data: function () {
return {
products: [
{id: 1, img: 'https://placeimg.com/100/100'},
{id: 2, img: 'https://placeimg.com/101/101'},
{id: 3, img: 'https://placeimg.com/102/102'},
{id: 4, img: 'https://placeimg.com/103/103'},
{id: 5, img: 'https://placeimg.com/104/104'},
{id: 6, img: 'https://placeimg.com/105/105'},
{id: 7, img: 'https://placeimg.com/106/106'},
{id: 8, img: 'https://placeimg.com/107/107'},
{id: 9, img: 'https://placeimg.com/108/108'},
{id: 10, img: 'https://placeimg.com/109/109'},
{id: 11, img: 'https://placeimg.com/110/110'},
{id: 12, img: 'https://placeimg.com/111/111'},
{id: 13, img: 'https://placeimg.com/112/112'},
]
}
}
})
.VueCarousel-slide {
height: 350px;
text-align: center;
}
.VueCarousel-slide .img-container {
height: 130px;
width: 100%;
float: left;
}
.VueCarousel-slide img {
margin: 0 auto;
}
.VueCarousel-slide h3 {
height: 180px;
}
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
<script src="https://ssense.github.io/vue-carousel/js/vue-carousel.min.js"></script>
<div id="app">
<div
:class="['imageSliderContainer', itemsPerPageCssStyle]"
style="width:100%;height:374px;">
<div
class="wrapper"
style="height:355px;margin-left:15px;padding-right:4px;z-index:1;overflow: hidden;">
<div class="carousel-view">
<carousel
:per-page="5"
:navigation-enabled="true"
:min-swipe-distance="1">
<div
v-for="product in products"
:key="product.id">
<slide>
<div class="img-container">
<img
:src="product.img"
:alt="'Product #' + product.id">
</div>
<h3>Product #{{ product.id }}</h3>
<a
href="#"
tabindex="0"
name="instantadd">
<div class="btn_CA_Search buttonSearch gradient"> Add to Cart</div>
</a>
</slide>
</div>
</carousel>
</div>
</div>
</div>
</div>
Here is my Fiddle that is behaving exactly like it is behaving in my project. It is showing as many slides as it can fit, not 5. And it won't drag with the mouse correctly.
http://jsfiddle.net/gdw2hn5x/
Your template syntax should be:
<carousel>
<slide></slide>
<slide></slide>
<slide></slide>
...
</carousel>
You have an extra <div> wrapping the slides which you don't need and seems to break the component. You can put the v-for directly on the slide tag.
new Vue({
el: "#app",
components: {
'carousel': VueCarousel.Carousel,
'slide': VueCarousel.Slide
},
props: {
numSlides: {
type: Number,
default: 5
},
itemsPerPageCssStyle: {
type: String,
default: "slider5buckets"
}
},
data: function () {
return {
products: [
{id: 1, img: 'https://placeimg.com/100/100'},
{id: 2, img: 'https://placeimg.com/101/101'},
{id: 3, img: 'https://placeimg.com/102/102'},
{id: 4, img: 'https://placeimg.com/103/103'},
{id: 5, img: 'https://placeimg.com/104/104'},
{id: 6, img: 'https://placeimg.com/105/105'},
{id: 7, img: 'https://placeimg.com/106/106'},
{id: 8, img: 'https://placeimg.com/107/107'},
{id: 9, img: 'https://placeimg.com/108/108'},
{id: 10, img: 'https://placeimg.com/109/109'},
{id: 11, img: 'https://placeimg.com/110/110'},
{id: 12, img: 'https://placeimg.com/111/111'},
{id: 13, img: 'https://placeimg.com/112/112'},
]
}
}
})
.VueCarousel-slide {
height: 350px;
text-align: center;
}
.VueCarousel-slide .img-container {
height: 130px;
width: 100%;
float: left;
}
.VueCarousel-slide img {
margin: 0 auto;
}
.VueCarousel-slide h3 {
height: 180px;
}
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
<script src="https://ssense.github.io/vue-carousel/js/vue-carousel.min.js"></script>
<div id="app">
<div
:class="['imageSliderContainer', itemsPerPageCssStyle]"
style="width:100%;height:374px;">
<div
class="wrapper"
style="height:355px;margin-left:15px;padding-right:4px;z-index:1;overflow: hidden;">
<div class="carousel-view">
<carousel
:per-page="5"
:navigation-enabled="true"
:min-swipe-distance="1">
<!-- don't wrap with div here -->
<!-- just v-for on slide -->
<slide
v-for="product in products"
:key="product.id"
>
<div class="img-container">
<img
:src="product.img"
:alt="'Product #' + product.id">
</div>
<h3>Product #{{ product.id }}</h3>
<a
href="#"
tabindex="0"
name="instantadd">
<div class="btn_CA_Search buttonSearch gradient"> Add to Cart</div>
</a>
</slide>
</carousel>
</div>
</div>
</div>
</div>