Comments (15)
如果在同一个slide上绑定多个事件呢,一张slide上点击不同区域有不同相应
from vue-awesome-swiper.
<swiper-slide @click.native="something(index)" v-for="(item, index) in slides"/>
something(index) { console.log(index + 'slide click') }
bind event with swiper component
<swiper @click="something">
something() {
console.log('active index', this.swiper.activeIndex)
}
from vue-awesome-swiper.
我稍后测试,感谢反馈
from vue-awesome-swiper.
目前你可以在<swiper-slide>
组件上绑定@click.native
方法来执行方法(this.$router.push(something...)
),暂时解决需求,后续的解决方案正在优化中。
from vue-awesome-swiper.
由于swiper官方并未修复loop模式下附带的一些bug,此问题的解决方法,只能由手动控制点击事件,即为组件绑定点击事件方法,事件发生时获取当前活动状态的slide组建的下标,进行既定操作,此问题暂时关闭。
from vue-awesome-swiper.
loop模式 导致图片点击失效,要怎么获取下标?
from vue-awesome-swiper.
Has anyone found a solution to this?
When I use loop:true
, the swiper makes a "dumb" copy of the DOM element. As I use vue-logic inside each item, those logics are going missing.
Is there any workaround with swiper or any other slider-plugin for vue?
from vue-awesome-swiper.
Duplicated slides don't pass the props properly.
Can you let me know how to fix this? I can't click and do custom events on those
from vue-awesome-swiper.
@surmon-china thanks, but that's not what I need. I would like to have other Vue-Components inside a <swiper-slide>
.
Looks like this:
<swiper-slide>
<my-custom-component/>
</swiper-slide>
The <my-custom-component>
goes dumb inside the looped items, because only a plain html-copy is being made. Gues it'll not be easy to fix this.
from vue-awesome-swiper.
Swiper loop mode needs to copy html, but there is no duplication of events, so there will be many difficult to solve the problem; Another idea: Listen to swiper sliding events, slide to the last slide, if you continue to slide, use swiper Method to return to the first slide.
from vue-awesome-swiper.
Yeah this would work fine with slidesPerView: 1
, but would not work with multiple items visible at hte same time.
from vue-awesome-swiper.
I've done a hacky thing attaching a click event on the carousel, that will descend nodes into the real image and get the url I need to open the modal into that actual image.
This is just a hack though, I'd like a proper way to deep clone the nodes duplicated
from vue-awesome-swiper.
I would require to have more complex components sitting in there and not just simple click listeners. There's not much magic in getting them to work.
from vue-awesome-swiper.
it is the reason of swiper!
from vue-awesome-swiper.
First, upgrade to v4.x, read the swiper-component-api document.
e.g.
<swiper ref="mySwiper" @click-slide="handleClickSlide" />
function handleClickSlide(index, reallyIndex) {
console.log('Click slide!', index, reallyIndex)
this.$router.push({ params: `page-${reallyIndex}` })
}
from vue-awesome-swiper.
Related Issues (20)
- Swiper does not re-render when the swiperOptions state change on IOS app
- The misuse of path of swiper.css causes the dependency was not found HOT 1
- swiper-pagination not show HOT 1
- loop+slidesPerView
- when slidesPerView is auto,use virtual errors HOT 1
- Can't resolve 'swiper/swiper-bundle.css'
- Nuxt 3 Support HOT 2
- Local Registration failed while global Registration succeeded
- Is swiper 7 currently supported ? HOT 2
- How to use stopOnLastSlide property?
- vue 2 swiper7 vue-awesome-swiper effect没有效果
- swiper7 allowSlideNext unable???
- How to modify the default value HOT 1
- Is vue3.0 supported? HOT 3
- cube effect ios is not click
- 更 HOT 1
- Vue-awesome-swiper on the Macbook, Monterey 12.2.1, M1 HOT 1
- To make it more accessible we should have the option to use ul and li as the tags for the slider and the slider items HOT 1
- Can't install vue-awesome-swiper 4.1.1 HOT 1
- IOS下轮播图在返回滑动的时候,图片显示当前激活图片但是随后又会跳转到上一张
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-awesome-swiper.