loryjs / lory Goto Github PK

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

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

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'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.

Just as the title says. Has anyone else come across this?

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.

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.

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

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

• no event is binded on prev/next buttons
• carousel starts at index 2 and skip index 1 when playing

I'll try to figure out what's going on but you'll probably spot the issue faster.

I saw this ussue is closed now #13

Is it possible to have dot's pager?

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.

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');

"validateLineBreaks": "LF" doesn't allow to validate code on windows. So, I suggest you to remove it, because git will automatically replace linebreaks.

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.

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.

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.

This would be a nice, React component.

Can we have a list of supported browsers ?

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

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.

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.

@TrySound, @Cordazar

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

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!

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.

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?

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);
});

https://github.com/meandmax/lory/blob/master/src/lory.js#L301

Change to:

if (typeof nextIndex !== 'number')

Hi! Great script.

Can you change bower main to non-minified version?

bower.spec#main

Does anybody has an idea why the tests in IE are failing? I really do not have any idea ...

Thanks for help!

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.

Hi,

I'm encountering a strange issue, I put all the div to width: 100%; but when I look in the Dev tools, it's not work and by the way the translate doesn't work well.

Here is a screen of :

The .frame div fill correctly the container

Do you have an idea about this ?

Thanks for your great works !

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>`

When setting up the slider with infinite scrolling, and then detroying Lory, the clones of first and last elements are not removed.

The change in 95aa9d4 is a breaking change but does not increase the major version of this package.
see: 95aa9d4#commitcomment-14328452

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.

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 !

Simple pager like here

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.

Auto computing slide width out of the box.

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...

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.

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?

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

How does it work using Lory? Any idea?

A Flickity Example: http://codepen.io/desandro/pen/wByaqj

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.

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.

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