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

Here have a look at this JSFiddle.

Jquery

var items=$('.viewport .slider div'),
total=items.length,
index=0;

$('.next').click(function () {
  index+=1;
  cycle();
});

 function cycle() {
  item = $('.viewport .slider div').slice(index, index + 1);
  currentItem = $('.viewport .slider div').slice(index-1,index);
    if(index<total){
    currentItem.css({

    "transform": "translateX(-200px)"
    })
    item.css({

    "transform": "translateX(0px)"
    })
  }
}

CSS

.viewport{
border:1px solid;
height:100px;
width:200px;
overflow:hidden;
border-right:2px solid red;
}
.slider{
  height:100%;
  width:100%;
  position: relative;
}
div.slide{
width:200px;
height:100%;
position:absolute;
background:orange;
-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-ms-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
transition:all 1.0s ease;
}
div.slide.first{
  -webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}

Answer 2

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 += "<li id='itemLinks" + dotLink + "' class='navSlide" + classAppend + "' data-link='" + dotLink + "'></li>";
  }
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="viewCont">
  <div class="viewport">
    <div class="slider">
      <div class="slide">one</div>
      <div class="slide">two</div>
      <div class="slide">three</div>
      <div class="slide">four</div>
      <div class="slide">five</div>
      <div class="slide">six</div>
    </div>
  </div>

  <div class="prev btn">Prev</div>

  <div id="navLinks">
    <ul></ul>
  </div>

  <div class="next btn">Next</div>
</div>
<div>Items Per Page:</div>
<input id="itemsPerPage" type="number" min="1" />

Answer 3

 <!DOCTYPE html>
 <html>
 <head>
 <style>
.viewport{
 border:1px solid;
 height:100px;
 width:200px;
 overflow:hidden;
 border-right:2px solid red;
  }
  div.slide{
 width:200px;
  height:100%;
  position:relative;
  background:orange;
   }
  div.viewport {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
     animation-duration: 4s;
   }

  /* Chrome, Safari, Opera */
  @-webkit-keyframes example {
     from {background-color: red;}
     to {background-color: black;}
   }

  /* Standard syntax */
   @keyframes example {
    from {background-color: red;}
     to {background-color: black;}
   }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   </head>
   <body>
    <div class="viewport">
    <div class="slide">one</div>
     <div class="slide">two</div>
      <div class="slide">three</div>
      <div class="slide">four</div>
    <div class="slide">five</div>
  <div class="slide">six</div>
  </div>
   <div class="next">Next</div>
  <script>
   var items=$('.viewport div');
    total=items.length;
   index=0;
   $('.next').click(function () {
  index+=1;
   cycle()
    });
    function cycle() {
    item = $('.viewport div').slice(index, index + 1);
    items.hide();
    item.show();
    item.css({
    "transform": "translateX(-200px)",
     "transition":"all 1.0s ease"
    })
    }
    </script>
    </body>
    </html>

in your question you have mention like". I want to it to start from red strip(right) and end it to black strip(left)." i have done this and you can find through fiddle alsoenter link description hereNote:customise how ever you want