slide content from right to left using jquery

Question

When you press next button, viewport changes the content(two)and do transformation.

What I want is,I want to slide the content.As you can see here in demo, using t

Answer 1

You could creating a container div within the viewport div that contains the items. To move the items, just move the container div.

var viewCont = $('.viewCont');
var slider = viewCont.find('.slider');
var items = slider.find('.slide');
var firstItem = items.first();
var itemWidth = firstItem.width();
var fullWidth = items.length * itemWidth;
var itemsPerPageInput = $('#itemsPerPage');
var itemsPerPage;
var viewWidth;
var maxLeft;
var dotsCont = $('#navLinks ul');
var dotAmount;
var selectedDotClass = 'selectedDot';

function setItemsPerPage(newItemsPerPage) {
  itemsPerPage = newItemsPerPage;
  viewWidth = itemWidth * itemsPerPage;
  maxLeft = -fullWidth + (itemWidth * itemsPerPage);
  viewCont.width(viewWidth + 'px');
  dynamicUL(dotsCont);
}

function setItemsPerPageFromScreenWidth() {
  var screenRanges = [{
    min: 1024,
    items: 3
  }, {
    min: 768,
    max: 1024,
    items: 2
  }, {
    max: 768,
    items: 1
  }];
  for (var i = 0; i < screenRanges.length; i++) {
    var screenRange = screenRanges[i];
    if ((typeof screenRange.min === 'number' && Math.min(screen.width, screenRange.min) != screenRange.min) || (typeof screenRange.max === 'number' && Math.max(screen.width, screenRange.max) != screenRange.max)) {
      continue;
    }
    itemsPerPageInput.val(screenRange.items);
    return setItemsPerPage(screenRange.items);
  }
}

function boundRightIncrement(left, newLeft) {
  return left > maxLeft && left - viewWidth < maxLeft ? maxLeft : newLeft;
}

function boundLeftIncrement(left, newLeft) {
  return left < 0 && left + viewWidth > 0 ? 0 : newLeft
}

function boundRightSet(left, newLeft) {
  return left >= maxLeft && newLeft <= maxLeft ? maxLeft : newLeft;
}

function updateLeft() {
  var left = parseInt(slider.css('left'));
  var newLeft = left < maxLeft ? maxLeft : (left > 0 ? 0 : left);
  if (typeof newLeft === 'number') {
    newLeft = checkDot(newLeft);
    animateLeft(newLeft);
  }
}

function checkDot(newLeft) {
  $('.navSlide').removeClass(selectedDotClass);
  var nearLeft;
  var nearDistance;
  var nearDot;
  for (var i = 0; i < dotAmount; i ++) {
    var dotLink = (itemsPerPage * i);
    var dotLeft = getDotLeft(dotLink);
    if (newLeft != dotLeft) {
      var distance = Math.abs(newLeft - dotLeft);
      if(typeof nearDistance !== 'number' || distance < nearDistance) {
        nearLeft = dotLeft;
        nearDistance = distance;
        nearDot = dotLink;
      }
      continue;
    }
    $('.navSlide#itemLinks' + dotLink).addClass(selectedDotClass);
    return newLeft;
  }
  $('.navSlide#itemLinks' + nearDot).addClass(selectedDotClass);
  return nearLeft;
}

function animateLeft(newLeft, callback) {
  slider.animate({
    left: newLeft + 'px'
  }, 1000, callback);
}

function dynamicUL(ul) {
  var lihtml = '';
  ul.html('');
  dotAmount = items.length / itemsPerPage;
  for (i = 0; i < dotAmount; i ++) {
    var dotLink = (itemsPerPage * i);
    var classAppend = getDotLeft(dotLink) == parseInt(slider.css('left')) ? ' ' + selectedDotClass : '';
    lihtml += "
";
  }
  ul.append(lihtml);
  bindClickEvents();
}

function bindClickEvents() {
  var navSlide = $(".navSlide");
  navSlide.click(function(e) {
    navSlide.removeClass(selectedDotClass);
    var dotLink = $(e.target).addClass(selectedDotClass).data().link;
    animateLeft(getDotLeft(dotLink));
  })
}

function getDotLeft(dotLink) {
  var newLeft = -(dotLink * itemWidth);
  return boundRightSet(parseInt(slider.css('left')), newLeft);
}

$(function() {
  slider.width(fullWidth);
  itemsPerPageInput.attr('max', items.length);
  setItemsPerPageFromScreenWidth();

  $('.next').click(function() {
    var left = parseInt(slider.css('left'));
    var newLeft = left <= maxLeft ? '0' : parseInt(slider.css('left')) - viewWidth;
    newLeft = boundRightIncrement(left, newLeft);
    newLeft = checkDot(newLeft);
    animateLeft(newLeft);
  });
  $('.prev').click(function() {
    var left = parseInt(slider.css('left'));
    var newLeft = left >= 0 ? maxLeft : parseInt(slider.css('left')) + viewWidth;
    newLeft = boundLeftIncrement(left, newLeft);
    newLeft = checkDot(newLeft);
    animateLeft(newLeft);
  });
  itemsPerPageInput.change(function() {
    setItemsPerPage(parseInt(itemsPerPageInput.val()));
    updateLeft();
  });
});

.viewCont {
  height: 125px;
  position: relative;
}
.viewport {
  border: 1px solid;
  height: 100px;
  width: 100%;
  overflow: hidden;
  border-right: 2px solid red;
  margin-bottom: 5px;
}
.slider {
  height: 100%;
  position: relative;
  left: 0;
}
div.slide {
  width: 200px;
  height: 100%;
  position: relative;
  float: left;
  background: orange;
}
.btn {
  cursor: pointer;
  border-radius: 3px;
  background-color: gray;
  padding: 3px 5px;
  position: relative;
}
.next {
  float: right;
}
.prev {
  float: left;
}
#navLinks {
  width: 119px;
  position: relative;
  float: left;
}
#navLinks ul {
  display: inline-block;
  width: 100%;
  height: 10px;
}
#navLinks ul li {
  cursor: pointer;
  float: left;
  position: relative;
  width: 10px;
  margin-left: 2.5px;
  height: 10px;
  list-style: none;
  border-radius: 50%;
  background-color: #555;
}
.selectedDot {
  cursor: not-allowed!important;
  background-color: orange!important;
}

  

    

      
one
      
two
      
three
      
four
      
five
      
six
    
  

  
Prev

  

    

  

  
Next

Items Per Page: