peduarte / wallop Goto Github PK

If you set up custom pagination buttons, have a transition effect enabled and click the same custom pagination button more once then the transition effect occurs (it shouldn't) and the slide disappears. See the following example

http://codepen.io/bryanwadd/pen/wKBWwo

This seems to occur because the goTo() function assumes that you are going to a slide that is either above or below the current index and always adds appropriate classes. Adding a simple check to only change the classes if the index number supplied to goTo() is different from the current slide index fixes the problem.

Crossbrowsing test: Works fine in all browsers except on Safari for Windows (7 and 8). The "Next" button do nothing. In Safari for Mac works well.

Hey, I liked it very much. Thanks for this beautiful library :)

I have another suggestion.

Previous and Next modifiers are important for directional animations, I know that but some animations don't need them.

Currently we use this:

 .Wallop--fade .Wallop-item--hidePrevious,
 .Wallop--fade .Wallop-item--hideNext {
  visibility: visible;
  animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

.Wallop--fade .Wallop-item--showPrevious,
.Wallop--fade .Wallop-item--showNext { z-index: 1; }

but this would be cleaner:

 .Wallop--fade .Wallop-item--hide {
  visibility: visible;
  animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

.Wallop--fade .Wallop-item--show { z-index: 1; }

I think showClass and hideClass options would be great.

What do you think about this?

Hi,

While having slider with only two slides and carousel on, you can notice that the isForward variable is always wrong on the second slide. This causes the silder to animate the other direction than expected.

It's the same issue as mentioned in #43, wich was solved only partially.

This happens due to the ambiguity of the next / previous slides. It's the same index (0) in fact and therefore it is impossible to decide the direction here:

var isForwards = (index > this.currentItemIndex || index === 0 && this.currentItemIndex === this.lastItemIndex) && !(index === this.lastItemIndex && this.currentItemIndex === 0);
or here

One option is to determine the direction right in the next() and previous() functions and then use it in goTo().

Anyone has a better idea?

First of all thanks for this beautiful script, it could really become the unslider without jquery :o)

I had a little bit hard times to work with multiple sliders on a dynamic generated page, but maybe I am missing some points.

The problem is, that you have different CSS-classes for the first slider ("photo-slider"-class) and the first image of a slider ("wallop-slider__item--current"-class). Maybe I am missing the point, but if you create the page with dynamic and optional content, you have to make a lot of counting and indexes in the backend-code (especially in the model) to differenciate between the first and the rest, and additionally you have to make some ugly if-then-that-questions in the view. This leads to quite a big code-overhead.

Usecase: I have a blogpost with 0 images, 1 image (no slider), 2+ images (one slider) or (2+ images)+ (several sliders). This is probably a normal usecase. In the post-data I have to differentiate (which means flag it somewhere in the data) between 1 image, several images (slider) and several sliders. Hard work...

Last point: Maybe it would be easier to work with ids (for instanciating) rather than classes if it comes to multiple sliders?

Now I do it like this:

var allSliders = document.getElementsByClassName('wallop-slider'),
    iterations = allSliders.length;     
for (var i=0; i < iterations; i++)
{
    if(i > 0)
    {
        var sliderId = allSliders[i].id;
        new WallopSlider('.'+sliderId);     
    }
}

I'm not a pro, so maybe I'm misunderstanding. And it works very good at the end, but with quite an ugly backend-code...

Hi,
I've been using wallop at some websites and I was missing a method which would update wallop's global variables and allow me to dynamically change content.

The error is An instance of Wallop with this selector already exists. I am using Wallop in my FeathersJS app and I am dynamically generating my UI with JavaScript. I instantiate Wallop in my render code and it everything works well. When I leave the tab and go back to it, I see this error and my slides are nowhere to be found.

I'm just referencing the wallop.min.js file. Should I be using npm instead (if so, how do I use it in the frontend)?

EDIT: Adding the Wallop-item--current class to the first item in my carousel makes it at least look presentable when the Wallop instance breaks...which gives me an idea, brb.

Alright, turns out that if I just comment out

for (var i = 0; i < selectorPool.length; i++) {
  if (selectorPool[i] === selector) {
    throw new Error('An instance of Wallop with this selector already exists.');
  }
}

in the unminified version of Wallop and use that, I don't run into any issues. I'm running with that.

Hey
Is there a way to make it work using background-images?

Thanks.

See for yourself - video, pictures move asynchronously in Google Chrome. Tested on Mac OS 10.8.2 and 10.9.3.
I know that this is a bug in Google Chrome on Mac OS, but my english is pretty bad, so can you do a proper bugreport about this to Chromium project?

Hello!

I running with FF 33 under Ubuntu 14.10 and when I add some transition effect the previous, next and goTo buttons don't work property.

I've fallowed the goTo buttons instruction from the docs http://www.pedroduarte.me/wallop-slider/goto.html.

For example, I add wallop-slider--slide.css in head and wallop-slider--slide class to photo-slider div. The slide go foward with next button in the first load but when I try to go back using previous button it doesn't work, same behavior with goTo buttons, in the first load I can go to second picture but after it stops working. In the firebug console don't show anything.

Using wallop-slider--scale is weird. The effect just works going back, from the first picture to the second the effect doesn't happens. And when I am in a picture and click in the goTo button of same picture that I am the picture trigger the effect but the image disappears, like doing the effect from the image to the background, maybe the fix for this is disable the goTo button of the current picture.

The generate code is like this:

    <head>
        <link rel="stylesheet" href="/css/imovel_wallop-slider.css" />
        <link rel="stylesheet" href="/css/imovel_wallop-slider--scale.css" />
    </head>
    <body>
        <div class="col-xs-12 col-md-12">
            <div class="photo-slider wallop-slider wallop-slider--scale">
                <ul class="wallop-slider__list">
                   <li class="wallop-slider__item wallop-slider__item--current">
                       <img src="path/to/image">
                   </li>
                   <li class="wallop-slider__item">
                       <img src="path/to/image2" />
                   </li>
                </ul>
                <button class="wallop-slider__btn wallop-slider__btn--previous btn btn-lg btnws btnws--previous" disabled="disabled"><span class="glyphicon glyphicon-arrow-left"></span></button>
                <button class="wallop-slider__btn wallop-slider__btn--next btn btn-lg btnws btnws--next"><span class="glyphicon glyphicon-arrow-right"></span></button>
            </div>
        </div>
        <script src="/js/WallopSlider.js"></script>
        <script src="/js/script_ws.js"></script>
    </body>

script_ws.js

(function () {
    'use strict';

    // New isntance of WallopSlider
    var photoSlider = new WallopSlider('.photo-slider');
    // goTo API Usage
    var goToBtnClicked = function () {
        var slideNumber = this.getAttribute('data-goto-slide');
        photoSlider.goTo(slideNumber);
    };

    // Loop through buttons and attach click listener
    var goToBtns = document.querySelectorAll('.goto');
    for (var i = 0; i < goToBtns.length; i++) {
        goToBtns[i].addEventListener('click', goToBtnClicked);
    }
    ;

})();

When I don't use any effect everything works fine.

If there are no prev/next buttons set, eg. because you just want to slide to specific slides, the script breaks.

Quick solution would be something along the lines of:

if( buttonNext != null ) {
 // add events
}

I've got a setup with multiple sliders on a page all using a slide animation. The issue is that only one actually animates as the other ones seem to get their classes stripped (they still advance but without animation)
It seems the issue happens due to the addClass code in WS.goto() or possibly the removeAllHelperSettings.

Do you have any insights on what is happening there?

I get this error when using the pagination buttons (both previous/next) and reaching the end of all the items:

Uncaught TypeError: Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present.

It points me to the WallopProto.updatePagination method. I will investigate this and try to fix it but I thought you should know. Have you experienced this before?

Implement an autoplay option (e.g. called autoPlay), which is a boolean that says whether the slider should slide automatically. There should also be another option (e.g. called interval), which is an integer that says after how many ms the slide should change when autoplay is enabled. That would be really cool :-)

