Advanced Slider Customization

Question

Ich versuche, unter Bildtyp Schieberegler mit Super Slides und Bxslider zu erreichen.

Slider Erläuterung:

• Blackbox Punkte/stoppt.
• Blue Box ist Auto.
• Immer wenn das Auto den halben Weg stoppt, muss ich den roten Schieberegler zum nächsten ändern.
• Der Benutzer kann die Maus mit den Pfeiltasten oder mit den Pfeiltasten bewegen, um das Auto vorwärts oder rückwärts zu bewegen & auf dem Handy mit Wischen vorwärts oder rückwärts.

Was habe ich mit Superslides und Bxslider getan Rückruf nutzen Funktionen von bxslider das Auto zu animieren, sondern stecken.

Hilfe: Ich brauche Ideen, wie man ein solches Ergebnis erzielt. Welche Art von Schieberegler kann ich verwenden, um so etwas zu erreichen.

Referenz link aber mit jQuery

Answer 1

(function($) { 
 
     var elem = $.jInvertScroll(['.scroll'],  // an array containing the selector(s) for the elements you want to animate 
 
      { 
 
      height: 6000,     // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height 
 
      onScroll: function(percent) { //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page 
 
       console.log(percent); 
 
      } 
 
     }); 
 

 
     $(window).resize(function() { 
 
      if ($(window).width() <= 768) { 
 
      elem.destroy(); 
 
      } 
 
      else { 
 
      elem.reinitialize(); 
 
      } 
 
     }); 
 
    }(jQuery));

html, 
 
body 
 
{ 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: Arial, sans-serif; 
 
} 
 

 
/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */ 
 
body 
 
{ 
 
    overflow-x: hidden; 
 
    background: url('../images/bg.jpg') repeat top left; 
 
} 
 

 
h1 
 
{ 
 
    font-size: 20px; 
 
    font-weight: normal; 
 
    color: #2e6e80; 
 
} 
 

 
/** 
 
    * important: keep position fixed, you can however use top:0 instead of bottom:0 
 
    * if you want to make it stick to the top of the browser 
 
    */ 
 
.scroll 
 
{ 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
/** 
 
    * z-index ordering of the different layers, do this for your layers, 
 
    * also assign absolute width (to prevent issues if the script gets executed before the images get loaded) 
 
    */ 
 
.horizon 
 
{ 
 
    z-index: 1; 
 
    width: 3000px; 
 
} 
 

 
.middle 
 
{ 
 
    z-index: 500; 
 
    width: 4000px; 
 
} 
 

 
.front 
 
{ 
 
    z-index: 1000; 
 
    width: 6000px; 
 
}

<h1>jInvertScroll Example</h1> 
 
    
 
    <div class="horizon scroll"> 
 
     <img src="https://raw.githubusercontent.com/pixxelfactory/jInvertScroll/master/examples/images/horizon.png" alt="" /> 
 
    </div> 
 
    <div class="middle scroll"> 
 
     <img src="https://raw.githubusercontent.com/pixxelfactory/jInvertScroll/master/examples/images/middle.png" alt="" /> 
 
    </div> 
 
    <div class="front scroll"> 
 
     <img src="https://raw.githubusercontent.com/pixxelfactory/jInvertScroll/master/examples/images/front.png" alt="" /> 
 
    </div> 
 
<script src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.min.js"></script> 
 
<script src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.jInvertScroll.js"></script>