I'm having an issue with wrap around scrolling when there are only two slides in the carousel. With the exact same setup, everything works correctly if there are three ore more slides, but with only two slides the carousel will only scroll Left to Right regardless of which navigation button I click or which direction I swipe. The order of the slides is correct, as is the pagination, it's just the animation that's incorrect. If I turn wrapAround scrolling off, I can correctly scroll the slides left or right, but with it turned on, they only scroll right. Here is the setup for the carousel and settings:
<carousel :settings="settings" ref="carouselRef">
<slide :key="index" v-for="(photo, index) of project.photos">
<div class="pic-outer">
<img
class="pic"
:src="photo"
draggable="false"
/>
</div>
</slide>
<template #addons>
<pagination
:style="{ opacity: project.photos.length == 1 ? 0.001 : 1 }"
/>
</template>
</carousel>
const settings = {
itemsToShow: 1,
itemsToScroll: 1,
wrapAround: true,
};
This issue is occurring even if I place the carousel in an empty component with no styling, so I can't think of anything else that could be interfering. I'm curious if anyone has run into this before or if there are any suggestions.
This was resolved by updating to the newest version of vue3-carousel.
Related
I am having trouble with v-bottom-navigation hide-on-scroll on route change. If I am on a route with scrollable content and I scroll down then up, it works as expected - the bottom nav is hidden. Then, on route change to a page with no scrollable content, the bottom nav is inaccessible. There is no obvious way to reset its tranform style that hide-on-scroll set, other than go to a page with scrollable content, then scroll down.
Repro:
codePen
scroll to bottom of page 1, then scroll up (bottom nav is transitioned)
nav to page 2 (hamburger button)
Nav is transitioned off-screen
<v-main>
<v-container fluid>
<v-fade-transition mode="out-in">
<router-view></router-view>
</v-fade-transition>
</v-container>
</v-main>
<v-bottom-navigation
hide-on-scroll
grow
app
>...</v-bottom-navigation>
Thanks.
Thanks to Kael in the Vuetify discord #help channel for the solution: use :input-value.sync to open it on route change.
<v-bottom-navigation
:input-value.sync="bottomNav"
hide-on-scroll
grow
app
>
watch: {
'$route.path' () {
this.bottomNav = true
}
I am using vue-agile, and I have to show videos and images in it. The images work fine but for videos, whenever I drag the pointer to move to a certain position in the player, the slider drags and moves to the next slider. Is there any way to stop the drag/swipe feature. Thanks.
https://www.npmjs.com/package/vue-agile
As a workaround, I first watch the mouse events on the clicked element (#mousedown, #mouseup)
On mousedown, I set the swipe-distance prop to a very high pixel value in the example below I used 1,000,000,000 (Default is 50).
Doc: https://github.com/lukaszflorczak/vue-agile
This worked for my case.
<template>
<agile :dots="false" :infinite="false" :center-mode="true"
:nav-buttons="false" :swipe-distance="noSweep ? 1000000000 : 50" >
<div v-for="(card, index) in cards" :key="index">
<div
#mousedown="noSweep=true"
#mouseup="noSweep=false"
>
Card content - example
</div>
</agile>
</template>
<script>
export default {
data() {
return {
noSweep: false,
cards:['A','B','C']
}
}
}
</script>
I'm tryin to add a bar at the bottom of my ElectronJS application and I'd like it to be positioned in the same way as the blue bottom bar in VSCode, where the scroll bar ends/stops above it.
Unfortunately, there always seems to be a small space on the right side where the scroll bar would appear when the content overflows (I don't want to disable the scroll bar / behavior with things such as overflow: hidden; See Edit 2).
I did some testing and with the code below you can see my desired behavior seems to happen with the nav-drawer, i.e. its scroll bar stops right above the v-bottom-navigation, which would be my bottom bar (the thick grey line you see is the scroll bar).
I'm semi-new to this, but I can't figure out why exactly that happens and how to modify it in order to get the same behavior for the whole application.
VueComponent.vue
<template>
<div id="nav-drawer">
<v-navigation-drawer
v-model="drawer"
app
color="white darken-3"
mini-variant
permanent
>
<v-avatar
v-for="n in 30"
:key="n"
:color="`grey ${n === 1 ? 'darken' : 'lighten'}-1`"
size="36"
class="d-block text-center mx-auto my-3"
>
<span>TT</span>
</v-avatar>
<v-avatar class="d-block mx-auto">
<v-btn icon small color="primary">
<v-icon>fas fa-window-maximize</v-icon>
</v-btn>
</v-avatar>
</v-navigation-drawer>
<v-bottom-navigation v-model="value" height="20px" background-color="primary" app>
<v-spacer></v-spacer>
<v-btn icon small>
Button
</v-btn>
</v-bottom-navigation>
</div>
</template>
<script>
export default {
name: "NavDrawer",
components: {
//
},
data: () => ({
drawer: true,
})
}
</script>
P.S. I'm using ElectronJS with VueJS+VuetifyJS - I set it up as described here. Any help is appreciated.
Edit 1: I went through the VSCode source code and found the UI elements (vscode/src/vs/base/browser/ui/). Unfortunately, I wasn't able to figure out which of those is the bar at the bottom (apparently called System Bar, according to some threads I found here and there).
I think it might be the toolbar, but that seems to be part of the actionbar, which is the menu on the left (by default) and doesn't seem to have much CSS to indicate that it's the bar at the bottom.
Edit 2: I tried adding html {overflow: hidden;} in the style section of the main index.html file. It removes the bar of the main page section (the scrollbar you see in the second picture with the two arrows and green button) and the possibility to scroll, but the scrollbar of the nav-drawer remains and the scrolling still works. So, I guess this would be an option if I could still have the scrollbar in the main page section with the code above with the hidden feature enabled as well. Not sure if that's possible though.
Edit 3: Using html {overflow-y: auto;} in the index.html file, removes the scrollbar when there isn't content that is overflowing and it looks just like I want it, but when there is, it still taking up space and looks like the the second image in my post.
Found this example: CodePen
For my case the solution is adapting the :root {...} part to my application, which means to mark the bottom bar as the footer and calculate the content area depending on its size.
The html {overflow: hidden;} must also be in the index.html file's style section.
I am trying to use multiple carousel components inside card components with nested v-for loops but I’m having trouble figuring out the correct way to assign the carousel v-model so that it’s unique and doesn’t update all the carousels when the slide is changed which is what I currently have,
Here is the code I have so far:
<q-card
v-for="(item, index) in inventory"
:key="index"
style="width: 20rem;"
>
<q-card-section
class="q-pa-none text-white"
>
<q-carousel
animated
arrows
navigation
infinite
style="height: 15rem;"
v-model="slide" // What should this be assigned so that
>
<q-carousel-slide
v-for="(image, index) in item.images"
:key="index"
:name="index" //It works with the slide name and only updates the respective q-carousel
:img-src="image.url"
>
</q-carousel-slide>
</q-carousel>
</q-card-section>
</q-card>
slide is simply a data prop assigned to 0, this works but when I change the slide of one carousel all of the carousels change too.
Hopefully this makes sense, It’s a bit hard for me to explain it but let me know anything that needs clarification
Edit: Dropped the code in codepen here is the link: https://codepen.io/launchit-studio/pen/jOVrKzQ
The issue I am having is that the v-model affects all of the carousel slides not just the one that is clicked. I understand this is because the slide prop is shared by all the carousels but I am not sure of what to use in order for it to be 'independent'
Instead of using a single model slide for all the slides, use an array of models. (An object would work too).
data() {
return {
slide: 1, ❌
activeSlides: [] ✅
}
}
The index of the carousel in the v-for will also be used as the index in the array:
<q-carousel
animated
arrows
navigation
infinite
style="height: 15rem;"
v-model="activeSlides[index]"
>
Since each carousel's model needs to start at 1, you can initialize activeSlides accordingly:
created() {
const numCarousels = this.inventory.length;
this.activeSlides = Array(numCarousels).fill(1);
},
Here is the updated CodePen.
I have a sort of simple question. Im building a carousel which rotates vertically using vue. When the user clicks the forward button, I want vue to transition the elements in/out using my 'forward' transition (moving them down). When the user clicks the backward button, I want vue to transition the elements in/out using my 'backward' transition (moving them up).
Right now, I just have one transition that performs my forward transition, whether the user is navigating forward or backward.
Is there any way to accomplish this?
Heres my component:
<template>
<div class="carousel__container">
<div class="carousel__visible">
<div class="carousel__slides">
<transition-group name="carouselNext">
<div v-for="(quote, index) in quotes" class="carousel__slide" key="index" v-show="index === currentSlide">
<blockquote>{{ quote.quote }}</blockquote>
<cite>{{ quote.cite }}</cite>
</div>
</transition-group>
</div>
</div>
<button class="btn btn--alt" #click="prev">Back</button>
<button class="btn btn--primary" #click="next">Next</button>
</div>
Thanks!
Easiest way is to change the transition name based on direction
<transition-group name="carouselNext"> can become <transition-group :name="direction">
add new direction data var and include toggling based on methods
prev(){
this.direction = "carouselPrev"
this.currentSlide = (this.currentSlide + this.quotes.length - 1)%this.quotes.length
},
next(){
this.direction = "carouselNext"
this.currentSlide = (this.currentSlide + 1)%this.quotes.length
}
and finally add the alternate carouselPrev css transition classes
here's a working example https://codepen.io/scorch/pen/NwwpxM