I am trying to get PanelSnap.js work on my wordpresssite.
My coding experience is like read manuals and copy-paste. So I am sorry if basic stuff isn`t right.
I downloaded the panelsnap.js the developer uses on panelsnap.com/panelsnap.js and took the file to upload it to the server (in the child-themes-directory). After that i added this line to the functions.php in the child-theme.
wp_enqueue_script( 'panelSnap', get_template_directory_uri() . '/js/panelsnap.js', array ( 'jquery' ), 1.1, true);
Next step was to use the “Simple Custom CSS and JS”-PlugIn to add some HTML to the Header
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"></script>
<script src="/wp-content/themes/kadence-child/assets/js/panelsnap.js"></script>
<script>
jQuery(function () {
new PanelSnap();
})
</script>
<script src="/wp-content/themes/kadence-child/assets/js/panelsnap.js" defer></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
new PanelSnap();
});
</script>
<script>
var defaultOptions = {
container: document.body,
panelSelector: '> section',
directionThreshold: 50,
delay: 0,
duration: 300,
easing: function(t) { return t },
};
new PanelSnap(options);
</script>
and some JS in to the footer
jQuery(document).ready(function( $ ){
var options = {
// jQuery object referencing a menu that contains menu items
$menu: false,
// CSS selector to menu items (scoped within the menu)
menuSelector: 'a',
// css selector to panels (scoped within the container)
panelSelector: 'section',
// jQuery event namespace that's being used
namespace: '.panelSnap',
// fired before a panel is being snapped
onSnapStart: function(){},
// fired after a panel was snapped
onSnapFinish: function(){},
// fired before a panel is being snapped.
onActivate: function(){},
// An integer specifying the ammount of pixels required to scroll
// before the plugin detects a direction and snaps to the next panel.
directionThreshold: 50,
// The ammount of miliseconds in which the plugin snaps to the desired panel
slideSpeed: 200,
// The jQuery easing animation to use.
easing: 'linear',
// An integer specifying the number of pixels to offset when snapping to a panel.
offset: 0,
// keyboard navigation.
keyboardNavigation: {
enabled: false,
nextPanelKey: 40,
previousPanelKey: 38,
wrapAround: true
},
strictContainerSelection: true
};
jQuery('body').panelSnap(options);
});
If I open the site and the console it gives me this
I tried even to build one of the sites like should be similiar to the developers demo.
https://mobeil.helfersyndrom-ev.de/522-2/
Thank you for your time reading this and i would appreciate every help or critics.