Light Carousel Использование Append & Prepend

Question

Я пытаюсь сделать простую карусель с jQuery, но с CSS3, делающим весь тяжелый подъем. При нажатии кнопки next/prev вращается элементы, используя append/prepend. Я не могу заставить его работать, и я не понимаю, что я сделал неправильно. Мой сценарий выглядит следующим образом:

$(".next").click(function() { 
    $(".item-post:first-of-type").append($(".item-post:last-of-type")); 
}); 
$(".prev").click(function() { 
    $(".item-post:last-of-type").prepend($(".item-post:first-of-type")); 
}); 

HTML

<div class="news-layout-1"> 

    <div class="item-post"><h1 class="item-title">First</h1></div> 
    <div class="item-post"><h1 class="item-title">Second</h1></div> 
    <div class="item-post"><h1 class="item-title">Third</h1></div> 
    <div class="item-post"><h1 class="item-title">Fourth</h1></div> 
    <div class="item-post"><h1 class="item-title">Fifth</h1></div> 
    <div class="item-post"><h1 class="item-title">Sixth</h1></div> 

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

</div> 

jsFiddle: http://jsfiddle.net/fkn16sak/3/

Answer 1

Я думаю, что вы хотите InsertBefore и InsertAfter:

$(".next").click(function() { 
 
    $(".item-post:first").insertAfter($(".item-post:last")); 
 
}); 
 
$(".prev").click(function() { 
 
    $(".item-post:last").insertBefore($(".item-post:first")); 
 
});

.news-layout-1 { 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 
h1 { 
 
    cursor: pointer; 
 
    font-size: 1.2rem; 
 
    font-weight: none; 
 
    text-align: center; 
 
} 
 
.item-post { 
 
    width: 20%; 
 
    height: 20%; 
 
    float: left; 
 
    background: #444; 
 
} 
 
.item-post:first-of-type { 
 
    width: 100%; 
 
    height: 180px; 
 
    background: #bbb; 
 
} 
 
.prev, .next { 
 
    width: 20px; 
 
    background: darkred; 
 
    height: 48px; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
.prev { 
 
    left: 0; 
 
} 
 
.next { 
 
    right: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="news-layout-1"> 
 
    <div class="item-post"> 
 
     <h1 class="item-title">First</h1> 
 
    </div> 
 
    <div class="item-post"> 
 
     <h1 class="item-title">Second</h1> 
 
    </div> 
 
    <div class="item-post"> 
 
     <h1 class="item-title">Third</h1> 
 
    </div> 
 
    <div class="item-post"> 
 
     <h1 class="item-title">Fourth</h1> 
 
    </div> 
 
    <div class="item-post"> 
 
     <h1 class="item-title">Fifth</h1> 
 
    </div> 
 
    <div class="item-post"> 
 
     <h1 class="item-title">Sixth</h1> 
 
    </div> 
 
    <div class="prev">p</div> 
 
    <div class="next">n</div> 
 
</div>