loryjs / lory Goto Github PK
View Code? Open in Web Editor NEW☀ Touch enabled minimalistic slider written in vanilla JavaScript.
Home Page: http://loryjs.github.io/lory/
License: MIT License
☀ Touch enabled minimalistic slider written in vanilla JavaScript.
Home Page: http://loryjs.github.io/lory/
License: MIT License
Simple pager like here
What about extend options to change the default CSS class name?
var frame = slider.querySelector('.js_frame');
var slideContainer = frame.querySelector('.js_slides');
var prevCtrl = slider.querySelector('.js_prev');
var nextCtrl = slider.querySelector('.js_next');
So if you visit the lory website on the iphone.. i used chrome and try to swipe say single element fixed with [infinite]
it seems a bit janky going from slide to slide...
On the contrary if you use the arrow keys the slides seem to move smoothly as expected.
Anyone else have a similar issue?
Also tested on safari a bit better but also not as smooth as using the arrow keys...
cheers
use lory in a webpack build and I get this error when I call lory(slider, {});
My code is only what is writen in the Readme.
It seems that _lory2 is due to webpack but I can't say more.
Like in slick slider, you can change the options at certain breakpoints. I'm just wondering if this functionality is available for this plugin and how I would go about implementing it. Thanks
This would be a nice, React component.
lory tries to slide to slides, which are display: none
. I kinda fixed it in my fork, if it's ok I'll PR it.
"validateLineBreaks": "LF"
doesn't allow to validate code on windows. So, I suggest you to remove it, because git will automatically replace linebreaks.
I've only tried this on my iPhone 5 and this old iPad. But... Touching the slider to scroll down causes the image to jump to the first slide. It corrects itself after the next transition.
On my iPhone this happens every time. On this iPad I have to be rather aggressive with the touch/scroll interaction to get it to happen. I loaded the lory.js demo site and confirmed it happens to me on there too using my iPhone. If I get a chance I will look into this myself. But at least wanted to mention it.
Thanks to the fact that you've effectively eleminated any kind of way to directly get in contact you, I am forced to ask my rather simple question in here:
Does the slideshow script support DIRECT jumps to a specific slide? That is, without doing any kind of animation effect, basically switching directly to the selected slide?
TIA,
cu, w0lf.
I am using custom classes for classNameFrame and classNameSlideContainer, the first slider is fine.
All the other sliders work, but the prev/next buttons only work on the first slider.
`(function () {
var School = {
init: function () {
this.sliders = document.querySelectorAll('.js-school-tabs-slider-wrapper');
this.bindEvents();
},
bindEvents: function () {
document.addEventListener('DOMContentLoaded', this.initSlider);
},
initSlider: function () {
if (School.sliders != null) {
Array.prototype.slice.call(School.sliders).forEach(function (element, index) {
lory(element, {
classNameFrame: 'js-school-tabs-slider-frame',
classNameSlideContainer: 'js-school-tabs-slide-container',
infinite: 1,
enableMouseEvents: true
});
});
}
},
}
School.init();
})();`
HTML - more than one of these divs on the page
`
<div class="school-tabs-slider-frame js-school-tabs-slider-frame">
<div class="js-school-tabs-slide-container school-tabs-slide-container">
<div class="school-tabs-slider-item js-school-tabs-slider-item">
<div class="row">
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1"> tab 2CLASS 2</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
</div>
<div class="row">
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS2</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
</div>
</div>
<div class="school-tabs-slider-item js-school-tabs-slider-item">
<div class="row">
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1"> tab 2CLASS 2</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
</div>
<div class="row">
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS 2</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
<div class="col-xs-5ths">
<div class="js-school-class-list-item school-class-list-item" data-class="1">CLASS</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="js-school-tabs-slider-prev js_prev"><</button>
<button type="button" class="js-school-tabs-slider-next js_next">></button>
</div>`
Hello. I rly appreciate the work you are doing for developing good-quality vanilla extensions.
I like lory features. But the only thing that makes me step back to using on my projects is related about how the slides are positioned and the default css styles.
It's well known that inline-block is suposed to not be used for grid-like design (Google it). As is not floated, the browser show it like normal text and also show ugly spaces between them. Ok... you fix it setting font-size:0 and line-height:0.
But this brings a little problem with relative font-sizes in responsive design. I mean when using font sizes according to parent font size: using the em unit. If I use em units to set the content of slides: the content dissappear. Of course... because set a font size according to 0 will gives 0.
Yeah... I know... I can set the font-size using px manually, but in that way I must set the correct font-size for each item inside slides in each media query... using em units will become pointless, and for a lot of people em unit are very very useful. Of course... this will make the css bigger also...
In other hand... setting font-size:0 and line-height:0 seems like some kind of content hiding that may cause SEO penalties. I´m not shure about this... but I would't risk myself to let some bots think that I wanna hide valuable content. And the way bots analize sites changes constantly.
Anyway... Regardless of the points mentioned above... it simply feels like a poor and ugly hack to makes it work.
I suggest using display:block and floating instead. Or maybe, the new display:flexbox and display:grid and makes a fallback.
I hope you have understood me. Sorry for the criticism and also for my bad english. Keep the good work.
Just as the title says. Has anyone else come across this?
Auto computing slide width out of the box.
I tried running the demo HTML files in IE9 and I'm getting an error:
SCRIPT5007: Unable to get value of the property 'contains': object is null or undefined
lory.js, line 127 character 14
This obviously relates to IE9 not supporting classList
if (element.classList.contains(classNameActiveSlide)) {
but including the suggested shim doesn't help either. As far as I can tell, the shim should be able to be included in the page to enable classList functionality, but it doesn't seem to be helping.
Script execution halts when this error is encountered. It looks like the lory HTML is setup correctly, but Forward/Back functionality is broken. I understand that animation is not supported for IE9.
The change in 95aa9d4 is a breaking change but does not increase the major version of this package.
see: 95aa9d4#commitcomment-14328452
Heya! Like I already mentioned on Twitter: Love the slider and lack of compromises to make it nice and modern. Also loving the events, but I do have a question on those though.
I make a lot of use of returnIndex
, but it seems that it doesn't return the right number in the following case:
When you have a slider with multiple items to slide, i.e. 'slidesToScroll:4' but an amount of slides that doesn't fill out the entire slider, i.e. 10. In this case you'd have 3 'pages', two with 4 items and one with 2 items. Unfortunately, on the last page, the 'active' class stays stuck on the 5th item (returnIndex = 4
) which makes little sense to me as this is out of the viewport. Also, it makes that clicking the back button slides back from slide #5 instead of #9, resulting in a weird slide back (one click vs the expected 2) If I up the amount of slides to 12 the behaviour is as expected.
Is this intended or might this be a bug?
Thanks for your time!
I saw this ussue is closed now #13
Is it possible to have dot's pager?
Hi,
Thanks for this excellent carousel, it has just the features I need.
However, I ran into an issue, I reproduced it in a codepen:
http://codepen.io/hellonico/pen/XdZxmp
I'll try to figure out what's going on but you'll probably spot the issue faster.
When I copied the markup + Prerequisted CSS styles from the demo page, slider didn't work. It seems to be because in the demo you actually specify a fixed width for the li
element.
.simple li {
width: 270px;
margin-right: 10px;
}
@media screen and (min-width: 640px ) {
.simple li {
width: 580px;
}
}
@media screen and (min-width: 980px ) {
.simple li {
width: 880px;
}
}
So my question is... is there a way to make it work out of the box, without specifying a width? I feel like it's a bit annoying to specify a fixed width in a responsive context.
To improve the meaningfulness of the 'js_prev' and 'js_next' controls, one should be able to style them differently if they are "active" or not, that is, if clicking them will actually move the slider or not.
For example, the 'js_prev' control does nothing when the slider is at the start position, but the 'js_next' will move the slider, and you may want to show a dull grey left chevron and a bold black right chevron. There should be something such as an 'active' or 'inactive' class (or both) that get added and removed from 'js_{prev,next}' as needed, so that this kind of styling is possible.
Here is my markup:
<div class="slider js_slider" data-behavior="carousel">
<div class="frame js_frame">
<ul class="slides js_slides">
<li class="js_slide">1</li>
<li class="js_slide">2</li>
<li class="js_slide">3</li>
<li class="js_slide">4</li>
<li class="js_slide">5</li>
<li class="js_slide">6</li>
</ul>
</div>
<button type="button" class="js_next">Next Slide</button>
</div>
My JS:
import {lory} from 'lory.js';
module.exports = class Carousel {
constructor(element, app) {
this.carousel = new lory(element, {
infinite: 1,
enableMouseEvents: true
});
}
}
When I click on js_next
nothing happens. If I drag the js_slide
elements with my mouse, the slider works as intended.
http://docs.travis-ci.com/user/pull-requests/#Security-Restrictions-when-testing-Pull-Requests:
A pull request sent from a fork of the upstream repository could be manipulated to expose any environment variables. The upstream repository’s maintainer would have no protection against this attack, as pull requests can be sent by anyone with a fork.
For the protection of secure data, Travis CI makes it available only on pull requests coming from the same repository. These are considered trustworthy, as only members with write access to the repository can send them.
Therefore you should consider running the Sauce Labs tests only if process.env.TRAVIS_SECURE_ENV_VARS === 'true'
. Otherwise you could let Travis run the tests only in PhantomJS so pull requests can be verified to some degree.
A user must click the next or previous control to see the another slide. In some cases, it is nice to have the slides automatically scroll to the next slide after a predetermined amount of time.
Live at: http://beta.mangoweb.cz/respekt/page-homepage.html#slider1
Part fotogalerie/video
include ../mixins/photo
.slider#slider1
.slider-frame.js_frame
ul.slider-slides.js_slides
li.slider-slide.js_slide
+photo('images/tmp/sample10')
li.slider-slide.js_slide
+photo('images/tmp/sample5')
li.slider-slide.js_slide
+photo('images/tmp/sample2')
li.slider-slide.js_slide
+photo('images/tmp/sample8')
li.slider-slide.js_slide
+photo('images/tmp/sample6')
button.js_prev.slider-prev prev
button.js_next.slider-next next
script.
initComponents.push({
name: 'slider',
place: '#slider1',
data: {}
})
.slider
user-select none
&-frame
position relative
font-size 0
line-height 0
overflow hidden
white-space nowrap
&-slides
clearfix()
display inline-block
&-slide
position relative
display inline-block
width 100%
height 0
padding-bottom 56.3743%
.photo
display block
How does it work using Lory? Any idea?
A Flickity Example: http://codepen.io/desandro/pen/wByaqj
code:
.slider.js_multislides.multislides
.frame.js_frame
ul.slides.js_slides
li.js_slide: img(src='image/projects_1.jpg' width='226' height='164' alt='1')
li.js_slide: img(src='image/projects_2.jpg' width='226' height='164' alt='2')
li.js_slide: img(src='image/projects_3.jpg' width='226' height='164' alt='3')
li.js_slide: img(src='image/projects_4.jpg' width='226' height='164' alt='4')
li.js_slide: img(src='image/projects_1.jpg' width='226' height='164' alt='1')
li.js_slide: img(src='image/projects_2.jpg' width='226' height='164' alt='2')
li.js_slide: img(src='image/projects_3.jpg' width='226' height='164' alt='3')
li.js_slide: img(src='image/projects_4.jpg' width='226' height='164' alt='4')
li.js_slide: img(src='image/projects_1.jpg' width='226' height='164' alt='1')
li.js_slide: img(src='image/projects_2.jpg' width='226' height='164' alt='2')
span.js_prev.prev.icon-projects_arrow
span.js_next.next.icon-projects_arrow
.slider
position relative
margin 0 auto
width 226px
.frame
margin 0 auto
width 226px
overflow hidden
white-space nowrap
.slides
margin 0
padding 0
display inline-block
li
position relative
display inline-block
ps: in the rest of the library is great! Thank you for your trouble! :)
http://codepen.io/haggen/pen/kXGjmv
Paginate by slowly dragging the slides to the left and you'll see that the fourth page will only move by 1 block - and if you drag it further enough that it has fewer blocks. I'd say it's an issue with the duplication for infinite scrolling and/or the callback to reset the duplications (after the transition ends).
Also if you paginate backwards you can't get past the second page.
I might be missing something but it appears to me that lory is missing some sort of destroy functionality in it's public API. Having a way of cleaning up eventListeners etc seems somehow crucial to me to in order to make lory usable in single-page applications. Any thoughts/considerations about that?
Is there a way to change how many visible slides based on screen width !! For instance at mobile devices i don't want to 4 small slides , i only want one slide to be visible , Is there a feature where i can do this !!
Thx
Hello.
I currently working replace carousel library from slick to lory.
This work want to centerMode option of slick, but lory is not implement centerMode option.
Are you planning to do it in the future?
Thanks.
If we append the slider in the dom and load a lory.js slider, the calcul can be wrong, because the dom haven't already registered the width of the slides.
It can be restored with a call to .reset()
the first time a slide animation is triggered, for exemple.
That way the calcul is done when the user send the first slide.
Hello @meandmax, I have noticed an issue when importing the library on browserify.
As the "main" property in package.json refers to "dist/lory.js", there is a wrapper on the library apparently and the module imported looks like this,
{
__esModule: true,
lory: function() { ... }
}
I moved back to v1.2.6 which works fine actually.
Thank you very much !
I think about reorganizing the code in modules with es6 features and bundle everything up with webpack and babel?
What`s your thoughts on that?
Here some changes, what it could look like?
https://github.com/meandmax/lory/tree/feature/webpack
cheers Max
Problem:
lory.destroy() does (currently broken see #84) unregister the slider but the styles on the js_slide element remain which can cause odd optical behaviour.
Solution:
Maintain added styles as object and on delete match against the current inline styles of the element (to prevent foreign styles to get deleted) and remove the ones added by lory before.
Update:
The items cloned by lory don't get removed on .destroy() too.
IE9 also supported but with graceful degradation. Everything works fine.
When setting up the slider with infinite scrolling, and then detroying Lory, the clones of first and last elements are not removed.
Hi, lory.
I have some issue with lory.js.
In lory babel builder version, default is reserved keyword in IE8.
So it takes break with load lory, even it does not use it.
Babel 6.7.4 version fixed this issue with es3 plugin.
Could you review this issue?
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
default should be ['default']
Follow this release version.
https://github.com/babel/babel/releases/tag/v6.7.4
https://github.com/meandmax/lory/blob/master/src/lory.js#L301
Change to:
if (typeof nextIndex !== 'number')
Hi Meandmax, you are a genius! lory is awesome.
I'm Andrea a Developer from Italy :-)
Can i use lory in my new front-end framework? take a look: https://github.com/afmarchetti/alux
It would be great to add a slider as lory, obviously with the credits and the license you want.
Thank you for your great job,
have a nice day.
Andrea.
Can we have a list of supported browsers ?
First of all, thanks for the great non-jQuery slider, there aren't many of them.
Is there any trick how to make lory work as a vertical slider? Or would this require updates to the lory itself?
Thanks
Hi. I couldn't see any auto-change option, have I missed it? If this feature's not implemented, are you planning to do it in the future?
Is:
The .destroy() method of a lory instance has no effect => the event listeners are still active after calling.
Should:
The .destroy() should remove all eventListener responsible for that instance.
Update:
Problem are the nested addEventListener calls in onTouchStart
which gets invoked by addEvenListener and on delete removed by removeEventListener. But the eventListeners added inside onTouchStart remain...
Could you, please, check if the JQuery plugin returns the correct result for 'lory' method?
Because, I get back the JQuery object only.
Thanks a lot.
Hi lory.
First of all, Thanks good lib.
I found some issue in lory.
I moved to 3rd panel, and then I tried to resize window.
And bug appeared in here, lory panel go to 1st panel.
So, I tried such as code.
But I think it should be default.
Can you give me some advice?
Thanks for your effort.
// persist panel index
elFlick.addEventListener('on.lory.resize', (e) => {
this.flicking.slideTo(this.currentFlickingIndex);
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.