lukesnowden / fsvs Goto Github PK

Would be good to make a special note in the documention that the html tag needs the .fsvs class.

great source
i have a question
Click on the slide to slide up.
I do not want this action.
What JavaScript should I fix?
Thanks
Warm Regards

Hey,

I have some issues running the slider in Firefox:

• the mouse scroll is acting in reverse (if i scrool up i get the next slide instead of previous)
• i place content in the 4th slide and it appears in the first slide.

What can i do to fix that?

One of the things I dislike the most about full screen scrolling layouts is when I try to scroll all the way to the bottom of a page with my mouse wheel and I have to wait for a transition to end before I can trigger the next one.

A configurable delay before accepting a new mouse wheel scroll would allow more natural feeling scrolling when desired without breaking the full screen scrolling feel.

Hi,

Is it possible to know the direction the user is sliding? i.e. If they go up an event happens and vice versa for down.

Or alternatively, is there a way of custom pagination? I basically want to use text headlines to achieve something similar to this:
http://jsfiddle.net/peterhay/xrqjaxk7/

Thanks

Hey, really love this script.

With touch events enabled on a mobile device (tested on iOS and Android via Chrome debugger), form fields and DOM event listeners (including the fsvs pagination elements) become unresponsive to interaction. If I turn off touch events, everything works as intended.

Your plugin is probably the most reliable vertical slider plugins I've found. I know you said that your having trouble with mobile but on iPhone's it works great.

This is more of a question than an issue but I'm trying to go back to normal scrolling when you've reached the last slide. I have 4 slides using your plugin and as soon as you try to scroll further down the page I'd like to slide down to a normal scrolling area, akin to: http://www.hugeinc.com/

Is this even achievable with your plugin, if so could you point me in the direction of where in your code I should look to try and get this implemented?

fvs-pagination links and other icons with links won't work on touchscreen devices

Hello, great plugin. Is there a way to have a section overflow and scroll?

If I have a image wrapped in a link, the link becomes unclickable.

Eg:

        <p>
            <a href="http://www.google.com">
                <img src="image.jpg">
            </a>
        </p>

Hi Luke, do you have any known issues with Opera?

If you open page from any hash except the first page, the body class gets appended with the first page class as well as the loaded page class.

Example: If I load on the sixth page url.com/#6 the body gets the classes:
active-slide-6 active-nth-slide-2 active-slide-1 active-nth-slide-1

this is pulled directly from your home page
http://luke.sno.wden.co.uk/#archives

Is there a way to have a label for bullets on hover?

Hi,

is there any way i can set the code so that when i get to a slide to run the content from that slide? for example i have a video on slide 3 that i want to start playing automatically when i get to slide3 and to stop when get out of the slide3...

Do you have any plans to deploy FSVS to as an NPM or Bower module?

Hi
Great work!

We can add additional methods to turn off and on of all events?
It can be used, for example, when we opened the modal with scrollbar.

First, thanks Luke for creating this.

I'm working on a demo for my company's Fuel UX controls and am using your plugin. There's a lot of scrolling <pre><code> in the project. The scrolling of the <pre> triggers the scrolling of the FSVS slides.

I looked for a way to disable slide and couldn't find one. I wrote a hack to disable FSVS on mouseover of <pre> with a global flag, but had to edit mouseWheelHandler(). Do you have a suggestion for implementing this? I don't mind creating a pull request, but would be interested in knowing the architecture you'd want.

My suggestion would be to be able to disable slide from within beforeSlide. Something like a return false that would allow my app to decide whether the animation occurs. Any thoughts?

add some more different themes for css .

In HTML source code tag body has some classes http://joxi.ru/DrlMpMnHKGn4mP . On window load plugin delete this classes and adds only their classes. http://joxi.ru/1A5JWJ4U4zkDrE
You can see that at http://i24.by/

Hello,

I'm interested in knowing if it is possible to do looping on carousel? Not just scrolling back to top, but kinda act as infinite scroll.

Kind regards, Morten.

Thanks for the plugin lukesnowden. I ran into an issue when using your slider.
In my page ( with class="fsvs"), I am including the footer using @include('page.footer').

The footer has a contact form. However the input text boxes in it are not editable.

In fact any input text box in the html page is not editable . I am able to click the submit button, but not able to enter anything into the text.
This behaviour is when in the method $.fn.fsvs , mouseDragEvents is set as true.

I want the text boxes to be enabled, so that details could be entered into the form.