Thanks for your work!

Thanks for making this, it's great. However I ran into the following issue when implementing today and wondering if you have some thoughts?

{exception} Object doesn't support this action

and it points to:

WallopProto.createCustomEvent = function () {
    var _this = this;
    this.event = new CustomEvent('change', {
      detail: {
        parentSelector: _this.selector,
        currentItemIndex: Number(_this.currentItemIndex)
      },
      bubbles: true,
      cancelable: true
    });
  };

Hey, this is more related to the examples you provided I guess but just in case you'd like to correct it anyway:

• in the js
  this.buttonNext.setAttribute('disabled'); should be
  this.buttonNext.setAttribute('disabled', 'true');
  Same for buttonPrevious
• in the fade css there needs to be a fadeIn effect on show-previous/next otherwise forward (next) navigation doesn't fade.

Thanks for the great slider btw!

The zip file https://github.com/peduarte/wallop-slider/archive/exercise.zip, which is linked on the documentation webpage, contains rather old code. Hence, the code should be updated. Maybe it is also better to add the exercises to the repository and provide the current GitHub master as a download.

First of all, many thanks for Wallop, I use it for tons of various tasks recently 🙏

On one of these projects we handle dependencies with bower, and I have a gulp task that pick the main files based on the bower.jsons and moves them during the build process. For Wallop this is currently not happening, because there is no "main": specified.

Can you add this please?

Hey mate!

Firstly, thank you so much for this very useful plugin!

