append prepend funktioniert nicht mit jquery

Question

versuche ich, einfache Slider mit jquery zu erstellen. Aber ich stecke irgendwie fest, wenn ich den Gegenstand fahre.

Wenn ich auf "Weiter" klicke, sollte das erste Element in das letzte und das andere ersetzt werden. gibt es einen Vorschlag, diesen Zyklus

$(document).ready(function(){ 
 
\t var slideItem = $('.slider-item'); 
 
\t var slideContainer = $('.slide-container'); 
 
\t var sliderWrap = ((slideItem.width() * slideItem.length)+ 100); 
 

 
\t $(slideContainer).css('width', sliderWrap+'px'); 
 

 
function next() { 
 
\t $(slideContainer).animate({'margin-left':'-=515px'},300,function(){ 
 
\t \t $(slideItem).first().remove().appendTo(slideContainer); 
 
\t \t $(slideContainer).css('margin-left', ''); 
 
\t }); 
 
} 
 

 
function prev() { 
 
\t $(slideContainer).animate({'margin-left':'+=515px'},300,function(){ 
 
\t \t $(slideItem).last().remove().prependTo(slideContainer); 
 
\t \t $(slideContainer).css('margin-left', ''); 
 
\t }); 
 
} 
 

 
$('.next').on('click', function(){ 
 
\t next(); 
 
}); 
 

 
$('.prev').on('click', function(){ 
 
\t prev(); 
 
}); 
 

 
});

