Basic responsive support

[kadario]

Hi! I added basic responsve support for Sly - for desctop, tablet and mobile to src/sly.js

Added option visibleItems (array - null by default) - you can add [3,2,1] - that will shows 3 slides for desctop, 2 slides for tablet and 1 - for mobile. Also you don't need to add width for slide with css. Also it supports resizing (but it still buggy lil bit), so it useful for sites with % width.

Also added options screen_sm and screen_md with default values ( 768 and 992 px - based on bootstrap). So you can change your responsive breakpoints.

Hope it will be useful for you UPD: you can check how it works here: https://jsfiddle.net/vaedzqnz/

[sergey-dev]

OMG, @Kadarlatino, why so complicated?! I'd not merge this to Sly, as it's not it's purpose at all!

I also did the responsiveness to the markup, and dynamic recalculation of width of elements, with variable amount of those elements per view-port, depending on the breakpoints being used on desktops and mobiles.

Sly shouldn't calculate this, it just binds its events for SLIDEE, to calculate the position and to animate the scrolling, and that's it.

Here's one way to do this on the Bootstrap 4 (I'm sorry for the code snippet, it's just copied and pasted from the real life project, without any adaptation for you, and might be a bit confusing, but will help you to understand the basic idea):

/* ... your SLY instance initialization supposed to be somewhere here ... */

/* clean up the state, for the fresh recalculation of responsive breakpoint */      
$contextSelector.removeAttr('style');                                               
$groupSelector.removeAttr('style')                                                  
    .parent().removeAttr('style');          // sly binds it's own styling           
$groupSelector.css("visibility", "hidden"); // hide content manipulation from user  
$elementsSelector.removeAttr('style');                                              

/* make the new width and style tweaks and constant columns widths */               
var widthOfCard = getWidthWithPaddings($elementsSelector.eq(0));                    
$elementsSelector.each(function () {                                                
    var $this = $(this);                                                            
    $this.css({ width: widthOfCard });                                              
});                                                                                 
$contextSelector.css({"overflow-x":"hidden", "-webkit-overflow-scrolling":"touch"});
$groupSelector                                                                      
    .css({ width: widthOfCard * amountOfCards} )                                    
    .css("visibility", "visible");          // show again                           

/* reload sly, recalculate positions */                                             
slyInstance && slyInstance.reload();                                                

[kadario]

Ok, for example if i need to show on mobile only 1 slide, for tablet - 2 slides and for desktop - 5 slides - is your code can do that?

[sergey-dev]

@Kadarlatino , yes, exactly, this is what I wrote in my comment:

variable amount of those elements per view-port, depending on the breakpoints being used on desktops and mobiles.

it is a job for the coding-slicing, for the responsive layout itself HTML+CSS, but not for the Sly. Sly's purpose is to animate the thing, to move the SLIDEE within your layout, to re-calculate pages and shifts per on per items basis, etc.

[kadario]

@sergey-dev I think it is doesen't matter anymore, because author of project stopped supporting it and planning to create new one from scratch:

"I'm not planning on doing anything with current Sly, since it's a pretty old mess of a code, but I do want to rewrite it from scratch eventually. Can't give you any ETA. Have a lot on my plate atm."