micronyks micronyks - 4 months ago 14
jQuery Question

slide content from right to left using jquery

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

translateX(-200px)
can give me desire effect. but it start from
0px
and goes to
-200px
. I want it to start from red strip(right) and end it to black strip(left) for each div.

In short I want to slide the content from right to left with this set up.

NOTE: try to remove,

item.css({

"transform": "translateX(-200px)",

"transition":"all 1.0s ease"
})


this part and it will work as expected without sliding. I just want to implement sliding.

demo : https://plnkr.co/edit/YylT0p7GGl44WRiMoOGj?p=preview

<!DOCTYPE html>
<html>
<body>

<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="next">Next</div>
<script>
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);
items.hide();
item.show();


item.css({

"transform": "translateX(-200px)",

"transition":"all 1.0s ease"
})

}
</script>
</body>
</html>

Answer

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 : undefined);
  if (typeof newLeft === 'number') {
    checkDot(newLeft);
    animateLeft(newLeft);
  }
}

function checkDot(newLeft) {
  $('.navSlide').removeClass(selectedDotClass);
  for (var i = 0; i < dotAmount; i ++) {
    var dotLink = (itemsPerPage * i);
    if (newLeft != getDotLeft(dotLink)) {
      continue;
    }
    return $('.navSlide#itemLinks' + dotLink).addClass(selectedDotClass);
  }
}

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);
    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);
    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" />

Comments