.thumbnail-gallery { 
 
\t margin-top: 160px; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t height: 100%; 
 
\t background-color: green; 
 
} 
 

 
.slide-container { 
 
\t white-space: nowrap; 
 
\t background-color: red; 
 
} 
 

 
.slider-item { 
 
\t width: 500px; 
 
\t height: 100px; 
 
\t background-color: yellow; 
 
\t float: left; 
 
\t margin-right: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="thumbnail-gallery"> 
 
    <div class="slide-container"> 
 
    <div class="slider-item">1</div> 
 
    <div class="slider-item">2</div> 
 
    <div class="slider-item">3</div> 
 
    </div> 
 
</div> 
 

 
<button class="prev">prev</button> 
 
<button class="next">next</button>

Answer 1

.remove() Aufruf zu beheben, ist nicht erforderlich. Sowohl .appendTo() als auch .prependTo() entfernen Elemente aus DOM und hängen das Element an das ausgewählte Elternelement an oder fügen dieses Element hinzu.

Sie können mit jQuery variable slideContainer als zweiten Parameter jQuery() Objektkontext Element Mutter einzustellen, direkter Nachkomme Selektor >, jQuery :eq() mit Parameter 0 bei next Funktion und Parameter -1 bei prev Funktion der erwarteten Element ausgewählt aus slideContainer Elternelement

$(document).ready(function() { 
 
    var slideItem = $('.slider-item'); 
 
    var slideContainer = $('.slide-container'); 
 
    var sliderWrap = ((slideItem.width() * slideItem.length) + 100); 
 

 
    $(slideContainer).css('width', sliderWrap + 'px'); 
 

 
    function next() { 
 
    slideContainer.animate({ 
 
     'margin-left': '-=515px' 
 
    }, 300, function() { 
 
     $("> :eq(0)", slideContainer).appendTo(slideContainer); 
 
     slideContainer.css('margin-left', ''); 
 
    }); 
 
    } 
 

 
    function prev() { 
 
    $(slideContainer).animate({ 
 
     'margin-left': '+=515px' 
 
    }, 300, function() { 
 
     $("> :eq(-1)", slideContainer) 
 
     .prependTo(slideContainer); 
 
     slideContainer.css('margin-left', ''); 
 
    }); 
 
    } 
 

 
    $('.next').on('click', function() { 
 
    next(); 
 
    }); 
 

 
    $('.prev').on('click', function() { 
 
    prev(); 
 
    }); 
 

 
});

.thumbnail-gallery { 
 
    margin-top: 160px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 100%; 
 
    background-color: green; 
 
} 
 

 
.slide-container { 
 
    white-space: nowrap; 
 
    background-color: red; 
 
} 
 

 
.slider-item { 
 
    width: 500px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    float: left; 
 
    margin-right: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="thumbnail-gallery"> 
 
    <div class="slide-container"> 
 
    <div class="slider-item">1</div> 
 
    <div class="slider-item">2</div> 
 
    <div class="slider-item">3</div> 
 
    </div> 
 
</div> 
 

 
<button class="prev">prev</button> 
 
<button class="next">next</button>

Alternativ kann eine einzige Funktion für beide next, prev Funktion und click Ereignishandler verwenden, indem Parameter übergeben, um als eine Anordnung, die mit dem Element, beispielsweise bei .data() des Speicherns .next und .prev Elemente

$(document).ready(function() { 
 
    var slideItem = $('.slider-item'); 
 
    var slideContainer = $('.slide-container'); 
 
    var sliderWrap = ((slideItem.width() * slideItem.length) + 100); 
 
    
 
    $(".next").data("args", ["-", "append", 0]); 
 
    $(".prev").data("args", ["+", "prepend", -1]); 
 

 
    $(slideContainer).css('width', sliderWrap + 'px'); 
 

 
    function nextPrev(sign, dir, index) { 
 
    slideContainer.animate({ 
 
     'margin-left': sign + '=515px' 
 
    }, 300, function() { 
 
     $("> :eq("+index+")", slideContainer)[dir + "To"](slideContainer); 
 
     slideContainer.css('margin-left', ''); 
 
    }); 
 
    } 
 

 
    $(".next, .prev").on("click", function() { 
 
    nextPrev.apply(this, $(this).data("args")); 
 
    }); 
 

 
});

.thumbnail-gallery { 
 
    margin-top: 160px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 100%; 
 
    background-color: green; 
 
} 
 

 
.slide-container { 
 
    white-space: nowrap; 
 
    background-color: red; 
 
} 
 

 
.slider-item { 
 
    width: 500px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    float: left; 
 
    margin-right: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="thumbnail-gallery"> 
 
    <div class="slide-container"> 
 
    <div class="slider-item">1</div> 
 
    <div class="slider-item">2</div> 
 
    <div class="slider-item">3</div> 
 
    </div> 
 
</div> 
 

 
<button class="prev">prev</button> 
 
<button class="next">next</button>

Answer 2

jQuery(document).ready(function ($) { 
 

 
    $('#checkbox').change(function(){ 
 
    setInterval(function() { 
 
     moveRight(); 
 
    }, 3000); 
 
    }); 
 
    
 
\t var slideCount = $('#slider ul li').length; 
 
\t var slideWidth = $('#slider ul li').width(); 
 
\t var slideHeight = $('#slider ul li').height(); 
 
\t var sliderUlWidth = slideCount * slideWidth; 
 
\t 
 
\t $('#slider').css({ width: slideWidth, height: slideHeight }); 
 
\t 
 
\t $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 
 
\t 
 
    $('#slider ul li:last-child').prependTo('#slider ul'); 
 

 
    function moveLeft() { 
 
     $('#slider ul').animate({ 
 
      left: + slideWidth 
 
     }, 200, function() { 
 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
 
      $('#slider ul').css('left', ''); 
 
     }); 
 
    }; 
 

 
    function moveRight() { 
 
     $('#slider ul').animate({ 
 
      left: - slideWidth 
 
     }, 200, function() { 
 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
 
      $('#slider ul').css('left', ''); 
 
     }); 
 
    }; 
 

 
    $('a.control_prev').click(function() { 
 
     moveLeft(); 
 
    }); 
 

 
    $('a.control_next').click(function() { 
 
     moveRight(); 
 
    }); 
 

 
});

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); \t 
 

 
html { 
 
    border-top: 5px solid #fff; 
 
    color: #2a2a2a; 
 
} 
 

 
html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Open Sans'; 
 
} 
 

 
h1 { 
 
    color: #fff; 
 
    text-align: center; 
 
    font-weight: 300; 
 
} 
 

 
#slider { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 20px auto 0 auto; 
 
    border-radius: 4px; 
 
} 
 

 
#slider ul { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 200px; 
 
    list-style: none; 
 
} 
 

 
#slider ul li { 
 
    position: relative; 
 
    display: block; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 500px; 
 
    height: 300px; 
 
    background: #ccc; 
 
    text-align: center; 
 
    line-height: 300px; 
 
} 
 

 
a.control_prev, a.control_next { 
 
    position: absolute; 
 
    top: 40%; 
 
    z-index: 999; 
 
    display: block; 
 
    padding: 4% 3%; 
 
    width: auto; 
 
    height: auto; 
 
    background: #2a2a2a; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-weight: 600; 
 
    font-size: 18px; 
 
    opacity: 0.8; 
 
    cursor: pointer; 
 
} 
 

 
a.control_prev:hover, a.control_next:hover { 
 
    opacity: 1; 
 
    -webkit-transition: all 0.2s ease; 
 
} 
 

 
a.control_prev { 
 
    border-radius: 0 2px 2px 0; 
 
} 
 

 
a.control_next { 
 
    right: 0; 
 
    border-radius: 2px 0 0 2px; 
 
} 
 

 
.slider_option { 
 
    position: relative; 
 
    margin: 10px auto; 
 
    width: 160px; 
 
    font-size: 18px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slider"> 
 
    <a href="#" class="control_next">>></a> 
 
    <a href="#" class="control_prev"><</a> 
 
    <ul> 
 
    <li>SLIDE 1</li> 
 
    <li style="background: #aaa;">SLIDE 2</li> 
 
    <li>SLIDE 3</li> 
 
    <li style="background: #aaa;">SLIDE 4</li> 
 
    </ul> 
 
</div> 
 

 
<div class="slider_option"> 
 
    <input type="checkbox" id="checkbox"> 
 
    <label for="checkbox">Autoplay Slider</label> 
 
</div>