thebird
Added option to allow multiple slides to be displayed at once
I added an option called "items", which specifies the number of slides to be displayed at once.
I used to have this in the library but in order to make it as flexible as possible I suggest people do that with css instead of within Swipe. Let me know if you completely disagree ;)
I completely disagree with bradbirdsall :). This pull request has a good feature in it, with css I can set up only width of parent element, not how many are shown per page. The only way to improve this pull request would be one more option - number of slides to move when swiped. If I show 3 slides per carousel, I would like it to move 3 slides when swiped.
+1
This is a nice feature to have in swipejs. We are now using Cauldrath fork as we can't figure out how to do it in CSS.
If you really do not want to merge this, can you please, show us an example of how to do it in CSS?
Thanks
if you set the li's width with an !important, you can swipe multiple items at once, only issue I've ran into is now the counter is off, so you can swipe past all the items
ex: if your wrapping div's width is 400px, and you want to show 4 items, set the li's to width: 100px !important
@PeteSchuster Thanks for the CSS tip but because it breaks the counter, this is not an option.
@ henrijs I have sent a pull request to make the slider moving according to the user's slide magnitude. See my pull request https://github.com/bradbirdsall/Swipe/pull/100
This is a must-have feature. There is a way to implement this on the latest version (2)?
Is it still possible to do it with css? I suppose not as the swipe is animating only the two images and so increasing the images viewport does not help. Would it be possible to have a switch which will tell swipe that I want it to animate all of the images so that I can create a slideshow where I have more than one image visible?
I'm also looking forward to see previous "items" feature in Swipe 2.x. I'm working on responsive product carousel.
For mobile width, the slider should show only one product per slide. For tablet, there should be two products per slide. For desktop, there will be four products per slide.
Combining Swipe with JS-library, that outputs the viewport width (such as http://responsejs.com/), this would be possible if there was "items" parameter.
@bradbirdsall using CSS to allow multiple viewable "items" per slider is not trivial. Can you share some code?
If you haven't gotten it to work either, I'll +1 an items option.
I tried to make it work with CSS, but without success... I have to display 3 items and each are 200px.
I tried to set the set "200px !important" on items but the positioning is always using the container size so I have "left: -600px", "left: -1200px"...etc.
I tried to set my container to 200px and remove "oveflow: hidden".
It's better for positionning but animations are not as intended.
I wish to see this feature soon :) Regards.
Tried to do it with CSS as well, didn't work for me. Hope you'll bring this functionality back soon. Thanks.
Yes, being able to have multiple elements visible at the same time is exactly what I need right now. Please bring back the "items" attribute...!
in setup() function after line 57 width = container.getBoundingClientRect().width || container.offsetWidth;
I just added width = width * 0.5; // customized for mobile theme by @ali.asif
to show 2 items at a time in version 2.0.
Hopefully it will help some one .
So, are there any plans on implementing this 4 years later?
There is still interest even 7 years later.