I've added an autoplay function and I'm trying to add a restart after the user clicks on his keyboard on the left or right arrow. Problem, if you click more than once on one of the arrow, the slide goes weird ^^

Here is a pen of my work : http://codepen.io/Le-future/pen/Nxexrw

Don't hesitate to press more than twice the arrow of your keyboard to see the problem.

Thanks by advance for any help :-)

Hello. Tell me please how to make your slider spin automatically. Many thanks.

This makes it difficult to activate the appropriate animations or transitions unless that is really what one is aiming for, but I would think the expected behavior would generally be to have consistent transitions. Perhaps include --first and --last classes on Wallop items, or a new option to include in the slider declaration.

Could you please state what is the license of wallop-slider's script files, css files and other files?

The slider is not displayed on Android mobile ! tested with Chrome and the native browser (Android 5.1.1)

I tried this

import Wallop from 'Wallop';

Says it can't find that module. Any help?

Current version has one column. Sometimes we need two or more columns in carousel and even we need different column count when responsive.

Do you plan to add multiple columns feature?

Hey Pedro,
there is a small error on the Wallop webpage I believe my PR introduced. In the advanced code example options-object, the wSCarousel option is assigned with a = instead of a : and the S should be a capital letter. Had a giant brain fart there, sorry!

What the title says :)

animation simply needs a duplicate -webkit- line. May have this problem in other CSS as well.

I'm just checking out the examples with the default styles (animations.html in v2.1.4) and noticed that the Scale method leaves behind some invisible boxes that obscure the controls. I only played with it very briefly (AKA it can probably be done in a cleaner fashion), but I fixed the issue by containing the slides inside an additional div and implementing some overflow:hidden; and z-index styles.

Well, I'm working with the wSCarousel: true setting...

Minor Issue: The website documents it as wsCarousel! (Note the lowercase "s")

Problem

Previous button becomes disabled on first slide

Fix

// Update prev/next disabled attribute
WallopProto.updatePagination = function () {
    if ((this.currentItemIndex + 1) === this.allItemsArrayLength && this.options.wSCarousel !== true) {
        this.buttonNext.setAttribute('disabled', 'disabled');
    } else if (this.currentItemIndex === 0 && this.options.wSCarousel !== true) {
        this.buttonPrevious.setAttribute('disabled', 'disabled');
    }
};

Problem

Classes are applied incorrectly when looping around (previous from first does not work)

Fix

// Callback for when previous button is clicked
WallopProto.onPreviousButtonClicked = function () {
    if(this.currentItemIndex + 1 === 1 && this.options.wSCarousel === true) {
        this.goTo(this.allItemsArrayLength);
    } else {
        this.goTo((this.currentItemIndex + 1) - 1);
    }
};

I am unable to select content/interact with the currently viewed item when using wallop--fade.css.

Hi Peduarte, you are a genius! Wallop is awesome.
I'm Andrea a Developer from Italy :-)

Can i use Wallop in my new front-end framework?
take a look: https://github.com/afmarchetti/alux

Thank you!
Andrea.

Solution: Use this polyfill instead

https://github.com/peduarte/wallop-slider/blob/master/css/wallop-slider--fold.css
This:
@-webkit-keyframes foldright {
0% {
-webkit-transform: rotateY(90deg);
}
}
@-moz-keyframes foldright {
0% {
-webkit-transform: rotateY(90deg);
}
}
@-ms-keyframes foldright {
0% {
-webkit-transform: rotateY(90deg);
}
}
@Keyframes foldright {
0% {
transform: rotateY(90deg);
}
}
should be:
@-webkit-keyframes foldright {
0% {
-webkit-transform: rotateY(90deg);
}
}
@-moz-keyframes foldright {
0% {
-moz-transform: rotateY(90deg);
}
}
@-ms-keyframes foldright {
0% {
-ms-transform: rotateY(90deg);
}
}
@Keyframes foldright {
0% {
transform: rotateY(90deg);
}
}

In order to have proper circular animations (sliding carousel) we need to know if the user is navigating forwards or backwards.

A direction variable must be implemented to store the direction value.
This will ensure the correct classes are added to the next or previous items based on the direction of the user.

If anyone is willing to take this up and need more info, let me know. Otherwise, I'll crack on with this as soon as I do.

Will assign it to myself if i start progress.

✌️

In componentWillMount, I add an event listener to Wallop.

this.wallop = new Wallop(document.querySelector('.Wallop'));
this.wallop.on('change', this.handleWallopChange);

In componentWillUnmount, I want to remove the listener

this.wallop.$selector.removeEventListener('change', this.handleWallopChange);

This doesn't work since Wallop's implementation of on uses an anonymous function. Is it possible to use the callback event instead and perhaps add an off method? Thanks.

So I have this weird transition bug when using the fade transition. The fade transition works as expected on all images except the last one. When the last image should be fading to the first image, the fading is failing. There is a flash instead of a smooth fade.

