$.ajax('URL_ZU_MEINER_TOLLEN_TXT.txt').done(function(inhalt) {
// hier ersetzt du entsprechend Content im DOM mit dem Zeug was in der variable 'inhalt' steht
});
Joshinator schrieb:
display: none o.ä. und dann bei klick anzeigen. Sonst hast du immer ein zusätzliches Delay durch die Serverkommunikation, gerade wenn das Internet gerade mal nicht so fix ist wird's blöd weil du für ein bisschen Text nochmal extra lange warten musst.<div id="slider">
<div id="slide-wrapper">
<div class="slide">
Seite 1
</div>
<div class="slide">
Seite 2
</div>
<div class="slide">
Seite N
</div>
</div>
</div>
<div id="back"></div>
<div id="next"></div>var currentSlide = 0;
var maxSlides = $('#slide-wrapper>div').length;
$('#slide-wrapper').css({'width': (maxSlides * 100) + '%'});
function next() {
if (currentSlide == maxSlides - 1) {
//damit nicht über die letzte Seite weg navigiert werden kann
return;
}
currentSlide++;
updateSlider();
}
function back() {
if (currentSlide == 0) {
//damit nicht über die erste Seite hinaus navigiert werden kann
return;
}
currentSlide--;
updateSlider();
}
function updateSlider() {
var margin = currentSlide * -100
$('#slide-wrapper').css({'margin-left': margin + '%'});
}
$(document).on('click', '#back', function() {
back();
});
$(document).on('click', '#next', function() {
next();
});#slider {
overflow: hidden;
height: 300px;
width: 200px;
border: 1px solid black;
}
#slider .slide {
height: 300px;
width: 200px;
float: left;
}
#slider .slide:nth-child(odd) {
background-color: grey;
}
#slide-wrapper {
margin: 0;
padding: 0;
height: 300px;
width: 300%;
transition: all ease-out .8s;
}
#back, #next {
border-radius: 50%;
background-color: red;
margin: 10px;
height: 20px;
width: 20px;
}
#next {
background-color: green;
}<div class="container-fluid">
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
<div class="col-12" id="textfeld">
<div class="row">
<div class="col-1">
<!--Hier ist der Zurück-Button-->
</div>
<div class="col-10">
<!--Hier steht der Text-->
</div>
<div class="col-1">
<!--Hier ist der Vor-Button-->
</div>
</div>
</div>
</div>
</div>.row{
width: 100%;
}
