Mausrad-Richtung funktioniert nicht

In meinem HTML habe ich Karten integriert und es wird per Mausrad gesteuert Problem ist, wenn ich die Maus scrollen, es zeigt die nächste Karte, die gut ist, aber wenn ich nach oben scrollen, tut es nicht Wechsel zur vorherigen Karte. erwartetes Ergebnis auf scroll up 1-> 5-> 4-> 3-> 2> 1 Reality on scroll up 1-> 2-> 3-> 4-> 5-> 6Mausrad-Richtung funktioniert nicht

flag = 1; 
 
$("body").mousewheel(function() { 
 

 
    if (flag == 0) { 
 
    $("#side1").css("z-index", "999"); 
 
    $("#side2").css("z-index", "9"); 
 
    $("#side3").css("z-index", "9"); 
 
    $("#side4").css("z-index", "9"); 
 
    $("#side5").css("z-index", "9"); 
 
    $("#side1").css("transform", "translateX(0px) scale(1.5)"); 
 
    $("#side2").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side3").css("transform", "translateX(100px)"); 
 
    $("#side4").css("transform", "translateX(100px)"); 
 
    $("#side5").css("transform", "translateX(100px)"); 
 
    flag = 1; 
 

 

 
    } else if (flag == 1) { 
 
    $("#side2").css("z-index", "999"); 
 
    $("#side1").css("z-index", "9"); 
 
    $("#side4").css("z-index", "9"); 
 
    $("#side5").css("z-index", "9"); 
 
    $("#side3").css("z-index", "9"); 
 

 
    $("#side2").css("transform", "translateX(0px) scale(1.5)"); 
 
    $("#side1").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side4").css("transform", "translateX(100px)"); 
 
    $("#side5").css("transform", "translateX(100px)"); 
 
    $("#side3").css("transform", "translateX(100px)"); 
 

 

 
    flag = 2; 
 

 
    } else if (flag == 2) { 
 

 
    $("#side3").css("z-index", "999"); 
 
    $("#side4").css("z-index", "9"); 
 
    $("#side5").css("z-index", "9"); 
 
    $("#side1").css("z-index", "9"); 
 
    $("#side2").css("z-index", "9"); 
 
    $("#side3").css("transform", "translateX(0px) scale(1.5)"); 
 
    $("#side4").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side5").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side1").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side2").css("transform", "translateX(100px)"); 
 

 

 
    flag = 3; 
 

 
    } else if (flag == 3) { 
 
    $("#side4").css("z-index", "999"); 
 
    $("#side5").css("z-index", "9"); 
 
    $("#side3").css("z-index", "9"); 
 
    $("#side1").css("z-index", "9"); 
 
    $("#side2").css("z-index", "9"); 
 
    $("#side4").css("transform", "translateX(0px) scale(1.5)"); 
 
    $("#side5").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side3").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side1").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side2").css("transform", "translateX(100px)"); 
 

 
    flag = 4; 
 
    } else if (flag == 4) { 
 
    $("#side5").css("z-index", "999"); 
 
    $("#side4").css("z-index", "9"); 
 
    $("#side3").css("z-index", "9"); 
 
    $("#side1").css("z-index", "9"); 
 
    $("#side2").css("z-index", "9"); 
 
    $("#side5").css("transform", "translateX(0px) scale(1.5)"); 
 
    $("#side4").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side3").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side1").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side2").css("transform", "translateX(100px)"); 
 

 
    flag = 0; 
 
    } 
 

 
});

