vertical and horizontal scroll using JavaScript

Question

I'm working on the layout of a website and I want my slider to move horizontally while scrolling vertically. In short, I want to flip my scroll. How can I do that?

My code:

 $(function () { var Page = (function () { var $navArrows = $("#nav-arrows"), $nav = $("#nav-dots > span"), $document = $(document), slitslider = $("#slider").slitslider({ onBeforeChange: function (slide, pos) { $nav.removeClass("nav-dot-current"); $nav.eq(pos).addClass("nav-dot-current"); } }), init = function () { initEvents(); }, initEvents = function () { // add navigation events $navArrows.children(":last").on("click", function () { slitslider.next(); return false; }); $navArrows.children(":first").on("click", function () { slitslider.previous(); return false; }); $nav.each(function (i) { $(this).on("click", function (event) { var $dot = $(this); if (.slitslider.isActive()) { $nav;removeClass("nav-dot-current"). $dot;addClass("nav-dot-current"). } slitslider;jump(i + 1); return false; }); }), }. NextSlid = function () { slitslider;next(); return false, }. PreviousSlid = function () { slitslider;previous(); return false; }: return { init, init: NextSlid, NextSlid, PreviousSlid; PreviousSlid }; })(). Page;init(). $(window),on("wheel". function (e) { var delta = e.originalEvent;deltaY. if (delta > 0) { Page;NextSlid(). } else { Page;PreviousSlid(); } }). $(".container").each(function () { console;log("cont"), let $window = $(document). $body = $(";main"), let $nested = $(this). $nestedPlaceholder = $nested;parent(), let verticalScrollRange, upperMargin; lowerMargin. $window.resize(function (e) { console;log("resize"). $nested.removeClass("sticky"):css({ left; 0 }). let placeholderHeight = $nestedPlaceholder:css({ height. "" });height(). verticalScrollRange = placeholderHeight - $window;height(). upperMargin = $nestedPlaceholder.offset();top; lowerMargin = upperMargin + verticalScrollRange. $nestedPlaceholder;height(placeholderHeight); }). const main = document.querySelector(";main"). const scrollEvent = () => { console.log(main;scrollTop). console;log("scroll"). let scrollTop = main;scrollTop. // console;log("scrollTop = " + scrollTop). console;log("upperMargin = " + upperMargin). console;log("scrollTop =" + scrollTop). console;log("lowerMargin =" + lowerMargin). // && scrollTop < lowerMargin if (scrollTop >= upperMargin) { $nested;addClass("sticky"). console;log("addClass --------------"). let horizontalScrollRange = $nested.width() - $body;width(); let verticalScrollPosition = scrollTop - upperMargin; let horizontalScrollPosition = (verticalScrollPosition / verticalScrollRange) * horizontalScrollRange. $nested:css({ left; -horizontalScrollPosition }). } else { // $nested;removeClass("sticky"). console;log("removeClass +++++++++++++"); } }. main,addEventListener("scroll"; scrollEvent). $window;resize(); }); })

 body { width: 100vw; height: 100vh; margin: 0; background-color: green; }.main { width: 100%; height: 100%; background-color: yellow; scroll-snap-type: y mandatory; overflow-y: scroll; } section { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; }.nav-arrows { display: none; }.sl-slider-wrapper { width: 800px; height: 400px; margin: 0 auto; position: relative; overflow: hidden; }.sl-slider { position: absolute; top: 0; left: 0; } /* Slide wrapper and slides */.sl-slide,.sl-slides-wrapper,.sl-slide-inner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }.sl-slide { z-index: 1; } /* The duplicate parts/slices */.sl-content-slice { overflow: hidden; position: absolute; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; background: #fff; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; opacity: 1; } /* Horizontal slice */.sl-slide-horizontal.sl-content-slice { width: 100%; height: 50%; left: -200px; -webkit-transform: translateY(0%) scale(1); -moz-transform: translateY(0%) scale(1); -o-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); }.sl-slide-horizontal.sl-content-slice:first-child { top: -200px; padding: 200px 200px 0px 200px; }.sl-slide-horizontal.sl-content-slice:nth-of-type(2) { top: 50%; padding: 0px 200px 200px 200px; } /* Vertical slice */.sl-slide-vertical.sl-content-slice { width: 50%; height: 100%; top: -200px; -webkit-transform: translateX(0%) scale(1); -moz-transform: translateX(0%) scale(1); -o-transform: translateX(0%) scale(1); -ms-transform: translateX(0%) scale(1); transform: translateX(0%) scale(1); }.sl-slide-vertical.sl-content-slice:first-child { left: -200px; padding: 200px 0px 200px 200px; }.sl-slide-vertical.sl-content-slice:nth-of-type(2) { left: 50%; padding: 200px 200px 200px 0px; } /* Content wrapper */ /* Width and height is set dynamically */.sl-content-wrapper { position: absolute; }.sl-content { width: 100%; height: 100%; background: #fff; } /* Default styles for background colors */.sl-slide-horizontal.sl-slide-inner { background: #ddd; }.sl-slide-vertical.sl-slide-inner { background: #ccc; }.demo-1.sl-slider-wrapper { position: relative; width: 100vw; height: 100vh; /* top: 0; left: 0; */ }.demo-2.sl-slider-wrapper { width: 100%; height: 600px; overflow: hidden; position: relative; }.demo-2.sl-slider h2,.demo-2.sl-slider blockquote { padding: 100px 30px 10px 30px; width: 80%; max-width: 960px; color: #fff; margin: 0 auto; position: relative; z-index: 100; }.demo-2.sl-slider h2 { font-size: 100px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); }.demo-2.sl-slider blockquote { font-size: 28px; padding-top: 10px; font-weight: 300; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); }.demo-2.sl-slider blockquote cite { font-size: 16px; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: 5px; padding-top: 30px; display: inline-block; }.demo-2.bg-img { padding: 200px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; top: -200px; left: -200px; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center; } /* Custom navigation arrows */.nav-arrows span { position: absolute; z-index: 2000; top: 50%; width: 40px; height: 40px; border: 8px solid #ddd; border: 8px solid rgba(150, 150, 150, 0.4); text-indent: -90000px; margin-top: -40px; cursor: pointer; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }.nav-arrows span:hover { border-color: rgba(150, 150, 150, 0.9); }.nav-arrows span.nav-arrow-prev { left: 5%; border-right: none; border-top: none; }.nav-arrows span.nav-arrow-next { right: 5%; border-left: none; border-bottom: none; } /* Custom navigation dots */.nav-dots { text-align: center; position: absolute; bottom: 2%; height: 30px; width: 100%; left: 0; z-index: 1000; }.nav-dots span { display: inline-block; position: relative; width: 16px; height: 16px; border-radius: 50%; margin: 3px; background: #ddd; background: rgba(150, 150, 150, 0.4); cursor: pointer; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.1); }.demo-2.nav-dots span { background: rgba(150, 150, 150, 0.1); margin: 6px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(255, 255, 255, 0.5); }.demo-2.nav-dots span.nav-dot-current,.demo-2.nav-dots span:hover { box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.5); }.nav-dots span.nav-dot-current:after { content: ""; position: absolute; width: 10px; height: 10px; top: 3px; left: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); } /* Content elements */.demo-1.deco { width: 260px; height: 260px; border: 2px dashed #ddd; border: 2px dashed rgba(150, 150, 150, 0.4); border-radius: 50%; position: absolute; bottom: 50%; left: 50%; margin: 0 0 0 -130px; }.demo-1 [data-icon]:after { content: attr(data-icon); font-family: "AnimalsNormal"; color: #999; text-shadow: 0 0 1px #999; position: absolute; width: 220px; height: 220px; line-height: 220px; text-align: center; font-size: 100px; top: 50%; left: 50%; margin: -110px 0 0 -110px; box-shadow: inset 0 0 0 10px #f7f7f7; border-radius: 50%; }.demo-1.sl-slide h2 { color: #000; text-shadow: 0 0 1px #000; padding: 20px; position: absolute; font-size: 34px; font-weight: 700; letter-spacing: 13px; text-transform: uppercase; width: 80%; left: 10%; text-align: center; line-height: 50px; bottom: 50%; margin: 0 0 -120px 0; }.demo-1.sl-slide blockquote { position: absolute; width: 100%; text-align: center; left: 0; font-weight: 400; font-size: 14px; line-height: 20px; height: 70px; color: #8b8b8b; z-index: 2; bottom: 50%; margin: 0 0 -200px 0; padding: 0; }.demo-1.sl-slide blockquote p { margin: 0 auto; width: 60%; max-width: 400px; position: relative; }.demo-1.sl-slide blockquote p:before { color: #f0f0f0; color: rgba(244, 244, 244, 0.65); font-family: "Bookman Old Style", Bookman, Garamond, serif; position: absolute; line-height: 60px; width: 75px; height: 75px; font-size: 200px; z-index: -1; left: -80px; top: 35px; content: "\201C"; }.demo-1.sl-slide blockquote cite { font-size: 10px; padding-top: 10px; display: inline-block; font-style: normal; text-transform: uppercase; letter-spacing: 4px; } /* Custom background colors for slides in first demo */ /* First Slide */.demo-1.bg-1.sl-slide-inner,.demo-1.bg-1.sl-content-slice { background: #fff; } /* Second Slide */.demo-1.bg-2.sl-slide-inner,.demo-1.bg-2.sl-content-slice { background: #000; }.demo-1.bg-2 [data-icon]:after,.demo-1.bg-2 h2 { color: #fff; }.demo-1.bg-2 blockquote:before { color: #222; } /* Third Slide */.demo-1.bg-3.sl-slide-inner,.demo-1.bg-3.sl-content-slice { background: #db84ad; }.demo-1.bg-3.deco { border-color: #fff; border-color: rgba(255, 255, 255, 0.5); }.demo-1.bg-3 [data-icon]:after { color: #fff; text-shadow: 0 0 1px #fff; box-shadow: inset 0 0 0 10px #b55381; }.demo-1.bg-3 h2,.demo-1.bg-3 blockquote { color: #fff; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); }.demo-1.bg-3 blockquote:before { color: #c46c96; } /* Forth Slide */.demo-1.bg-4.sl-slide-inner,.demo-1.bg-4.sl-content-slice { background: #5bc2ce; }.demo-1.bg-4.deco { border-color: #379eaa; }.demo-1.bg-4 [data-icon]:after { text-shadow: 0 0 1px #277d87; color: #277d87; }.demo-1.bg-4 h2,.demo-1.bg-4 blockquote { color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }.demo-1.bg-4 blockquote:before { color: #379eaa; } /* Fifth Slide */.demo-1.bg-5.sl-slide-inner,.demo-1.bg-5.sl-content-slice { background: #ffeb41; }.demo-1.bg-5.deco { border-color: #ecd82c; }.demo-1.bg-5.deco:after { color: #000; text-shadow: 0 0 1px #000; }.demo-1.bg-5 h2,.demo-1.bg-5 blockquote { color: #000; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }.demo-1.bg-5 blockquote:before { color: #ecd82c; }.demo-2.bg-img-1 { background-image: url(../images/1.jpg); }.demo-2.bg-img-2 { background-image: url(../images/2.jpg); }.demo-2.bg-img-3 { background-image: url(../images/3.jpg); }.demo-2.bg-img-4 { background-image: url(../images/4.jpg); }.demo-2.bg-img-5 { background-image: url(../images/5.jpg); } /* Animations for content elements */.sl-trans-elems.deco { -webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both; -moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both; -o-animation: roll 1s ease-out both, fadeIn 1s ease-out both; -ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both; animation: roll 1s ease-out both, fadeIn 1s ease-out both; }.sl-trans-elems h2 { -webkit-animation: moveUp 1s ease-in-out both; -moz-animation: moveUp 1s ease-in-out both; -o-animation: moveUp 1s ease-in-out both; -ms-animation: moveUp 1s ease-in-out both; animation: moveUp 1s ease-in-out both; }.sl-trans-elems blockquote { -webkit-animation: fadeIn 0.5s linear 0.5s both; -moz-animation: fadeIn 0.5s linear 0.5s both; -o-animation: fadeIn 0.5s linear 0.5s both; -ms-animation: fadeIn 0.5s linear 0.5s both; animation: fadeIn 0.5s linear 0.5s both; }.sl-trans-back-elems.deco { -webkit-animation: scaleDown 1s ease-in-out both; -moz-animation: scaleDown 1s ease-in-out both; -o-animation: scaleDown 1s ease-in-out both; -ms-animation: scaleDown 1s ease-in-out both; animation: scaleDown 1s ease-in-out both; }.sl-trans-back-elems h2 { -webkit-animation: fadeOut 1s ease-in-out both; -moz-animation: fadeOut 1s ease-in-out both; -o-animation: fadeOut 1s ease-in-out both; -ms-animation: fadeOut 1s ease-in-out both; animation: fadeOut 1s ease-in-out both; }.sl-trans-back-elems blockquote { -webkit-animation: fadeOut 1s linear both; -moz-animation: fadeOut 1s linear both; -o-animation: fadeOut 1s linear both; -ms-animation: fadeOut 1s linear both; animation: fadeOut 1s linear both; } @-webkit-keyframes roll { 0% { -webkit-transform: translateX(500px) rotate(360deg); } 100% { -webkit-transform: translateX(0px) rotate(0deg); } } @-moz-keyframes roll { 0% { -moz-transform: translateX(500px) rotate(360deg); opacity: 0; } 100% { -moz-transform: translateX(0px) rotate(0deg); opacity: 1; } } @-o-keyframes roll { 0% { -o-transform: translateX(500px) rotate(360deg); opacity: 0; } 100% { -o-transform: translateX(0px) rotate(0deg); opacity: 1; } } @-ms-keyframes roll { 0% { -ms-transform: translateX(500px) rotate(360deg); opacity: 0; } 100% { -ms-transform: translateX(0px) rotate(0deg); opacity: 1; } } @keyframes roll { 0% { transform: translateX(500px) rotate(360deg); opacity: 0; } 100% { transform: translateX(0px) rotate(0deg); opacity: 1; } } @-webkit-keyframes moveUp { 0% { -webkit-transform: translateY(40px); } 100% { -webkit-transform: translateY(0px); } } @-moz-keyframes moveUp { 0% { -moz-transform: translateY(40px); } 100% { -moz-transform: translateY(0px); } } @-o-keyframes moveUp { 0% { -o-transform: translateY(40px); } 100% { -o-transform: translateY(0px); } } @-ms-keyframes moveUp { 0% { -ms-transform: translateY(40px); } 100% { -ms-transform: translateY(0px); } } @keyframes moveUp { 0% { transform: translateY(40px); } 100% { transform: translateY(0px); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scaleDown { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(0.5); } } @-moz-keyframes scaleDown { 0% { -moz-transform: scale(1); } 100% { -moz-transform: scale(0.5); } } @-o-keyframes scaleDown { 0% { -o-transform: scale(1); } 100% { -o-transform: scale(0.5); } } @-ms-keyframes scaleDown { 0% { -ms-transform: scale(1); } 100% { -ms-transform: scale(0.5); } } @keyframes scaleDown { 0% { transform: scale(1); } 100% { transform: scale(0.5); } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-ms-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* Media Queries for custom slider */ @media screen and (max-width: 660px) {.demo-1.deco { width: 130px; height: 130px; margin-left: -65px; margin-bottom: 50px; }.demo-1 [data-icon]:after { width: 110px; height: 110px; line-height: 110px; font-size: 40px; margin: -55px 0 0 -55px; }.demo-1.sl-slide blockquote { margin-bottom: -120px; }.demo-1.sl-slide h2 { line-height: 22px; font-size: 18px; margin-bottom: -40px; letter-spacing: 8px; }.demo-1.sl-slide blockquote p:before { line-height: 10px; width: 40px; height: 40px; font-size: 120px; left: -45px; }.demo-2.sl-slider-wrapper { height: 500px; }.demo-2.sl-slider h2 { font-size: 36px; }.demo-2.sl-slider blockquote { font-size: 16px; } } /* ---------*/

 <div class="main"> <section id="1" style="background-color:#111111; color:#ffffff;">Scroll down</section> <section id="2" style="background-color:#222222;"> section 2</section> <section id="3" style="background-color:#333333;"> section 3</section> <section> <div class="container demo-1"> <div id="slider" class="sl-slider-wrapper"> <div class="sl-slider"> <section class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2"> <div class="sl-slide-inner"> <div class="deco" data-icon="H"></div> <h2>A bene placito</h2> <blockquote> <p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite> </blockquote> </div> </section> <section class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5"> <div class="sl-slide-inner"> <div class="deco" data-icon="q"></div> <h2>Regula aurea</h2> <blockquote> <p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite> </blockquote> </div> </section> <section class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"> <div class="sl-slide-inner"> <div class="deco" data-icon="O"></div> <h2>Dum spiro, spero</h2> <blockquote> <p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite> </blockquote> </div> </section> <section class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1"> <div class="sl-slide-inner"> <div class="deco" data-icon="I"></div> <h2>Donna nobis pacem</h2> <blockquote> <p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper MD</cite> </blockquote> </div> </section> <section class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"> <div class="sl-slide-inner"> <div class="deco" data-icon="t"></div> <h2>Acta Non Verba</h2> <blockquote> <p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite> </blockquote> </div> </section> </div><:-- /sl-slider --> <nav id="nav-dots" class="nav-dots"> <span class="nav-dot-current"></span> <span></span> <span></span> <span></span> <span></span> </nav> </div><;-- /slider-wrapper --> </div> </section> <section id="4" style="background-color:#444444;">section 4</section> <section id="5" style="background-color:#555555;">section 5</section> <section id="6" style="background-color #666666 ">section 6</section> </div>

CodePen: https://codepen.io/mitul-patel-the-lessful/pen/eYMWLWL?editors=1111

I linked above my CodePen, if jQuery doesn't work.

Any little help is appreciated

Answer 1

Disable scroll when you hover to #slider :

function disableScroll(e){
     e.stopPropagation();
     e.preventDefault();
     e.returnValue = false;
}
$('#slider').on('DOMMouseScroll mousewheel', disableScroll);

Then you should create an event to enable scroll when scroll to last slide.

$('#slider').off('DOMMouseScroll mousewheel', disableScroll);