I encountered this on a website I'm building, and it took me some time to locate the cause. The bug seems to only occur if there is a wrapping div with a background color set. Did I say it was a weird bug?

To illustrate I cloned your Codepen with the simple fade transition:
http://codepen.io/peduarte/pen/RWbORJ

And just added a wrapping div with a background color:
http://codepen.io/olach/pen/OyyYVE

If you try my forked version (tested in Safari and Chrome) you should see the transition bug when the last image is fading to the first.

I have no idea why this is happening. I have tried some workarounds with css but with no luck.

Do you have any idea?

Hey,

I just create a new example for Wallop. If you like it maybe you want to add to the examples or your Codepen collection.

Check it out: Wallop with Custom Markup

Thanks.

Is possible reset the timer of the slide when a user click on next prev?

this is the code that i mean http://codepen.io/afmarchetti/pen/oxVeGY

Hi, Can you give an example of how to have wallop auto start and loop through the slides? this is what carousel is for? thanks

I have also noticed that in Firefox it doesn't like it when setAttribute only has one argument i.e.

buttonNext.setAttribute("disabled");

throws the following error:

TypeError: Not enough arguments to Element.setAttribute.

changing to the below removes the error:

buttonNext.setAttribute("disabled","disabled")

Hi, as <form> elements have a length they can't be used as Wallop containers because of this:

if (selector.length > 0) {  
  throw new Error('Selector cannot be an array, Refer to Usage documentation: https://github.com/peduarte/wallop#javascript');
} else {
  this.$selector = selector;
}

Any thoughts how we could like to deal with it? Something like if (selector.tagName !== 'FORM' && selector.length > 0) { perhaps?

Great module by the way, works really well otherwise!

As you can see here, Travis CI does always fail on Pull request. It's a bit confusing to see the checks for a PR fail although it's absolutely fine.

Would be nice to see this fixed 👍

Due to use of a higher z-index for a slide with opacity: 0, the user can only interact with invisible content on the previous slide.

Hello, I love this library but I think improving this tiny detail could make it even better.

If the current slide have buttons or a div with scroll they won't work unless you send the previous slides back (z-index: 0) at the end of the animation.

You'll probably find a better solution but changing this in the wallop--fade.css fixed the issue for me:

/*
.Wallop--fade .Wallop-item--hidePrevious,
.Wallop--fade .Wallop-item--hideNext { z-index: 2; }*/
.Wallop--fade .Wallop-item--showPrevious,
.Wallop--fade .Wallop-item--showNext { z-index: 1; }

/========== FADE ANIMATIONS ==========/
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
z-index: 2;
}
99% {
opacity: 0;
z-index: 2;
}
100% {
opacity: 0;
z-index: 0;
}
}
@-moz-keyframes fadeOut {
0% {
opacity: 1;
z-index: 2;
}
99% {
opacity: 0;
z-index: 2;
}
100% {
opacity: 0;
z-index: 0;
}
}
@-ms-keyframes fadeOut {
0% {
opacity: 1;
z-index: 2;
}
99% {
opacity: 0;
z-index: 2;
}
100% {
opacity: 0;
z-index: 0;
}
}
@Keyframes fadeOut {
0% {
opacity: 1;
z-index: 2;
}
99% {
opacity: 0;
z-index: 2;
}
100% {
opacity: 0;
z-index: 0;
}
}

#25 mentions adding a destroy method. As I haven't found a destroy method in the codebase, I propose to add one, because it's a very useful feature when implementing Wallop in RWD projects.

The downloadable wallop-slider-exercise throws the error:
Uncaught TypeError: Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present.

Due to the following line:
this.buttonNext.setAttribute('disabled', 'disabled'); (same for buttonPrev).

Needs changing to:
('disabled', 'disabled'); or ('disabled', true);

Code in master branch is correct.

Release Version 2.

Add to bower and manage tags
Create variations of the slider - backbone, angular, browserify...
Add destroy method
Add observer option (won't attach click handlers, etc. only observe you user can have full control via API)
Modify goTo to use proper indexing (starting at 0)
Cleanup repo
Re-do website and documentation
The way HammerJS did it is cool: http://hammerjs.github.io/

I try init Wallop:

import Wallop from 'Wallop'

document.addEventListener('DOMContentLoaded', function () {
  const wallopEl = document.querySelector('.Wallop')
  console.log(wallopEl)
  const Wallop = new Wallop(wallopEl)
})

And receive error Uncaught TypeError: Wallop is not a constructor

Hi,
I tried and failed to link to http://pedroduarte.me/wallop-slider...
TIA
John

1. bower install wallop-slider --save
2. package does not contains required files, only README and .bower
3. https://codeload.github.com/peduarte/wallop-slider/zip/exercise
4. does not exists