Очень простой слайдер jQuery Div

Question

Я хотел бы поместить 5 делений на мою страницу, но ширина страницы не позволяет мне это сделать. Поэтому я подумал, что могу показать только 3 из них, и люди, которые хотят видеть других, могут щелкнуть стрелки влево и вправо, чтобы увидеть. Я хочу, чтобы это работало очень просто. У кого-нибудь есть идея, как сделать это лучше?

Answer 1

Вот как это сделать, используя jQuery.DIYslider , легкий и настраиваемый слайдер jQuery .

Демонстрация следующего кода: http://jsfiddle.net/bj4yZ/155/

Вы заметите, что этот плагин позволяет чрезвычайно легко делать все, что вы хотите.

Вы найдете все опции, методы и события этого плагина на странице, указанной выше.

HTML

<button id="go-left">&laquo;</button> <button id="go-right">&raquo;</button>

<div class="slider"><!-- The slider -->
    <div><!-- A mandatory div used by the slider -->
        <!-- Each div below is considered a slide -->
        <div class="a">Div #1</div>
        <div class="b">Div #2</div>
        <div class="c">Div #3</div>
        <div class="d">Div #4</div>
        <div class="e">Div #5</div>
    </div>
</div>

JavaScript

$(".slider").diyslider({
    width: "400px", // width of the slider
    height: "200px", // height of the slider
    display: 3, // number of slides you want it to display at once
    loop: false // disable looping on slides
}); // this is all you need!

// use buttons to change slide
$("#go-left").bind("click", function(){
    // Go to the previous slide
    $(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(){
    // Go to the previous slide
    $(".slider").diyslider("move", "forth");
});

Answer 2

вам не составит труда написать код, поэтому теория выглядит так

Структура HTML

.outter-container
  .inner container
    .slide slide1
    .slide slide2
    .slide slide3
    .slide slide4
    .slide slideX

1. получить ширину окна, ширину слайда
2. ширина окна / 3 = ширина слайда (для удобства всегда 3 слайда одновременно)
3. индексировать каждый слайд, затем применять индекс * ширина слайда (это равно горизонтальному положению)
4. установить внешний контейнер в положение относительное, ширина = ширина окна, переполнение = скрытый, а внутренний контейнер в положение абсолютное, слева: 0, верх: 0 и переместить в положение: абсолютное
5. установить каждый слайд css влево: индекс * ширина (точка 3)
6. Ну вот, успешно скрывайте другие слайды, время для взаимодействия.
7. next.click -> слайд-анимация внутреннего контейнера влево: - = slide.width (противоположно left.click)
8. и показать / скрыть левую / правую кнопку, если внутренний контейнер оставлен = 0, иначе .... чтобы отключить людей, нажимающих, когда больше не скрыты слайды