jquery slider continuous slide

Question

Hello I have a slider fiddle using jquery from another stackoverflow question

http://jsfiddle.net/mjaA3/2506/

target = $('ul.triggers li.selected').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);

All I want to get is to turn this slider to continuous slider without getting back to the first item after it ends

I hope someone could explain to me how to do this with cloning because I don't understand this idea

ps no needs for any slider I need a code because I'm building a custom

Thank you in advance

Answer 1

Well, it seems you mean infinite scroller. I tried very quickly and made it

http://jsfiddle.net/samirkumardas/yznfmLs9/5/

Few things:

1. For infinite scroller, it is better to use a global variable for maintaining current slide number. For the simplicity I have used auto_target instead of your variable target.
2. The approach is to duplicate the first 1 or 2 slides (depends on mask width) and append these to the end of the slider container (append to UL)
3. When slider reach at the last slide, move slider to the duplicate slide(s) and pretends (highlight quick navigation I mean) that slider is at the position 0 (Since duplicate sliders are same as First slide(s))
4. When current slider number is greater than total number of slides(LI), set slider(UL) left position to 0 and set target slider to 1 because we have already shown first slider using duplicate

Hope it will help.

var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length - 1;
var mask = $('.mask ul.images');
var imgWidth = images.width();
var target = 0;
var auto_target = 0;
var mask_width = 340;
var slids_at_a_time = Math.ceil(mask_width / imgWidth);

triggers.first().addClass('selected');
mask.css('width', imgWidth * (lastElem + 1 + slids_at_a_time) + 'px');

function sliderResponse(target) {
  mask.stop(true, false).animate({
    'left': '-' + imgWidth * target + 'px'
  }, 300);
  triggers.removeClass('selected').eq(target % images.size()).addClass('selected');
}

triggers.click(function() {
  alert('not impletement');
});
$('.next').click(function() {
   alert('not impletement');
});
$('.prev').click(function() {
  alert('not impletement');
});

function sliderTiming() {
  auto_target++;
  if (auto_target > images.size()) {
    auto_target = 1;
    mask.css('left', 0);
  }

  sliderResponse(auto_target);
}
images.slice(0, slids_at_a_time).clone().appendTo(mask).addClass('duplicate');
var timingRun = setInterval(function() {
  sliderTiming();
}, 5000);

function resetTiming() {
  clearInterval(timingRun);
  timingRun = setInterval(function() {
    sliderTiming();
  }, 5000);
}

body {
  background-color: #000;
  position: relative;
  font-size: 14px;
  font-family: arial;
}
.mask {
  float: left;
  margin: 40px;
  width: 340px;
  height: 266px;
  overflow: hidden;
}
ul.images {
  position: relative;
  top: 0px;
  left: 0px;
}
ul.images li {
  float: left;
  width: 170px;
}
ul.triggers {
  position: absolute;
  top: 310px;
  left: 80px;
}
ul.triggers li {
  float: left;
  margin: 0 5px;
  font: bold 16px arial;
  cursor: pointer;
  background-color: #ccc;
  color: #000;
  padding: 10px;
  list-style-type: none;
}
ul.triggers li.selected {
  background-color: red;
  color: #000;
}
.control {
  position: absolute;
  top: 380px;
  color: #fff;
  cursor: pointer;
}
.prev {
  left: 120px;
}
.next {
  left: 180px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="mask">
  <ul class="images">
    <li>
      <img width="170" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/270px-The_Earth_seen_from_Apollo_17.jpg" />
    </li>
    <li>
      <img width="170" src="http://www.mallorcaweb.net/masm/Planetas/Jupiter.jpg" />
    </li>
    <li>
      <img width="170" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg" />
    </li>
    <li>
      <img width="170" src="http://static.ddmcdn.com/gif/sun-update-1.jpg" />
    </li>
    <li>
      <img width="170" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg" />
    </li>
  </ul>
</div>
<ul class="triggers">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<span class="control prev">Prev</span>

<span class="control next">Next</span>

Answer 2

I have updated your fiddle so that it still carries on playing so if you click on a slide it will carry on the slider but otherwise it won't loop.

The key code is the sliderTiming() function:

if (target < lastElem) {
    sliderResponse(++target);
}

This means that sliderResponse (which triggers the sliding) will only happen if the current slide is not the last one.

The ++target means "add 1 to target and then use it in context" (in context it's being passed as a parameter).