JavaScript Caroussel nicht gleiten

-1

Ich bin neu in Javascript und versuche, einen Schieberegler zum automatischen Verschieben zu bekommen. Problem ist, dass es nicht rutscht. Ich kann es nicht einmal klicken, um es zu gleiten. Mein Code ist wie folgt (Ich habe ein ganzseitiges Beispiel eingefügt). Das Caroussel sollte div nach div gleiten (eins nach dem anderen), aber nichts passiert. Es fühlt sich an, als würde mein Javascript gar nicht ausgeführt. jede Hilfe würde sehr geschätzt werden.JavaScript Caroussel nicht gleiten

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style> 
    #myslide { 
     width:705px; 
     overflow:hidden; 
     position: relative; 
     height:80px; 
     margin-bottom:20px; 
    } 

    #myslide .cover { 
     width:2820px; 
     position: absolute; 
     height:80px; 
    } 

    #myslide .mystuff { 
     width:705px; 
     float:left; 
     padding:20px 0; 
     font-size:15px; 
     font-style: italic; 
     color:#b0b0b0; 
     line-height:20px; 
     text-align:center; 
    } 

    .button1, 
    .button2, 
    .button3, 
    .button4 { 
     background:#999; 
     padding:6px; 
     display:block; 
     float:left; 
     margin-right:5px; 
    } 

    .active { 
     background:#111; 
     padding:6px; 
     display:block; 
     float:left; 
     outline:none; 
    } 
    .clear { clear: both; } 

</style> 


</head> 
<body> 

<div id="myslide"> 
    <div class="cover"> 
     <div class="mystuff"> 
      1 Lorem Dolor Ipsum... 
     </div> 
     <div class="mystuff"> 
      2 Lorem Dolor Ipsum... 
     </div> 
     <div class="mystuff"> 
      3 Lorem Dolor Ipsum... 
     </div> 
     <div class="mystuff"> 
      4 Lorem Ipsum Dolor sit amet .... 
     </div> 
    </div> 
</div> 

<div class="clear"></div> 

<div id="button"> 
    <a class="button1 active" rel="1"></a> 
    <a class="button2" rel="2"></a> 
    <a class="button3" rel="3"></a> 
    <a class="button4" rel="4"></a> 
</div> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 

<script> 
$(document).ready(function(){ 

$('#button a').click(function(){ 
    var integer = $(this).attr('rel'); 
    $('#myslide .cover').animate({left:-705*(parseInt(integer)-1)}) 
    $('#button a').each(function(){ 
     $(this).removeClass('active'); 
     if($(this).hasClass('button'+integer)){ 
      $(this).addClass('active')} 
    }); 
}); 
    Next(); 
    setInterval (function(){Next();}, 1000); 
}); 

function Next(){ 
    var _next = false; 
    $('#button a').each(function(){ 
     if(_next){ 
      $(this).addClass('active'); 
      _next = false; 
     } 
     else if($(this).hasClass('active')){ 
      _next = true; 
      _next = true; 
      $(this).removeClass('active') 
     } 

    }); 
    if(_next) 
     $("#button a:eq(0)").addClass("active"); 

    var activeIndex = parseInt($(".active").attr("rel")); 
    $('#myslide .cover').animate({left:-705*(parseInt(activeIndex)-1)});  
} 


</script>

Quelle

2017-12-27 Lawless Leopard

"Es fühlt sich an, als ob mein Javascript überhaupt nicht ausgeführt wird." Warum also nicht ein paar Konsolenanweisungen hinzufügen und sehen. –

Für den Anfang sind Ihre Funktionen nicht korrekt geschlossen. Sie fehlen geschweifte Klammern nach Ihrer 'else if'-Anweisung. Zweitens verwenden Sie jQuery Slim, das keine Animationsfunktionen enthält. Verwenden Sie stattdessen die reguläre jQuery-Bibliothek. – AndroidNoobie

@AndroidNoobie Sie hatten Recht, das Problem war jQuery schlank. Sobald ich die else if und die Bibliotheken geändert hat, hat alles geklappt. Würden Sie die Antwort aufschreiben, damit ich sie akzeptieren kann? Give Credit wo es fällig ist –

Für den Anfang sind Ihre Funktionen nicht richtig geschlossen. Sie fehlen geschweifte Klammern nach Ihrer else if-Anweisung. Versuchen:

$(document).ready(function(){ 

$('#button a').click(function(){ 
    var integer = $(this).attr('rel'); 
    $('#myslide .cover').animate({left:-705*(parseInt(integer)-1)}) 
    $('#button a').each(function(){ 
     $(this).removeClass('active'); 
     if($(this).hasClass('button'+integer)){ 
      $(this).addClass('active')} 
    }); 
}); 
    Next(); 
    setInterval (function(){Next();}, 1000); 
}); 

function Next(){ 
    var _next = false; 
    $('#button a').each(function(){ 
     if(_next){ 
      $(this).addClass('active'); 
      _next = false; 
     } 
     else if($(this).hasClass('active')){ 
      _next = true; 
     } 
    }) 
}

Zweitens Sie verwenden jQuery Schlank, die keine Animation Funktionen enthält (siehe jquery : $().animate() is not a function). Verwenden Sie stattdessen die reguläre jQuery-Bibliothek.

Quelle

2017-12-27 23:08:34 AndroidNoobie

JavaScript Caroussel nicht gleiten

Antwort

Verwandte Themen