I am trying to use Vuetify's v-carousel but with a static image and only utilize the carousel for transitioning texts. So I have the carousel and the same image is being used across each carousel item but the issue is to keep the "sliding" effect it also slides the image. This is not an issue if the image was just a base color but since it is an image it makes it look odd. I only want the text to move.
My Initial Code:
<template>
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
:src="/path/to/img.png"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide {{ i + 1 }}
</div>
</v-row>
</v-carousel-item>
</v-carousel>
</template>
I have tried appending a v-img into the code so it look like:
<template>
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-img src="/path/to/img.png" />
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide {{ i + 1 }}
</div>
</v-row>
</v-carousel-item>
</v-carousel>
</template>
I have also tried making the image a v-sheet and putting the text on top but it still gives off the sliding effect. Is this possible to do or should I be going down a different route?
Related
I am working on project with vutify I have created a layout.
I want cols to display side by side as the figma at the same line. Here is my result until now.
[![enter image description here][1]][1]
I am sharing my code I want that col-2 doesn't go out, but to aligned at the same line with next row.
.box-contact {
background: url("./../assets/img/homepage-image/background.png");
width: 692%;
height: 105px;
}
<template>
<v-container grid-list-lg class="prodotti-cataloghi">
<v-row>
<v-col cols="12" md="5" lg="6" class="ma-0 pa-0">
<h5>Prodotti </h5>
</v-col>
<!--<v-divider vertical class="vertical hidden-sm-and-down "> </v-divider> -->
<v-col cols="12" md="6" lg="6" class="ma-0 pa-0">
<div class="box-contact text-center hidden-sm-and-down d-flex flex-wrap">
<p class="white--text">Lorem ipsum? Contattaci. +xx xxx xxxxx </p>
<a class="phone-contact">
<img src="./../assets/img/homepage-image/Phone.png">
</a>
</div>
</v-col>
</v-row>
</v-container>
</template>
Next in the secondly col I have made css to add background image in class
.box-contact but you can add what you want.
but secondly shouldn't to go out it should aligned with next row
I don't know if it is problem with width of image or
problem with cod.
Any idea?
I'm trying to build a front page using the v-carousel and would like to scroll to the next item instead of using arrows or delimiters, how would I achieve that?
Here is my code at the moment
<template>
<v-carousel vertical-delimiters
:vertical="true"
:cycle="true"
height="100%"
>
<v-carousel-item >
<v-sheet
color="black"
height="100%"
tile
>
<v-container
fill-height
fluid
>
<v-row
align="center"
justify="center"
dense
class ="ma-0"
>
<v-col
align="center"
justify="center"
>
<v-img src="imagepath"
max-height="350"
max-width="350"
class="ma-10"
>
</v-img>
<div class="text-h4 pa-7">
Some text
</div>
</v-col>
</v-row>
</v-container>
</v-sheet>
</v-carousel-item>
<v-carousel-item>
<v-sheet
color="black"
height="100%"
tile
>
<v-container
fill-height
fluid
>
<v-row
align="center"
justify="center"
dense
class ="ma-0"
>
<v-col
align="center"
justify="center"
>
<v-img src="Image Path"
max-height="350"
max-width="350"
class="ma-10"
>
</v-img>
<div class="text-h4 pa-7">
Some text
</div>
</v-col>
</v-row>
</v-container>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>
The carousel works just fine, but I can't find a way to send scroll event to the carousel as a an event to move to the next item.
I think you could wrap your carousel into Intersection observer so you could observe the scroll event and after that, you will be able to call the function which can handle the carousel.
e.g. you have to provide a v-model for the <v-carousel> then after tracking the scroll event you can increase or decrease the amount of that v-model.
Another way could be the use of scroll directive. The v-scroll directive allows you to provide callbacks when the window, specified target, or the element itself (with .self modifier) is scrolled.
I have a set of images with some information like the author and now I'm adding a few buttons to allow users to like images.
Since the image has a link to the images screen I don't know how to trigger the button avoiding to fire the link.
Here is the code, I'm using Vuetify and Nuxt:
<nuxt-link
:to="
`/photo/${slotProps.item.id}/${
slotProps.item.slug
}`
"
>
<v-hover>
<v-img
slot-scope="{ hover }"
:src="slotProps.item.url"
>
<v-fade-transition mode="in-out">
<div
v-if="hover"
class="d-flex transition-fast-in-fast-out photo-overlay pa-2"
>
<div
class="d-flex pl-1 credits justify-space-between align-center w-100"
>
<div>
<nuxt-link
:to="
`/user/${slotProps.item.pId}`
"
class="secondary--text body-2 d-inline-block"
>
<v-avatar size="30">
<img
:src="slotProps.item.avatar"
:alt="`${slotProps.item.name}`"
/>
</v-avatar>
<span class="ml-2">
{{ slotProps.item.name }}
</span>
</nuxt-link>
</div>
<div>
<v-menu
v-model="addToGalleriesMenu"
:close-on-content-click="false"
:nudge-width="200"
>
<template v-slot:activator="{ on, attrs }">
<v-btn v-on="on" v-bind="attrs" icon color="secondary">
<v-icon small>
fal fa-hearth
</v-icon>
</v-btn>
</template>
<v-card outlined>
<v-card-title>Test</v-card-title>
</v-card>
</v-menu>
</div>
</div>
</div>
</v-fade-transition>
</v-img>
</v-hover>
</nuxt-link>
The code above generate an image, on mouse hover a layer appear at the bottom showing the name and a button to like the image.
Clicking on the user link it works fine, as expected. Clicking on the button that should fire an action is not working because the image link get clicked.
How can I work around it?
You can stop event propagation to the parent element very easily using Vue click modifiers:
<a href="example.com">
...
<v-btn #click.stop.prevent="test()">
...
You can achieve the same thing without using Vue modifiers:
<a href="example.com">
...
<v-btn #click="test($event)">
...
methods: {
test (event) {
event.preventDefault()
event.stopPropagation()
}
}
I made a way to tell Vue to look in a file and assign images to the corresponding amount of cards. It's working fine.
But I was wondering if there is a better way to do this. The reason why I am asking is that currently, you need to rename your images in numerical order (Eg. 1.png,2.png,3.png etc) and as you know it's very bad for SEO to not name your Image files properly and its a tad bit annoying if you want to add more images or remove any
This is not a complete deal breaker but I would like it if I do not lose on my SEO ranking capabilities.
Here is the code
<v-container fluid>
<v-row>
<v-col
v-for="n in 38"
:key="n"
class="d-flex child-flex"
cols="4"
>
<v-lazy
:options="{
threshold: 0.5,
}"
transition="fade-transition"
>
<v-card elevation="8" shaped draggable="false" class="d-flex">
<v-img
:src="require('#/assets/skillsLogo/' + n + '.png')"
:lazy-src="require('#/assets/skillsLogo/' + n + '.png')"
class="grey lighten-4"
aspect-ratio="3"
>
<template v-slot:placeholder>
<v-row
class="fill-height ma-0"
align="center"
justify="center"
>
<v-progress-circular
indeterminate
color="grey lighten-5"
></v-progress-circular>
</v-row>
</template>
</v-img>
</v-card>
</v-lazy>
</v-col>
</v-row>
</v-container>
Thanks in advance
images.js
const context = require.context("#/assets/skillsLogo/", false, /\.png$/);
const images = context.keys().map(context);
export default images;
Docs
Component:
<script>
import images from "./images.js";
export default {
data() {
return {
images: images,
};
},
};
</script>
Iterate over images array in your template...
I'm working with Vuejs and Nuxt and would like to display a video in a carousel component along side jpeg and png images . The carousel component:
<template>
<section>
<v-card
class="mx-auto"
color="#26c6da"
dark
max-width="1200"
>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</v-card>
</section>
<script>
export default {
data() {
return {
items: [ {
id: '1',
content: '<iframe width="560" height="315" ' +
'src="https://www.youtube.com/embed/zjcVPZCG4sM" ' +
'frameborder="0" allow="autoplay; encrypted-media" ' +
'allowfullscreen></iframe>'
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
}
]
};
}
};
</script>
</template>
Based on The answer Displaying video in Nuxt carousel component and https://codepen.io/anon/pen/MqBEqb
I need:
<v-carousel-item v-for="item in items" :key="item.id" v-html="item.content">
for a video and
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
for a jpg. How do I dynamically add 1 or the other based on the object in the exported data array?
You can use v-for on the template and later use v-if to do the check and insert one or the other as demonstrated here.
https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt
https://codepen.io/autumnwoodberry/pen/qXGjXY?editors=1010
There is a trick by which you can implement your use-case. You can use the combination of both v-if and v-for. I did put condition based on either it is content or src. Additionally, I have added id attribute for all the data items. Here is the working link for the codepen https://codepen.io/arunredhu/pen/MdebLV
<v-carousel>
<template v-for="item in items" :key="item.id">
<v-carousel-item >
<img v-if="item.src" :src="item.src"/>
<div class="video-elem" v-if="item.content" v-html="item.content"></div>
</v-carousel-item>
</template>
</v-carousel>
You can use template and v-if='item.src'
<div id="app">
<v-app>
<v-content>
<v-container>
<v-carousel>
<template v-for="item in items" :key="item.id">
<v-carousel-item v-if="item.src" :src="item.src"></v-carousel-item>
<v-carousel-item v-else v-html="item.content"></v-carousel-item>
</template>
</v-carousel>
</v-container>
</v-content>
</v-app>
</div>