How do I get equal spaces between the list items in this slider?

Question

With appendTo, the distances between the items disappear. Between the 1st and 2nd item. With changes of padding-bottom, left or ... I get no further. Does anyone have a tip for me here? I am stuck.

    $('#slider ul li:first-child').appendTo('#slider ul');

https://jsfiddle.net/Reksio/ofsny8g7/3/

Answer 1

$(function() {
  var nMax = $('#slider ul li').length;
  $('a.back').css({'visibility':'hidden'});
 
 function moveToRight() {
    var num1 = $('#slider ul li:first-child').attr('id').replace('slide','');
    var num2 = $('#slider ul li:last-child').attr('id').replace('slide','');
    if(nMax - 3 == num1) {
      $('a.next').css({'visibility':'hidden'});
    }
    else {
      $('a.back').css({'visibility':'visible'});
    }
    $('#slider ul li:first-child').appendTo('#slider ul');
    var num1 = $('#slider ul li:first-child').attr('id').replace('slide','');
    var num2 = $('#slider ul li:last-child').attr('id').replace('slide','');
  };

function moveToLeft() {
    var num1 = $('#slider ul li:first-child').attr('id').replace('slide','');
    var num2 = $('#slider ul li:last-child').attr('id').replace('slide','');
    if(nMax - 1 != num1) {
      $('a.next').css({'visibility':'visible'});
    }
    if(num2 == 1) {
      $('a.back').css({'visibility':'hidden'});
    }
    $('#slider ul li:last-child').prependTo('#slider ul');
    var num1 = $('#slider ul li:first-child').attr('id').replace('slide','');
    var num2 = $('#slider ul li:last-child').attr('id').replace('slide','');
  };
  $('a.next').on('click', function() {
    moveToRight();
  });
  $('a.back').on('click', function() {
    moveToLeft();
  });
});

* {
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, sans-serif;
}
#main {
  margin: 10px auto;
  width: 800px;
  text-align: center;
}
#headline1 {
  width: 500px;
  border: 1px solid #F0F0F0;
  text-align: left;
  margin: 0px auto;
}
#slider {
  position: relative;
  overflow: hidden;
  width: 800px;
  height: 300px;
  margin: 20px auto;
  padding: 0px;
  border: 1px solid #00F;
}
#slider ul {
  list-style: none;
  position: relative;
  border: 1px solid #CCC;
	margin: 2px;
	padding: 2px;
  font-size:0px;
}
#slider ul li {
  position: relative;
  width: 200px;
  height: 300px;
  font-size: 40px;
  line-height: 300px;
  text-align: center;
  display: inline-block;
	padding: 10px;
	margin: 0px;
}

#slider ul li div{
  background: #CCC;
  border: 1px solid #333;
}

a.next, a.back {
  background: #0F0;
  position: relative;
  padding: 10px;
  text-decoration: none;
  z-index: 999;
  left: -350px;
  top: -180px;
}
a.next {
  left: 352px;
  z-index: 2000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<div id="headline1">dfasfdasfdasf </div>

<div id="slider">
  <ul>
    <li id="slide1"><div>SLIDE 1</div></li>
    <li id="slide2"><div>SLIDE 2</div></li>
    <li id="slide3"><div>SLIDE 3</div></li>
    <li id="slide4"><div>SLIDE 4</div></li>
    <li id="slide5"><div>SLIDE 5</div></li>
    <li id="slide6"><div>SLIDE 6</div></li>
    <li id="slide7"><div>SLIDE 7</div></li>
    <li id="slide8"><div>SLIDE 8</div></li>
  </ul>
</div>

  <a href="#" class="next"> > </a>
  <a href="#" class="back"> < </a>
</div>