Может ли кто-нибудь помочь мне изменить способ работы этого примера?Я имею в виду, что я хочу, чтобы при прокрутке колесиком мыши или стрелками перемещалось слева направо, а не сверху вниз ... Как этого добиться?Я пробовал весь день сегодня, но, похоже, мне не удалось найти правильное решение.Также, если у кого-то есть другие идеи, чтобы достичь того, к чему я стремлюсь, дайте мне знать :)
function scrollModal() {
var $window = $(window);
var $document = $(document);
//Only links that starts with #
var $navButtons = $(".modalNavLink").filter("[href^=\\#]");
var $navGoPrev = $(".go-prev");
var $navGoNext = $(".go-next");
var $slidesContainer = $(".slides-container");
var $slides = $(".slide");
var $currentSlide = $slides.first();
//Animating flag - is our app animating
var isAnimating = false;
//The height of the window
var pageHeight = $window.innerHeight();
//Key codes for up and down arrows on keyboard. We'll be using this to navigate change slides using the keyboard
var keyCodes = {
UP : 38,
DOWN: 40
}
// Going to the first slide
goToSlide($currentSlide);
$window.on("resize", onResize).resize();
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
$document.on("keydown", onKeyDown);
$navButtons.on("click", onNavButtonClick);
$navGoPrev.on("click", goToPrevSlide);
$navGoNext.on("click", goToNextSlide);
function onNavButtonClick(event)
{
//The clicked button
var $button = $(this);
//The slide the button points to
var $slide = $($button.attr("href"));
//If the slide exists, we go to it
if($slide.length)
{
goToSlide($slide);
event.preventDefault();
}
}; // END onNavButtonClick
// onKeyDown ===========================================================
// Getting the pressed key. Only if it's up or down arrow, we go to prev or next slide and prevent default behaviour
// This way, if there's text input, the user is still able to fill it
function onKeyDown(event)
{
var PRESSED_KEY = event.keyCode;
if(PRESSED_KEY == keyCodes.UP || PRESSED_KEY == 37)
{
goToPrevSlide();
event.preventDefault();
}
else if(PRESSED_KEY == keyCodes.DOWN || PRESSED_KEY == 39)
{
goToNextSlide();
event.preventDefault();
}
}; // END onKeyDown
// onMouseWheel ===========================================================
// When user scrolls with the mouse, we have to change slides
function onMouseWheel(event)
{
//Normalize event wheel delta
var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;
//If the user scrolled up, it goes to previous slide, otherwise - to next slide
if(delta < -1)
{
goToNextSlide();
}
else if(delta > 1)
{
goToPrevSlide();
}
event.preventDefault();
}; // END onMouseWheel
// goToPrevSlide ===========================================================
// If there's a previous slide, slide to it
function goToPrevSlide()
{
if($currentSlide.prev().length)
{
goToSlide($currentSlide.prev());
}
}; // END goToPrevSlide
// goToNextSlide ===========================================================
// If there's a next slide, slide to it
function goToNextSlide()
{
if($currentSlide.next().length)
{
goToSlide($currentSlide.next());
}
}; // END goToNextSlide
// goToSlide ===============================================================
// Actual transition between slides
function goToSlide($slide)
{
// If the slides are not changing and there's such a slide
if(!isAnimating && $slide.length)
{
//setting animating flag to true
isAnimating = true;
$currentSlide = $slide;
//Sliding to current slide
TweenLite.to($slidesContainer, 1, {scrollTo: {y: pageHeight * $currentSlide.index() }, onComplete: onSlideChangeEnd, onCompleteScope: this});
//Animating menu items
TweenLite.to($navButtons.filter(".active"), 0.5, {className: "-=active"});
TweenLite.to($navButtons.filter("[href=\\#" + $currentSlide.attr("id") + "]"), 0.5, {className: "+=active"});
}
}; // END goToSlide
// onSlideChangeEnd ========================================================
// Once the sliding is finished, we need to restore "isAnimating" flag.
// You can also do other things in this function, such as changing page title
function onSlideChangeEnd()
{
isAnimating = false;
}; // END onSlideChangeEnd
// When user resize it's browser we need to know the new height, so we can properly align the current slide
function onResize(event)
{
// This will give us the new height of the window
var newPageHeight = $window.innerHeight();
// If the new height is different from the old height ( the browser is resized vertically ), the slides are resized
if(pageHeight !== newPageHeight)
{
pageHeight = newPageHeight;
//This can be done via CSS only, but fails into some old browsers, so I prefer to set height via JS
TweenLite.set([$slidesContainer, $slides], {height: pageHeight + "px"});
//The current slide should be always on the top
TweenLite.set($slidesContainer, {scrollTo: {y: pageHeight * $currentSlide.index() }});
}};};
scrollModal();
body, div, p{
margin:0;
padding:0;
}
body{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
letter-spacing: 0.0635em;
}
a{
text-decoration: none;
}
.slides-container{
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 10;
}
.slide{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide .centered{
width: 60%;
margin: 200px auto 0;
}
.slide .centered h1{
text-align: center;
}
.slide .centered p{
text-align: center;
margin-top: 20px;
font-size: 20px;
}
#slide-1{
background-color:#ffffff;
}
#slide-2{
background-color: #45949b;
}
#slide-3{
background-color: #778899;
}
#slide-4{
color:#ffffff;
background-color: #291F37;
}
.go-prev, .go-next{
cursor: pointer;
font-weight: bold;
text-decoration: underline;
}
nav{
position: fixed;
top: 50%;
right: 0;
width: 45px;
transform: translateY(-50%);
z-index: 999;
}
nav ul{
list-style: none;
text-align: center;
padding: 0;
margin: auto;
}
nav ul li{
display: block;
}
nav ul li:last-child{
margin-left: 0;
}
#back-to-tutorial{
margin-left: 100px;
}
nav a{
position: relative;
top: 0;
font-weight: normal;
text-align: center;
border: 1px solid #114469;
border-radius: 50%;
background-color: none;
color:#114469;
}
nav a.active{
background-color: #08385d;
border: 1px solid #c00000;
}
@media and all(max-width:400px) {
nav ul{
margin-top: 18px;
}
nav ul li{
margin-right:10px;
margin-bottom: 10px;
}
nav a{
padding: 0px 6px;
font-size: 14px;
}
}
@media all and (min-width:401px) {
nav ul{
margin-top: 23px;
}
nav ul li{
margin-right: 15px;
margin-bottom: 15px;
}
nav a{
padding: 0px 8px;
font-size: 18px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<nav>
<ul>
<li><a href="#slide-1" class="modalNavLink"> </a></li>
<li><a href="#slide-2" class="modalNavLink"> </a></li>
<li><a href="#slide-3" class="modalNavLink"> </a></li>
<li><a href="#slide-4" class="modalNavLink"> </a></li>
</ul>
</nav>
<div class="slides-container">
<div class="slide" id="slide-1">
<div class="centered">
<h1>fullscreen slides with GSAP</h1>
<p>lets go to the <span class="go-next">next slide</span></p>
</div>
</div>
<div class="slide" id="slide-2">
<div class="centered">
<h1>fullscreen slides with GSAP</h1>
<p>lets go to the <span class="go-prev">next slide</span></p>
</div>
</div>
<div class="slide" id="slide-3">
<div class="centered">
<h1>fullscreen slides with GSAP</h1>
<p>lets go to the <span class="go-next">next slide</span></p>
</div>
</div>
<div class="slide" id="slide-1">
<div class="centered">
<h1>fullscreen slides with GSAP</h1>
<p>lets go to the <span class="go-next">next slide</span></p>
</div>
</div>
</div>