Photo Browser in style of Instagram Stories

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?

Can’t you simply use Swiper for that?

1 Like

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?

I think you just missed it :wink:

https://framework7.io/docs/swiper.html

It’s been around since forever…

Now that I have Swiper working in its basic form I see some issues:

  • on iPhone XR (and desktop) I am not able to swipe fully left or right. the image just moves a little and cannot be fully activated

  • the full set of data parameters and method calls for Swiper are not listed on the documentation page it seems https://framework7.io/docs/swiper.html

  • 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?

You sure you have correctly initialized swiper?

It has link to Swiper docs:
https://framework7.io/docs/swiper.html#swiper-api-parameters-methods-and-properties

Swiper has on.click event or just add custom click handler to swiper-slide

Swiper has noSwiping parameters for this

Thank you, missed that link

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.

Here is my definition and init of Swiper.

    <div class="swiper-container swiper-init">
        <!-- Slides wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            {{#each stories}}
            <div class="swiper-slide">
              <img style="width:100%" src="myimage.jpg">
              <div class="block  swiper-no-swiping">
                <p>{{this.story}}</p>
              </div>
            </div>
            {{/each}}
        </div>
    </div>

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?

*Demo link removed

You add slides dynamically there, you have to:

Did this from your suggestion and it seems to have worked.

    <div class="swiper-container swiper-init" data-observer="true">