metafizzy / flickity Goto Github PK

Is there any way to decrease the force of the physics on slide?

Every time I slide, using drag or arrows (even if it is one slide), it bounces quite heavily.

See comparison gifs below:

My flickity instance, loaded with this code:

$('.md-iphone-5 .md-screen').flickity();

single.html flickity instance in the sandbox folder.

How can this be resolved so I can just have the smooth transition, rather than a bounce?

I got a request to resume autoPlay after the user have hovered off the element, regardless if the user selected a cell while hovered on.

I'll need to provide code and an example.

When there is only one child element to slide, then wrapAround should have no effect, instead no sliding should be possible at all (left/right arrows inactive).

The sliders are only composited when they begin to move potentially causing some input lag. Have you thought about applying a will-change: transform, or a backface-visibility: hidden to force layer compositing?

I have noticed that if you load a page with flickity running (with autoplay going), then jump to another tab for a couple of minutes then go back it seems to go through 100 slides at once (this is with wrapAround:true)

for example on the demo page, http://flickity.metafizzy.co/

When I touchstart the flickity gallery and then swipe up or down, I would expect for the page to scroll up/down, but nothing happens. I know this is kind of a hard problem, how can you know where the user plans to scroll to? what threshold of horizontal movement constitutes the desire to swipe vs. just a wandering vertical scroll...

One advantage of keeping it the way it is now (besides not overcomplicating things) is that I can touchstart on the gallery, then drag my finger down below the gallery before flicking, so I can view the entire slide while swiping.

While it's obvious that flickity is meant to be based on a sliding transition, I was curious if there's any plans on implementing an optional Fade based transition/animation instead of the slide?

I would love to replace my current hand-rolled image galleries/carousels with flickity in my projects both personal and commercial, but many of them use fading transitions instead of sliding. I'd be more than happy to pre-pay for a commercial license/donate/whatever if it helps that get implemented.

See http://codepen.io/desandro/pen/OPQxpO

Looking at the project page, there seems to be more going on with the image carousel than what's listed... it's adjusting itself and all the images to specific heights—depending on a media query—seems like either 160px or 400px for height. How is this being specified?

I was going to request some kind of max-height / max-width logic for images anyway: allowing absolute or relative units (?), so one could specify for example that the carousel be no more than some number of rems high and each image no wider than 80% of the width of the carousel, or no wider than 20em, or conform height to the shortest image, etc..

What do you think?

hi
when I use rightToLeft option, the navigation button rotating in opposite direction!
in the attachment image I bold the problem.
tanx

Playing with this great slider, i realize that it doesn't scroll with group of slide. Eg : When i see three slide in the viewport i expect, when i click on the next button, to have the next three slide. Or we just have the capabilities to have the next slide, one by one.
Is it in project ?

Thanks !

When you focus away and or back in a tab ( chrome for windows ) the autoplay seems to skip the time and or return all the way to the front.

Great plugin!

I'm experiencing a little problem with one of my sliders.

// Defined in seperate JS file
function scrollEnd(flickelem) {
    // FLICKITY DragEnd

    if ( flickelem.options.freeScroll ) {
        flickelem.isFreeScrolling = true;
    }
    // set selectedIndex based on where flick will end up
    var index = flickelem.dragEndRestingSelect();

    if ( flickelem.options.freeScroll && !flickelem.options.wrapAround ) {
    // if free-scroll & not wrap around
    // do not free-scroll if going outside of bounding cells
    // so bounding cells can attract slider, and keep it in bounds
    var restingX = flickelem.getRestingPosition();
    flickelem.isFreeScrolling = -restingX > flickelem.cells[0].target &&
    -restingX < flickelem.getLastCell().target;
    } else if ( !flickelem.options.freeScroll && index == flickelem.selectedIndex ) {
    // boost selection if selected index has not changed
    index += flickelem.dragEndBoostSelect();
    }
    // apply selection
    // TODO refactor this, selecting here feels weird
    flickelem.select( index );
}

// Inside a <script> tag inside the document
$(function(){
    $(document).ready(function(e) {
        var cellCount = $('.gallery-cell').length;
        var canWrapAround = false;
        if(cellCount > 1) canWrapAround = true;
        $('.text-slider').flickity({
            accessibility: true,
            autoPlay: false,
            cellAlign: 'center',
            cellSelector: undefined,
            contain: true,
            draggable: true,
            freeScroll: true,
            friction: 0.2,
            imagesLoaded: true,
            initialIndex: 0,
            percentPosition: true,
            prevNextButtons: false,
            pageDots: false,
            resize: true,
            rightToLeft: false,
            watchCSS: false,
            wrapAround: canWrapAround
        }).mousewheel(function(e) {
            e.preventDefault();
            var flickelem = Flickity.data(this);

            if (e.deltaX) {
                flickelem.x += e.deltaX * e.deltaFactor;
            }
            else if (e.deltaY) {
                flickelem.x += e.deltaY * e.deltaFactor;
            }
            scrollEnd(flickelem);
        });
        $(window).load(function(e) {
            $('.text-slider').flickity('resize');
        });
    });
});

