Are you able to solve it? JavaScript carousel implementation using an array

I cannot solve this problem, are you able to solve it? I would need your expert advice on how to do it in JS vanilla or jQuery (optional). A sample of code on jsfiddle would be high appreciated.

I have to display an array of 5 elements in a list with a limit of 3 at one time

var range = [0,1,2,3,4];

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ul>

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

When user click on "next", I need to add a class "focus" on the first "li".

<ul>
  <li class="focus">0</li>
  <li>1</li>
  <li>2</li>
</ul>

Second click on "next"

<ul>
  <li>0</li>
  <li class="focus">1</li>
  <li>2</li>
</ul>

click on "next" ...

<ul>
  <li>0</li>
  <li>1</li>
  <li class="focus">2</li>
</ul>

click on "next" ... note array shift

<ul>
  <li>1</li>
  <li>2</li>
  <li class="focus">3</li>
</ul>

click on "next" ... array shift

<ul>
  <li>2</li>
  <li>3</li>
  <li class="focus">4</li>
</ul>

click on "next" ... but I cannot go any further as there is not element in the array to be displayed, so if I clicking "prev" I would like have the reverse

click on "prev" …

<ul>
  <li>2</li>
  <li class="focus">3</li>
  <li>4</li>
</ul>

click on "prev" …

<ul>
  <li class="focus">2</li>
  <li>3</li>
  <li>4</li>
</ul>

click on "prev" … note array shift

<ul>
  <li class="focus">1</li>
  <li>2</li>
  <li>3</li>
</ul>

click on "prev" … note array shift

<ul>
  <li class="focus">0</li>
  <li>1</li>
  <li>2</li>
</ul>

click on "prev" … nothing happen it has we reach the beginning go the array

<ul>
  <li class="focus">0</li>
  <li>1</li>
  <li>2</li>
</ul>

Any idea? Thanks in advance

Revised solutions as suggested in answers

http://jsfiddle.net/QwATR/

Answers:

Answer

This is quite straightforward in vanilla javascript (jsfiddle)

var range = [0, 1, 2, 3, 4],
    lis = document.getElementsByTagName('li'),
    foc, offset = 0;
function next() {
    if (foc === undefined) {
        foc = 0;
    } else if (foc < lis.length - 1) {
        foc++;
    } else if (offset + foc < range.length - 1) {
        offset++;
    }
    rewriteList();
}
function previous() {
    if (foc === undefined) {
        foc = 0;
    } else if (foc > 0) {
        foc--;
    } else if (offset > 0) {
        offset--;
    }
    rewriteList();
}
function rewriteList() {
    for (var i = 0; i < lis.length; i++) {
        lis[i].innerHTML = range[i + offset];
        lis[i].className = i == foc ? 'focus' : '';
    }
}
document.getElementById('prev').onclick = previous;
document.getElementById('next').onclick = next;

Alternatively you could set up the carousels with a constructor function (jsfiddle)

Answer
// Initalize everything
var curPos = 0;
var minIndex = 0;
var maxIndex = 2;
var clicks = 0;
var range = ['0','1','2','3','4','5','6','7','8','9','10'];
if($('li.focus').length === 0)
{
    $('ul > li:eq(0)').addClass('focus');
    $('ul > li').each(function(index){
       $(this).text(range[index+curPos]);
    });
}

// Next click handler
$('#next').click(function(){
    if($('ul li').index($('li.focus')) < 2)
    {
        $('li.focus').removeClass('focus');
        if(curPos < 2)
            curPos++;
        else
        {
            clicks++;
        }
        $('ul > li:eq('+curPos+')').addClass('focus');
    } else {
       if(clicks < range.length -3)
           clicks++;
    }
    $('ul > li').each(function(index){
        $(this).text(range[index+clicks]);
    });
});

// Previous click handler
$('#prev').click(function(){
    if($('ul li').index($('li.focus')) > 0)
    {
        $('li.focus').removeClass('focus');
        if(curPos > 0)
            curPos--;
        else
        {
            clicks--;
        }
        $('ul > li:eq('+curPos+')').addClass('focus');
    } else {
        if(clicks > 0)
            clicks--;
    }
        $('ul > li').each(function(index){
            $(this).text(range[index+clicks]);
        });
    console.log('clicks after prev:' + clicks);
});

http://jsfiddle.net/QAsQj/2/

Answer
$(function(){
    $("#next").click(function(){
        if($(".focus").length == 0){
            $("ul li:first-child").addClass("focus");
        }
        else{
            if($(".focus").is(":last-child")){
                $("ul li").each(function(){
                    var content = $(this).next("li").html();
                    $(this).empty().html(content);
                }
                $(".focus").html(/**WHATEVER YOUR NEXT CONTENT IS**/);
            }
            else{
                var active = $(".focus");
                $("ul li").removeClass("focus");
                active.next("li").addClass("focus");
            }
        }
    }
    );
    $("#prev").click(function(){
        if($(".focus").length == 0){
            break;
        }
        else{
            if($(".focus").is(":first-child")){
                $("ul li").each(function(){
                    var content = $(this).prev("li").html();
                    $(this).empty().html(content);
                }
                $(".focus").html(/**WHATEVER YOUR PREV CONTENT IS**/);
            }
            else{
                var active = $(".focus");
                $("ul li").removeClass("focus");
                active.prev("li").addClass("focus");
            }
        }
    }
    );
}
);

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.