Stories have the UX of each photo being full screen with some optional caption text (should be able to select text to copy). Click to move to the next one. Swipe right to go back one photo. A timer on each photo automatically flips to the next photo. No left and right arrows.
So the interactions above require a lot of changes to Photo Browser. Is it possible or should I write a Stories component from scratch?
I think you are right, Swiper will most likely work with a little modification! Is that a new component or did I just completely miss that this last half year as I was learning F7?
what would be the proper way to add a response on tap (on an image) to have Swiper move to the next image in the set? Swipe left and right would still be functional. This is just an optional tap to progress through the set for those familiar with Stories in Instagram.
i have an image followed by a text block. i would like the text block text to be selectable. any way to override allowing the mouse/fingerswipe event to pass through and instead select the text?
Click and noswipe will work well for modifying behavior. Will report back on it.
I tried to add @click to swiper-slide but then I don’t know how to reference myswiper to tell it to do slideNext? I set click to go to my method and inside that method want to call slideNext(). Is that the correct pattern or should @click be on the slide-container?
<div class="swiper-slide" @click="gotoNext">
I’ve noticed in the desktop browser that the swiping does not work (click and slide just moves the slide about 20% and next completely flips to next slide). But if I resize the window then swiping works. If I reload at the current size the swiping stops working again. On mobile it doesnt work as well but of course I don’t have the option to resize and test that it then works.
Bumping this up … its still the case that on mobile I cannot swipe right or left fully. It never gets to the threshold to flip to the next image.
On desktop the same behavior except I can resize the window and then it works.
Anything obvious in the above snippet of my Swiper definition? It looks basic to me. Can I use swiper-init even though I have a method that updates the VDOM after login is completed and adds the images from the database?