I am using the jQuery mousewheelplugin to support scrolling inside flickity. But somehow on mobile devices occasionally I can't reach the last cell. It always flicks back to the previous one. Could it be a bug or could it be a fault of me?

growradio via Twitter

on my iphone 5s i feel like the arrow buttons have too much lag. Meaning i am inclined to tap another time bc movement is too late

Yup, I felt this too. Currently, Flickity is using on click event. I'll have to investigate to see if this can be improved.

I have setup a asNavFor gallery that controls another gallery as per the docs.

The problem I'm seeing is that there is a transform: translateX( ) being applied to the flickity-slider div. The value of the transform seems to be different depending on the width of the viewport but essentially if is bumping the whole menu to the left, giving it the appearance of right aligned.

I thought this might be because I had dragable: true set which would make room for more items but when I set this to false I see the same behaviour. Further to that, setting that to false actually disables the ability to control the other gallery using this one.

Adding an additional
My settings for gallery b are:

$('.gallery--as-nav-for-b').flickity({
    asNavFor: '.gallery--as-nav-for-a',
    cellAlign: 'left',
    cellSelector: '.gallery-cell',
    contain: true,
    pageDots: false,
    prevNextButtons: false,
    percentPosition: true,
    draggable: true
  });

Cool plugin so far! Testing it now in a prototype for one of our clients.

Lazy Load 'slides' would be a killer feature if you ask me. Also for performance. Are there any plans to implement this?

Good luck in getting to the v1.0 release ! :)

I noticed that images have a few pixels of bottom-spacing due to being inline elements, and the navigation dots are susceptible to being selected; I threw in the following to the CSS, ymmv

.flickity-enabled {
  position: relative;
  user-select: none; // ADDED
  img { display: block; } // ADDED
}

I guess flickity is tracking a debounced window.resize() event to know when to re-layout itself—probably the ideal for nearly every scenario but it could be useful to disable this and be able to trigger it manually, e.g. if tracking a custom 're-layout' event on media-query changes. What do you think?

Hi, awesome plugin you have there. I'm a long time fan of your Isotope plugin and now this? Awesome!

I've been thinking if it's possible to turn on a scrollbar visibility on your carousel ( with wrapAround: false of course) .

I've tried this but doesn't seem to work as it should.

.flickity-viewport {
   overflow-x: scroll;
}

When vertically scrolling on the flickety object on a touch device, the entire page gets janky. Furthremore, when scrolling downward, the flickity object appears to try to reposition itself upward in the viewport by 20-30 pixels or so. This does not occur when scrolling upward but the page scrolling is still janky.

Setting resize to “false” alleviates its severity but the issue persists.

Touch-scrolling outside the flickity object eliminates the issue and results in a smooth scroll.

hi
first of all I have to tanx for your brilliant work. I removed all my previous slider plugins and start to use this as soon as I found it!
but I have an issue, when I call the plugin from js file, it seems the slider did not read the js and it run itself without any js Initialization! I find it out when I changed some options and I noticed that none of them were activated. it run with default option with no jquery call!
what is happening!!?
heres my html:

<div class="slideshow js-flickity" data-flickity-options='{ "autoPlay": 3500, "freeScroll": true, "pageDots": false, "wrapAround": true }'>
    <div class="gallery-cell"><img src="img/slide1.jpg" alt="" /></div>
    <div class="gallery-cell"><img src="img/slide2.jpg" alt="" /></div>
</div>

I had to run my options through html, but I want to call them from js file.
Tanx

Hi, there is a issue when you implement a html form inside a slide, the textform and select tags don't apply the :focus state when clicked, and then as a result the list of options won't open and you can't input text.
However i noticed that when you right click on it, :focus state is applied.
Thanks for this amazing plugin, very fluid!

A. G.

Inside the proto.staticClick method the cell which is saved inside clickedCell is no Cell object.
This causes the utils.indexOf( this.cells, clickedCell ); to fail and always to save clickedCellIndex = -1 and clickedCellElem = undefined.

http://jsfiddle.net/8ctjfrcb/

EDIT
My FIx:

Flickity.prototype.getCell = function( elem ) {
  // loop through cells to get the one that matches
  for ( var i=0, len = this.cells.length; i < len; i++ ) {
    var cell = this.cells[i];
    if ( cell.element == elem ) {
      return cell;
    }
  }
  return false;
};

Flickity.prototype.getParentCell = function( elem ) {
  // first check if elem is cell
  var cell = this.getCell( elem );
  cell = cell || this.getCell(utils.getParent( elem, '.flickity-slider > *' ));
  return cell;
};

Hi guys,

This seems to happen most of the time if you scale the browser width down, the banner goes out of position:
http://cl.ly/303T1o2N12z2g2

I am experiencing some strange scrolling behaviour in Chrome 40.0.2214.69 on IOS, specifically on the freescroll examples of the demo.
When scrolling from either direction the gallery will sometimes disappear altogether and then reappears a second later at a different cell location. Also on occasion it will just jump straight to the last cell. This all seems to happen when scrolling quickly but isn't specifically just a quick scrolling problem.

