user5711656 user5711656 - 9 months ago 31
Javascript Question

why margin is given hardcoded in jquery?

I am making image slider dynamically (don't want to use any

hard corded
value).I am able to make slider but I have two issue.


  1. why I need
    20px
    more in
    ul
    width .is there any way not to use this hard corded value .

    $('#list').css('width',$('#list').find('.box').length*li_Width+20)



    • why some part
      left
      of box when user click
      next
      button.Example when user click on
      next
      button it show
      next
      box without showing any part (green box) ..But when user click on next button it show some part of
      blue
      box why ? why it is not slide fully ? If user click again next button it show again more part of red why ?




here is my code
https://plnkr.co/edit/t2yOFkO1QBWOVLFreiXm?p=preview

// Code goes here

$(function(){

var li_Width =$('#list').find('.box:first').outerWidth(true);
// why 20 pixel is hardcorded
$('#list').css('width',$('#list').find('.box').length*li_Width+20)
$('#next').click(function(){
$('#list').css('margin-left',addToMarginLeft($('#list'),-li_Width))
})
$('#pre').click(function(){
$('#list').css('margin-left',addToMarginLeft($('#list'),li_Width))
})

function addToMarginLeft(elem, pixels) {
var ml = parseFloat(elem.css('margin-left'));
elem.animate({
'margin-left': (ml + pixels) + 'px'
},1000)

}

})

Answer Source

I think this is due to css inline-block white space between element . which cause some extra space , so that why you've got to add 20px .

There are several method to work around this last : comenting between li or just setting font size to 0 like bellow :

ul {
  ...
  font-size: 0
}

bellow you find working snippet :

I've just added some jquery code to prevent miltiple click button which trigger another annimation before the last one is being finished :

// Code goes here
$(function() {

  var li_Width = $('#list').find('.box:first').outerWidth(true);
  // 20 px removed !!!
  $('#list').css('width', $('#list').find('.box').length * li_Width)

  $('#next').click(function() {
    if( !$("#list").is(":animated") )
    $('#list').css('margin-left', addToMarginLeft($('#list'), -li_Width))
  })
  $('#pre').click(function() {
    if( !$("#list").is(":animated") )
    $('#list').css('margin-left', addToMarginLeft($('#list'), li_Width))
  })

  function addToMarginLeft(elem, pixels) {
    var ml = parseFloat(elem.css('margin-left'));
    elem.animate({
      'margin-left': (ml + pixels) + 'px'
    }, 1000)

  }

})
/* Styles go here */

.box {
  width: 100px;
  height: 100px;
}

body {
  margin: 0px;
  padding: 0px;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.pink {
  background-color: pink;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.orange {
  background-color: orange;
}

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  width: 1300px;
  /* here you set font to 0 for extra space */
  font-size: 0
}

li {
  display: inline-block;
  margin-left: 15px;
  padding: 0;
}

#container {
  width: 300px;
  margin: 0 auto 0 auto;
  overflow: hidden;
}

#list {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button id="next">next</button>
  <button id="pre">pre</button>
  <ul id="list">
    <li class="box green">
    </li>
    <li class="box blue">
    </li>
    <li class="box red">
    </li>
    <li class="box yellow">
    </li>
    <li class="box pink">
    </li>
    <li class="box orange">
    </li>
  </ul>
</div>