I am currently employed in a full time position as a software engineer for Pearson UK, building software to allow students around the world sit exams online.
I spend most of my spare time working on my side project vQuiz.
Full Screen Vertical Scroll
Home Page: https://www.lukesnowden.co.uk/full-screen-vertical-scroll/
I am currently employed in a full time position as a software engineer for Pearson UK, building software to allow students around the world sit exams online.
I spend most of my spare time working on my side project vQuiz.
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
Hey,
I have some issues running the slider in Firefox:
What can i do to fix that?
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.
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?
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
@include border-radius( 100% );
Is not defined anywhere and errors out the compiler.
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...
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?
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
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
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
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/
Would be good to make a special note in the documention that the html tag needs the .fsvs class.
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.
Do you have any plans to deploy FSVS to as an NPM or Bower module?
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.
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
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!
Hello, great plugin. Is there a way to have a section overflow and scroll?
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.
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
}
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!
fvs-pagination links and other icons with links won't work on touchscreen devices
Is there a way to have a label for bullets on hover?
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?
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?
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
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:
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.
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.
Open the link http://luke.sno.wden.co.uk/full-screen-vertical-scroll#slide-3, don't scrolling and look at body classes:
On window load, if we look at third slide, plugin says, that active is slideOne and slideThree http://joxi.ru/bmobvbpHO7lZryOne 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
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.
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.