#main { 
 
    position: absolute; 
 
    margin-top: 10%; 
 
    left: 35%; 
 
} 
 

 
#side1 { 
 
    height: 200px; 
 
    width: 350px; 
 
    position: absolute; 
 
    transform: translateX(0px) scale(1.5); 
 
    z-index: 99; 
 
    border: 2px solid gray; 
 
    transition: all .5s; 
 
    background-color: #f3f3f3; 
 
    border-radius: 0.035cm; 
 
    background-color: rgb(243, 243, 243); 
 
    box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb(0, 0, 0); 
 
} 
 

 
#side2 { 
 
    height: 200px; 
 
    width: 350px; 
 
    position: absolute; 
 
    transform: translateX(-100px); 
 
    z-index: 9; 
 
    border: 2px solid gray; 
 
    transition: all .5s; 
 
    border-radius: 0.035cm; 
 
    background-color: rgb(243, 243, 243); 
 
    box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb(0, 0, 0); 
 
} 
 

 
#side3 { 
 
    height: 200px; 
 
    width: 350px; 
 
    position: absolute; 
 
    transform: translateX(100px); 
 
    z-index: 9; 
 
    border: 2px solid gray; 
 
    transition: all .5s; 
 
    border-radius: 0.035cm; 
 
    background-color: rgb(243, 243, 243); 
 
    box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb(0, 0, 0); 
 
} 
 

 
#side4 { 
 
    height: 200px; 
 
    width: 350px; 
 
    position: absolute; 
 
    transform: translateX(110px); 
 
    z-index: 9; 
 
    border: 2px solid gray; 
 
    transition: all .5s; 
 
    border-radius: 0.035cm; 
 
    background-color: rgb(243, 243, 243); 
 
    box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb(0, 0, 0); 
 
} 
 

 
#side5 { 
 
    height: 200px; 
 
    width: 350px; 
 
    position: absolute; 
 
    transform: translateX(100px); 
 
    z-index: 9; 
 
    border: 2px solid gray; 
 
    transition: all .5s; 
 
    border-radius: 0.035cm; 
 
    background-color: rgb(243, 243, 243); 
 
    box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb(0, 0, 0); 
 
} 
 

 
#pre { 
 
    height: 30px; 
 
    width: 100px; 
 
    border: 2px solid white; 
 
    font-family: arial; 
 
    font-size: 15px; 
 
    color: black; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    position: absolute; 
 
    margin-top: 15%; 
 
    left: 10%; 
 
} 
 

 
#pre:hover { 
 
    cursor: pointer; 
 
} 
 

 
#nex { 
 
    height: 30px; 
 
    width: 100px; 
 
    border: 2px solid white; 
 
    font-family: arial; 
 
    font-size: 15px; 
 
    color: black; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    position: absolute; 
 
    margin-top: 15%; 
 
    right: 10%; 
 
} 
 

 
#nex:hover { 
 
    cursor: pointer; 
 
} 
 

 
#detail { 
 
    padding-top: 10px; 
 
} 
 

 
.count { 
 
    font-size: 28px; 
 
    padding-left: 10px; 
 
    padding-top: 6px; 
 
    color: #94b4d7; 
 
    transform: scale(1.4); 
 
    font-weight: 400; 
 
    font-family: 'Roboto'; 
 
} 
 

 
.cardheading { 
 
    margin-left: -10px; 
 
    padding-top: 23px; 
 
    font-size: 14px; 
 
    color: #666666; 
 
} 
 

 
.words { 
 
    font-size: 10px; 
 
    margin-left: 2px; 
 
    font-weight: 500; 
 
    color: #616161; 
 
} 
 

 
.wordimg { 
 
    margin-left: 22px; 
 
} 
 

 
.iconic { 
 
    height: 80px; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script> 
 

 
<div class="row"> 
 
    <div id="pre"> 
 
    PREVIOUS 
 
    </div> 
 
    <div id="main"> 
 
    <!---slide one--> 
 
    <div id="side1"> 
 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">1.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading">We listen, while you tell us about</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Project</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Budget </span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Taste </span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words"> Your Aspirations</span><br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!---slide two--> 
 
    <div id="side2"> 
 

 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">2.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading">You listen, when we give you</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Free Design Consultation</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Site Measurement</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Floor Plans</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Quotations</span><br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <!---slide Three--> 
 
    <div id="side3"> 
 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">3.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading text-center" style="margin-left: -120px;">We together</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Choose design teams</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Budget your project</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Plan a timeline</span><br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <!---slide Four--> 
 
    <div id="side4"> 
 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">4.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading" style="margin-left: 30px;">You relax while we</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Execute them</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle all the stress</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Co-ordinate labour teams</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle products</span><br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!---slide Five--> 
 
    <div id="side5"> 
 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">5.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading" style="margin-left: 50px;">You move in</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">All happy</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">With our technical help</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Lifelong support</span><br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
    <div id="nex"> 
 
    NEXT 
 
    </div> 
 
</div>

Fiddle

Quelle

2017-10-17 mr.tanmay

wie ich in Ihrem Code sehen müssen Sie die Bedingungen überprüfen –

aber es funktioniert gut als nächstes Bild, aber nicht vorherige Schaltfläche –

Verwenden event.deltaY die Scroll-Richtung zu identifizieren.

z.B.

if (event.deltaY < 0) 
    flag--; 
    else 
    flag++;

Festcode:

var flag = 1; 
 
var delta = 0; 
 

 
$("body").mousewheel(function() { 
 
    delta += event.deltaY; 
 

 
    if (Math.abs(delta) < 500) 
 
    return; 
 

 
    delta = 0; 
 

 
    if (event.deltaY < 0) 
 
    flag--; 
 
    else 
 
    flag++; 
 

 
    if (flag < 1) 
 
    flag = 5; 
 
    else if (flag > 5) 
 
    flag = 1; 
 

 
    if (flag == 1) { 
 
    $("#side1").css("z-index", "999"); 
 
    $("#side2").css("z-index", "9"); 
 
    $("#side3").css("z-index", "9"); 
 
    $("#side4").css("z-index", "9"); 
 
    $("#side5").css("z-index", "9"); 
 
    $("#side1").css("transform", "translateX(0px) scale(1.5)"); 
 
    $("#side2").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side3").css("transform", "translateX(100px)"); 
 
    $("#side4").css("transform", "translateX(100px)"); 
 
    $("#side5").css("transform", "translateX(100px)"); 
 

 
    } else if (flag == 2) { 
 
    $("#side2").css("z-index", "999"); 
 
    $("#side1").css("z-index", "9"); 
 
    $("#side4").css("z-index", "9"); 
 
    $("#side5").css("z-index", "9"); 
 
    $("#side3").css("z-index", "9"); 
 

 
    $("#side2").css("transform", "translateX(0px) scale(1.5)"); 
 
    $("#side1").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side4").css("transform", "translateX(100px)"); 
 
    $("#side5").css("transform", "translateX(100px)"); 
 
    $("#side3").css("transform", "translateX(100px)"); 
 

 
    } else if (flag == 3) { 
 

 
    $("#side3").css("z-index", "999"); 
 
    $("#side4").css("z-index", "9"); 
 
    $("#side5").css("z-index", "9"); 
 
    $("#side1").css("z-index", "9"); 
 
    $("#side2").css("z-index", "9"); 
 
    $("#side3").css("transform", "translateX(0px) scale(1.5)"); 
 
    $("#side4").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side5").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side1").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side2").css("transform", "translateX(100px)"); 
 

 
    } else if (flag == 4) { 
 
    $("#side4").css("z-index", "999"); 
 
    $("#side5").css("z-index", "9"); 
 
    $("#side3").css("z-index", "9"); 
 
    $("#side1").css("z-index", "9"); 
 
    $("#side2").css("z-index", "9"); 
 
    $("#side4").css("transform", "translateX(0px) scale(1.5)"); 
 
    $("#side5").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side3").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side1").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side2").css("transform", "translateX(100px)"); 
 

 
    } else if (flag == 5) { 
 
    $("#side5").css("z-index", "999"); 
 
    $("#side4").css("z-index", "9"); 
 
    $("#side3").css("z-index", "9"); 
 
    $("#side1").css("z-index", "9"); 
 
    $("#side2").css("z-index", "9"); 
 
    $("#side5").css("transform", "translateX(0px) scale(1.5)"); 
 
    $("#side4").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side3").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side1").css("transform", "translateX(-100px) scale(1)"); 
 
    $("#side2").css("transform", "translateX(100px)"); 
 

 
    } 
 

 
});