var slider = $.fn.fsvs({
autoPlay : false,
speed : 1000,
bodyID : 'fsvs-body',
selector : '> .slide',
mouseSwipeDisance : 100,
afterSlide : function(){
$('.nav').removeClass('top');
},
beforeSlide : function(){
$('.nav').addClass('top');
},
endSlide : function(index) {

                	if( status == 1 ){
                		status = 0;
                		return false
                	}

              $.ajax({
                   url: '{{url('get-next-product')}}',
                   data: {'products_array':products_array},
                   success: function (data) {
                        if(data == 0){
                            return false 
                        }
                        products_array.push( data.id );                    
                        
                        html = list_html(data);
                        $('<div class="slide">'+html+'</div>').appendTo( $('#fsvs-body') );
                   }
               });
                           
                },
                mouseWheelEvents    : true,
                mouseWheelDelay     : false,
                mouseDragEvents     : true,
                touchEvents         : true,
                arrowKeyEvents      : true,
                pagination          : false,
                nthClasses          : 2,
                detectHash          : false,
            });

Kindly help.

Regards
Harris

Is it possible to remove FSVS and it's associated events from the DOM programmatically? For example, in a client-side templating system like Ember or Meteor, views are being swapped on and off of the screen without having to refresh the browser. So when I swap out my FSVS view for a non-FSVS view, I'd like to remove these events. Currently, I'm getting some wonky behavior trying to scroll on the non-FSVS views because the events are still present. Thanks!

Open the link http://luke.sno.wden.co.uk/full-screen-vertical-scroll#slide-3, don't scrolling and look at body classes:

Hey there.

It would be very interesting to have an autoplay option/param? This is too dificult to accomplish?
I implemented your code in this store (http://specialebrides.com) but home page lacks dinamic.

Can you enlight me for an solution?

Regards

I need have 3 sliders with this movement, but in the fourth I need see the home page, and if is possible, if you retourned to top, you can seen the 3 sliders other time.

Hi Luke,
great work! I have tried to add a counter to slider with:

      var totalItems = $('.slide').length;

        var currentIndex = $('.slide').index() + 1;
            $('.num').html(''+currentIndex+'/'+totalItems+'');

        $('#fsvs-body').bind('slid', function() {
            currentIndex = $('.active-slide').index() + 1;
            $('.num').html(''+currentIndex+'/'+totalItems+'');
        });

but when jump from a slide to another the number is not updated.. Any idea or suggestion?
Thanks in advance!

Firefox bug:

If you absolute position an element with CSS, regardless of what slide it is in, it will get thrown into the 1st slide and only display there. And I'm not sure how to fix this.

Here's a screenshot. I have images positioned absolute across 5 different slides. But in Firefox, they all get displayed in the first:

I have 4 slides on my website. The 4th has a large scrollable div so the user can scroll and see the footer. However when they begin to scroll back up the plugin takes them back to the 3rd slide.

Any way to counter this?

I don't know if anyone else ran into this issue, but FSVS prevents me from being able to focus in an input field. I think it has to do with e.preventDefault but haven't had the time to dig further. I will after work.

Cheers

Hi,
Whenever I scroll down the scrip go to the second slide beside a portion of the third slide, and then it jumps up to the top of the second slide (active slide).

But going up is working fine, it slides to the upper slide without a problem.

The current version of the bindKeyArrows() event handler code interferes with the expected native browser behaviour of the up and down arrow keys in the context of a form field.

As an example, let's say you embed a country dropdown list (<select> element and multiple <option> elements) inside of an FSVS slide. When a user interacts with the form field by pressing either the up or down arrow keys to change the selected dropdown option, FSVS erroneous triggers the slideUp() or slideDown() function respectively. In this instance, I believe the event bubbles all the way up the DOM but should probably be intercepted so that it doesn't bubble any further than the <form> element.

Hi, thanks for your hard work on this.

I have a problem, when you tilt your mobile to landscape (happens to me on iphone 6+ ios10) slides 2 and on do not show.

The same happens if you start in landscape and refresh.

This happens with your own demo URL too.

Any ideas?

Many thanks

Hey,

I have what appears to be an event bubbling error when I choose an option in a select box. On choosing an option in a select this triggers a slideToIndex() event. Any ideas on how or where this could happen?

Its an angular select and options on slider are:

{
speed : 1300,
mouseDragEvents : false,
detectHash: true
}

@include border-radius( 100% );

Is not defined anywhere and errors out the compiler.

Hello,
Really Great Plugin, but I was facing issue with, Responsiveness Mobile View, Other Web Links on the page not working..

In Desktops its working fine, but in mobile view, the footer social links and other links are not clickable.

http://tipstatweb.com/214martinstreet

This is my page link.