filamentgroup / snapper Goto Github PK

it would be great if the readme could mention how to feature detect the css scroll snap feature and prevent the polyfill from beeing loaded when the browser supports it natively

Choose to patch shoestring or work around it

iPhone iOS 9

worth testing:

1. scroll down to carousel
2. swipe to advance carousel
3. try to scroll back up, with touch starting on carousel

Thanks for your lib ;)

https://github.com/filamentgroup/toss

URL: http://filamentgroup.github.io/snapper/demo/breakpoints.html

In Firefox and Edge (on Windows 10), there is a slight overflow on the right edge. This causes the Next button to scroll the images only a few pixels, every other time. This issue also appears on iPhone 6 in landscape mode.

aside from initializing via the enhance event, it should be simple to make this jquery/shoestring independent

Do we have a support vertical snap points, I'm just curious to get an example so I can have a play with it. Currently the demo contains only horizontal slides example.

If we need to use jQuery.noConflict(), because there are other libraries (like Prototype, thanks Magento..), nothing is working anymore.

better for history population mgmt probably

Snapper currently includes the automatic init at the bottom of the main source. It would be nice to split that out so that one can include the JS from the npm module and initialize on demand.

Sometimes scrolling thru example https://master-origin-snapper.fgview.com/demo/nextprev.html does not properly scroll the images.

When clicking very fast on the "next" button with ipad on latest ios10.x sometimes there is a offset left

Hi,
I'd like to be able to trigger the sliding of the next slide every 5 seconds...
Right now, I did it using a setInterval + something like

$('.snapper_nextprev_next').trigger('click');

but this is causing a side effect while the click event is bubbling...

is there another way to call the next() method ?

Thank you for your help

http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#javascript-namespaces-js

Imo it would make it simpler to separate the classes are used for javascript actions and styling. I can submit a pull req if any interest

Error that shows sometimes is:

TypeError: $items[startSlide] is undefined

When that happens, any attempt to set the active slide after resize will end up scrolling to 0 and losing the placement. We should verify if this happens in Snapper's demos too.

Steps to reproduce

1. Go to https://master-origin-snapper.fgview.com/demo/ with iOS mode in Chrome
2. Navigate to slide 4
3. Rotate device

Wrong slide seen. Slides 1 and 2 are ok.

• open https://master-origin-snapper.fgview.com/demo/nextprev.html
• slide thru a few slides
• turn ipad (ios 10.x latest) portrait/landscape
  -> carrousel shows the first slide instead of the one shown before

These will more robustly hide it

.snapper-enhanced .snapper_pane_crop .snapper_pane,
.enhanced .snapper_pane_crop .snapper_pane {
  /* IE and edge */
	-ms-overflow-style: -ms-autohiding-scrollbar;
	/* Firefox */
	scrollbar-width: none;
}
.snapper-enhanced .snapper_pane_crop .snapper_pane::-webkit-scrollbar,
.enhanced .snapper_pane_crop .snapper_pane::-webkit-scrollbar {
	display: none;
}

Note: keying off the pane_crop here since that's there only when hiding is desired.

https://github.com/filamentgroup/snapper/tree/goto-fix-andscroll

Is it possible to identify the active slide programmatically?

In other words, could I make a call in JavaScript to find out which slide has most recently snapped into view?

The api changed and browsers may/will be dropping support for the old one soon.

Currently you only snap to the next slide if the current slide is dragged all tge way to the middle. This results jn unintentional "snap backs." decreasing default sensitivity to 20% - 30% would be more natural. Also making it configurable it isn't already.
Cool project.

We have pre-enhanced state that shows only the first item in the carousel at full-width. This works well because the items would otherwise stack vertically until widths are set on the items and the parent. It doesn't work well however when items are meant to display at less than 100% width, such as when we show 2 or 4 items at a time. Floats are the reason we hit this issue because they really need a parent and item width to start their layout.

If we move to another model like inlineblock/flexbox/table we'll get a better initial layout and cleaner rendering process.

Greetings from Cloud Four, Filament Group friends! 👋

We've been using this plugin on a recent site we helped design and build. It's so much nicer than the alternatives we've tried on devices. Thank you for making it!

Recently I encountered an issue where sometimes, the snapper_items width will just be plain wrong. As near as I can tell because it isn't consistent, if images haven't loaded yet, it's possible for snapper_items to have a width of 0%, or some number lower than what it should be (100% for two images, for example).

Screenshots or it didn't happen:

Any idea what's going on? I thought it had to do with another plugin, and then maybe with some CSS customizations we'd made for vertical alignment, but removing those things didn't alleviate the problem. I double-checked that we are firing the plugin on ready (as per the docs).

I realize without a self-contained and consistently reproducible test case it's difficult to bug-fix, but a point in the right direction would be greatly appreciated. Thanks in advance! 🙏

Note: this branch is a new/modified verison of the gotofix branch

I expected that the demo on https://master-origin-snapper.fgview.com/demo/#img-f2 would work nearly the same (progressive enhancement) whether JS is enabled or not.

but the site looks very different when javascript is disabled.. I expected that the native css snap point feature would create a similiar experience this javascript lib does

Screen of Firefox Nightly (19-Feb-2020) with disabled JS:

URL: https://filamentgroup.github.io/snapper/demo/

The style sheet is referenced via a http: URL causing it to be blocked as active mixed content by browsers when the demo page is loaded over HTTPS.

See Shoestring issue: filamentgroup/shoestring#141