I have tested same instances—local install and on your demo—in safari and it works smooth and flawlessly in that browser.

1. how do I build the latest changes?
2. its ok to use it in commercial site untill you release it for sell and than buying?

As seen in asNavFor example: http://codepen.io/desandro/pen/wByaqj

Good job on this library. Very well organised and easy to use.

Many image galleries will implement a full screen image feature that can toggle an image to full screen. Is there a plan to implement something similar?

Having an issue with my flickity collapsing and the height being adjusted to ridiculous numbers when I resize my window. Here is a link to check it out, http://79.170.44.98/saublesmartsolutions.com/

Will this feature come in the future?

On iPad, I'm able to do a super powerful flick sometimes. Like start at cell 0 and the flick zooms past cell 10 before snapping back into place.

It's a timing issue or touch position issue most likely.

Is it planned to have a adaptive height or we just build it with event?

Thank you for this great slider that is really sweeter than others

I think it might be a good practice to implement the events with a preset like "Flickity.select".

Flickity looks exciting, especially to current Isotope and Masonry users.

However, as somebody that can't move to Isotope v2 because of its inability to handle > 100 (see issues #718,#677), I wonder whether Flickity will also be limited to handling small galleries? Flickity looks to have the same source dependencies as Isotope...

I sympathize you've been grappling with this annoying problem for a while now with Isotope.js, but, at least for some of us, it does cast a cloud over Flickity.

Not sure if this is supposed to be this way.
I wanted to disable dragging because it can be annoying when scrolling on mobile devices. Turns out™ it disables the static click too 😁

I think the outline visible in Chrome once you clicked the slider buttons, is not very aesthetically pleasing.

Would be nice to be able to set the slide transition time. Maybe by just setting the end translate coordinate and animate it with CSS.

Flickity.prototype._init() method required to work properly with jquery-bridget.

Is there already an official way to add and position caption texts on top of the slides?

More for aesthetic preference for some, when there's one slide some people prefer to just hide the navigation options. Possible to add this as option? Could either be additional class on Flickity main container as well, and use css to hide them.

Due to the way I integrate Flickity in to the code (it's generated automatically through a jQuery .each()), I was wondering if there was a way to enable a property depending on whether or not a parent .hasClass().

Hi Guys,

Looking good so far, though I'd like an "asNavFor" feature request like flexslider/slick have like this:

http://flexslider.woothemes.com/thumbnail-slider.html

Hi

I was playing around with Flickity and Flickr, and came across a weird issue.

I was using JSFiddle, and sometimes would see a weird issue where the images where not laid out correctly when running. I have managed to reproduce this on every load of the full page now (F5 refresh) .

Here is the link to the JSFiddle: http://jsfiddle.net/samjudson/62qkb5eu/

Here is a screenshot of what it looks like when things go wrong: http://imgur.com/Ytn1NYE

Resizing the window, or clicking Run again and it works ok. Could be an issue with the frame not being loaded when Flickity runs perhaps, so the height information is off?

Hi,

Thanks for this awesome plugin.
I'm trying to use flickity toghether with imagesLoaded for a correct images loading.

I noticed that, if each image is placed into a parent div, imagesLoaded does not load correctly them and layout breaks. To better show the problem I have build the two following links:

1. Correct image loading:
   flickity.virgotest.com/imgnodiv.html

2. Broken image loading:
   flickity.virgotest.com/imgdiv.html
   in this example each img tag is inside a div element.

I attach below a screenshot from the chrome debug console.
I suggest to use chrome to verify the issue. Firefox seems to show the layout without breaking, but report an error too.

Giving a parent div to each image is necessary, for example, if you wish to show captions for images.

Maybe ticket #10 could be connect to this?

• Have a flickity with autoPlay: true
• Go to a different browser tab for while
• Return to the flickity browser tab

Expected result: flickity is in previous position

Actual result: flickity scrolls a crazy distance

Hello guys,
I have a little problem on mobile, when i scroll to the bottom, the view don't slide :(
Is it possible to listen only event horizontal ?
Thx

I have AutoPlay and wrapAround activated.
Whenever I switch to another tab for a minute and return to my site with flickity, it seems to be rushing through the animations in order to catch up.

Would be nice to have an option to define the prev/next button svg code. For example:

var flkty = new Flickity( '.flickity', {
  svgViewBox: 'x1 y2 x2 y2',
  svgPath: 'svg path',
  svgTransformLeft: 'translate(x,y)',
  svgTransformRight: 'translate(x,y) rotate(x)'
});

PrevNextButton.prototype.createSVG = function() {
  svg.setAttribute( 'viewBox', this.parent.options.svgViewBox );
  path.setAttribute( 'd', this.parent.options.svgPath );
  var arrowTransform = this.isLeft ? this.parent.options.svgTransformLeft : this.parent.options.svgTransformRight;
};

Using following css causes the bug:

.gallery-cell {
    padding:0 8px;
}

This gets resolved if I resize the window.