#main { 
 
    position: absolute; 
 
    margin-top: 10%; 
 
    left: 35%; 
 
} 
 

 
#side1 { 
 
    height: 200px; 
 
    width: 350px; 
 
    position: absolute; 
 
    transform: translateX(0px) scale(1.5); 
 
    z-index: 99; 
 
    border: 2px solid gray; 
 
    transition: all .5s; 
 
    background-color: #f3f3f3; 
 
    border-radius: 0.035cm; 
 
    background-color: rgb(243, 243, 243); 
 
    box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb(0, 0, 0); 
 
} 
 

 
#side2 { 
 
    height: 200px; 
 
    width: 350px; 
 
    position: absolute; 
 
    transform: translateX(-100px); 
 
    z-index: 9; 
 
    border: 2px solid gray; 
 
    transition: all .5s; 
 
    border-radius: 0.035cm; 
 
    background-color: rgb(243, 243, 243); 
 
    box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb(0, 0, 0); 
 
} 
 

 
#side3 { 
 
    height: 200px; 
 
    width: 350px; 
 
    position: absolute; 
 
    transform: translateX(100px); 
 
    z-index: 9; 
 
    border: 2px solid gray; 
 
    transition: all .5s; 
 
    border-radius: 0.035cm; 
 
    background-color: rgb(243, 243, 243); 
 
    box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb(0, 0, 0); 
 
} 
 

 
#side4 { 
 
    height: 200px; 
 
    width: 350px; 
 
    position: absolute; 
 
    transform: translateX(110px); 
 
    z-index: 9; 
 
    border: 2px solid gray; 
 
    transition: all .5s; 
 
    border-radius: 0.035cm; 
 
    background-color: rgb(243, 243, 243); 
 
    box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb(0, 0, 0); 
 
} 
 

 
#side5 { 
 
    height: 200px; 
 
    width: 350px; 
 
    position: absolute; 
 
    transform: translateX(100px); 
 
    z-index: 9; 
 
    border: 2px solid gray; 
 
    transition: all .5s; 
 
    border-radius: 0.035cm; 
 
    background-color: rgb(243, 243, 243); 
 
    box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb(0, 0, 0); 
 
} 
 

 
#pre { 
 
    height: 30px; 
 
    width: 100px; 
 
    border: 2px solid white; 
 
    font-family: arial; 
 
    font-size: 15px; 
 
    color: black; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    position: absolute; 
 
    margin-top: 15%; 
 
    left: 10%; 
 
} 
 

 
#pre:hover { 
 
    cursor: pointer; 
 
} 
 

 
#nex { 
 
    height: 30px; 
 
    width: 100px; 
 
    border: 2px solid white; 
 
    font-family: arial; 
 
    font-size: 15px; 
 
    color: black; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    position: absolute; 
 
    margin-top: 15%; 
 
    right: 10%; 
 
} 
 

 
#nex:hover { 
 
    cursor: pointer; 
 
} 
 

 
#detail { 
 
    padding-top: 10px; 
 
} 
 

 
.count { 
 
    font-size: 28px; 
 
    padding-left: 10px; 
 
    padding-top: 6px; 
 
    color: #94b4d7; 
 
    transform: scale(1.4); 
 
    font-weight: 400; 
 
    font-family: 'Roboto'; 
 
} 
 

 
.cardheading { 
 
    margin-left: -10px; 
 
    padding-top: 23px; 
 
    font-size: 14px; 
 
    color: #666666; 
 
} 
 

 
.words { 
 
    font-size: 10px; 
 
    margin-left: 2px; 
 
    font-weight: 500; 
 
    color: #616161; 
 
} 
 

 
.wordimg { 
 
    margin-left: 22px; 
 
} 
 

 
.iconic { 
 
    height: 80px; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script> 
 

 
<div class="row"> 
 
    <div id="pre"> 
 
    PREVIOUS 
 
    </div> 
 
    <div id="main"> 
 
    <!---slide one--> 
 
    <div id="side1"> 
 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">1.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading">We listen, while you tell us about</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Project</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Budget </span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Taste </span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words"> Your Aspirations</span><br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!---slide two--> 
 
    <div id="side2"> 
 

 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">2.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading">You listen, when we give you</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Free Design Consultation</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Site Measurement</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Floor Plans</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Quotations</span><br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <!---slide Three--> 
 
    <div id="side3"> 
 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">3.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading text-center" style="margin-left: -120px;">We together</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Choose design teams</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Budget your project</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Plan a timeline</span><br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <!---slide Four--> 
 
    <div id="side4"> 
 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">4.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading" style="margin-left: 30px;">You relax while we</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Execute them</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle all the stress</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Co-ordinate labour teams</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle products</span><br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!---slide Five--> 
 
    <div id="side5"> 
 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">5.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading" style="margin-left: 50px;">You move in</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">All happy</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">With our technical help</span><br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Lifelong support</span><br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
    <div id="nex"> 
 
    NEXT 
 
    </div> 
 
</div>

Update: Etwas einfachere Lösung:

var delta = 0; 
 
$("body").mousewheel(function() { 
 
    delta += event.deltaY; 
 

 
    if (Math.abs(delta) < 500) 
 
    return; 
 
    
 
    delta = 0; 
 
    var $slide = $(".slide.active").removeClass("active"); 
 
    var $newSlide = event.deltaY < 0 ? $slide.prev() : $slide.next(); 
 
    if (!$newSlide.length) { 
 
    $newSlide = event.deltaY < 0 ? $slide.siblings().last() : $slide.siblings().first(); 
 
    } 
 
    $newSlide.css("transform", "").addClass("active"); 
 
    $newSlide.prevAll().css("transform", "translateX(-100px) scale(1)"); 
 
    $newSlide.nextAll().css("transform", "translateX(100px)"); 
 
});

#main { 
 
    position: absolute; 
 
    margin-top: 10%; 
 
    left: 35%; 
 
} 
 

 
.slide { 
 
    height: 200px; 
 
    width: 350px; 
 
    position: absolute; 
 
    border: 2px solid gray; 
 
    transition: all .5s; 
 
    background-color: #f3f3f3; 
 
    border-radius: 0.035cm; 
 
    background-color: rgb(243, 243, 243); 
 
    box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb(0, 0, 0); 
 
    z-index: 9; 
 
} 
 

 
.slide.active { 
 
    z-index: 99; 
 
    transform: translateX(0px) scale(1.5); 
 
} 
 

 
#pre { 
 
    height: 30px; 
 
    width: 100px; 
 
    border: 2px solid white; 
 
    font-family: arial; 
 
    font-size: 15px; 
 
    color: black; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    position: absolute; 
 
    margin-top: 15%; 
 
    left: 10%; 
 
} 
 

 
#pre:hover { 
 
    cursor: pointer; 
 
} 
 

 
#nex { 
 
    height: 30px; 
 
    width: 100px; 
 
    border: 2px solid white; 
 
    font-family: arial; 
 
    font-size: 15px; 
 
    color: black; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    position: absolute; 
 
    margin-top: 15%; 
 
    right: 10%; 
 
} 
 

 
#nex:hover { 
 
    cursor: pointer; 
 
} 
 

 
#detail { 
 
    padding-top: 10px; 
 
} 
 

 
.count { 
 
    font-size: 28px; 
 
    padding-left: 10px; 
 
    padding-top: 6px; 
 
    color: #94b4d7; 
 
    transform: scale(1.4); 
 
    font-weight: 400; 
 
    font-family: 'Roboto'; 
 
} 
 

 
.cardheading { 
 
    margin-left: -10px; 
 
    padding-top: 23px; 
 
    font-size: 14px; 
 
    color: #666666; 
 
} 
 

 
.words { 
 
    font-size: 10px; 
 
    margin-left: 2px; 
 
    font-weight: 500; 
 
    color: #616161; 
 
} 
 

 
.wordimg { 
 
    margin-left: 22px; 
 
} 
 

 
.iconic { 
 
    height: 80px; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script> 
 

 
<div class="row"> 
 
    <div id="pre"> 
 
    PREVIOUS 
 
    </div> 
 
    <div id="main"> 
 
    <!---slide one--> 
 
    <div class="slide active"> 
 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">1.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading">We listen, while you tell us about</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Project</span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Budget </span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Taste </span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words"> Your Aspirations</span> 
 
      <br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!---slide two--> 
 
    <div class="slide"> 
 

 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">2.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading">You listen, when we give you</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Free Design Consultation</span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Site Measurement</span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Floor Plans</span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Quotations</span> 
 
      <br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <!---slide Three--> 
 
    <div class="slide"> 
 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">3.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading text-center" style="margin-left: -120px;">We together</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Choose design teams</span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Budget your project</span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Plan a timeline</span> 
 
      <br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <!---slide Four--> 
 
    <div class="slide"> 
 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">4.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading" style="margin-left: 30px;">You relax while we</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Execute them</span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle all the stress</span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Co-ordinate labour teams</span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle products</span> 
 
      <br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!---slide Five--> 
 
    <div class="slide"> 
 
     <div class="row" align="center"> 
 
     <div class="col-2 text-center"> 
 
      <h1 class="count">5.</h1> 
 
     </div> 
 
     <div class="col-10 text-left"> 
 
      <h2 class="cardheading" style="margin-left: 50px;">You move in</h2> 
 
     </div> 
 
     </div> 
 
     <div class="row" id="detail"> 
 
     <div class="col-1"></div> 
 
     <div class="col-6"> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">All happy</span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">With our technical help</span> 
 
      <br/> 
 
      <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Lifelong support</span> 
 
      <br/> 
 
     </div> 
 
     <div class="col-5"> 
 
      <img class="iconic" src="img/slideoneimg.png"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
    <div id="nex"> 
 
    NEXT 
 
    </div> 
 
</div>

Quelle

2017-10-17 11:13:19 H77

Selbst in Sie Code ist es nicht coecretly..When Scroll-up es zeigt 2 nach 1 nicht 5 –

Können Sie den aktualisierten Code ausprobieren? Ich musste den Event-Parameter aus dem Event-Handler entfernen. – H77

Perfekte Antwort Von dir ... Vielen Dank, kannst du mir einfach sagen, wie man die Scroll-Geschwindigkeit steuert? weil es zu schnell geht, Danke nochmal :) –

Mausrad-Richtung funktioniert nicht

Antwort

Verwandte Themen