fullpage.js go directly to clicked slide - javascript

I'm making an one-page website with fullpage.js.
http://alvarotrigo.com/fullPage/examples/continuous.html
If you look at the above example, when switching between 'First slide' and 'Third slide' using the navigation, the animation will jump from the first to the third slide with also going throught the second slide. Is it possible to jump (but still showing animation) directly to the correct slide without showing the slides inbetween?

silentMoveTo(section, slide)
Exactly the same as moveTo but in this case it performs the scroll without animation. A direct jump to the destination.
/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.silentMoveTo('firstSlide', 2);
source: https://github.com/alvarotrigo/fullPage.js#silentmovetosection-slide

Related

Make the user's viewport scroll up upon clicking a certain css class or ID

(for reference I am using DIVI for Wordpress, trying to accomplish this with a code block)
I have a slider/carousel with 7 steps that all have "next" and "previous" buttons for the user to go through. When a user clicks next onto step 2, because the step 1 window is larger than step 2, it means their window is now below step 2 (the "next" and "previous" buttons are at the bottom of each slider).
The buttons currently use a # link to open the next slider which works well, but I need a function that makes it so when one of the links (all have the class ".rv-welcome-stagebutton") is clicked, it moves the window back up to the top of the carousel.
So the user doesn't have to constantly scroll back to the top of each stage.
I have tried using the current code on the page but no luck.
TLDR: what I'm trying to achieve -
User clicks a link with css class ".rv-welcome-stagebutton"
scroll the window up to the top of the section with ID "#rv-welcomeslider-container"
[GIF OF PAGE IN ACTION: https://i.imgur.com/fQiFjnK.gif]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
jQuery(document).ready(function(){
$('.rv-welcome-stagebutton').click(function(){
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});} }
</script>
EDIT : I made few mistakes in my last response, I fixed it now, try it.
I think I can fix this for you. You already use jQuery, so that's great.
First, we gotta see what is a distance between top of the page, and top part of your section (#rv-welcomeslider-container).
We can do this with jQuery offset().top which will return how much is your section far from the top of the document.
So, we write : let getSectionCoords = $("#rv-welcomeslider-container").offset().top;
Now all we have to do is add a click event to every button (.rv-welcome-stagebutton), and make it scroll right to the top of your carousel section (which is getSectionCoords now).
So, here is the final code :
let getSectionCoords = $("#rv-welcomeslider-container").offset().top;
$('.rv-welcome-stagebutton').on('click',function() {
$('body').animate({scrollTop : getHeadingThree}, '500');
});
Let me know if it worked :)

Lock scrolling when element is at top of window, scroll through Bootstrap carousel, then continue scrolling down the page

I'm creating a website and the idea is as once each of the three sections makes contact with the top of the window, the entire page scrolling locks allowing the user to scroll through Bootstrap Carousel slides using the mousewheel event (see https://gyazo.com/03bf86d55006c749cafff0299d67bc50). However, it's no where near perfect and often the scrolling does not fix once a section reaches the top - causing it to skip entire sections.
A function is run on every scroll:
$(window).scroll(function(){
setTimeout(function (){
scrollExploration();
scrollCross();
scrollConception();
}, 80);
})
The scroll*(); functions basically check to see if one of the sections is within 10 pixels of been at the top and if it is, it will scroll the element to the top and lock the scrolling so the user can scroll down to the next slide and the third slide. Once at the third slide, scrolling unlocks so they can proceed to the next section and this repeats itself really.
The issue is figuring out how to get each section to lock to the top all of the time and not skip (I presume the skipping is currently caused if the user scrolls too fast and the function doesn't run in time to activate the check to see if the section is within the 10 pixel range of the top of the window), and often when on the third slide of a section trying to scroll to the next it either sticks or jumps (presumably because of the function running when scrolling keeping it at the current section).
You can disable scrolling by adding/removing this class as needed
body.noscroll {
position: fixed;
overflow-y: scroll;
width: 100%;
}
And add/remove the class with $.addClass(), $.removeClass(), or $.toggleClass()

fullPage.js scroll to a specific Slide on click of button

I am using FullPage.js plugin, When on slide 2, 3, 4 and when the menu bar is visible and when i click the Signup link on the Menu bar i want to have a smooth scroll to the first slide. But the following code seems to jump to the slide 1 directly. Is there a way to make it a cool scroll sliding effect.
Also i want to focus on the Email Text Box upon reaching the slide. That does not seem to happen either.
$('.highlight a').click(function(){
$.fn.fullpage.setAllowScrolling(true, 'all');
$.fn.fullpage.moveTo(1, 0);
$('.input-hero').focus();
});
Testing

BX slider auto and click issue

I have made this slider with auto slide show. I also need manual controls working well on it, even if used with regressively slide switching. Problem comes when I click on labels for navigation very fast and randomly, it gets stuck at some point and doesn't switch to clicked slide instead it moves to its next slide. Please refer this fiddle: http://jsfiddle.net/Bhumika107/zbrcww6a/10/.
I also tried stopping auto and then replaying it on click event of labels:
$(document).on('click','.bx-pager-link',function() {
slider.stopAuto(); // stops auto on click of pager
slider.startAuto(); // starts auto on click of pager
});
But it doesn't make any difference.

Help needed centering thumbnail based on class name - Jquery

I have a slide show component I've been working on that is a mash up of jcycle and jcarousel. It works rather well, yet there is one last feature I'd to add that I cannot figure out. Right now if you click on a thumbnail it will center it in the carousel as long as it's not the first 2 or last 2 thumbs. This works great and I like centering the active thumbnail of the slide show.
The problem I'm running into is if the user hits the play button on the slide show or the next and previous slide buttons, the slide show cycles, yet the active slide thumbnail does not center in the carousel. I've tried unsuccessfully to check if the thumbnail anchor has class, activeSlide, and if so to center it, yet cant seem to get it to work.
Here is a link to the demo page I've been working on.
http://brettjankord.com/standards/slideshows/jslideshow-test2.php
Any help is greatly appreciated!
Put the following at the end of your onBefore method
var carousel = $('#mycarousel').data('jcarousel');
var activeIdx = $('#mycarousel img[src="'+next.src+'"]').closest('a').data('index') -2;
if (carousel)
{
carousel.scroll(activeIdx);
}
Demo at http://jsfiddle.net/JupPn/1/

Categories