Transcribe jquery script to pure JS

Transcribe jquery script to pure JS. Note that -400 is in px I would like to leave in percentage instead of px. Thanks in advance : )

Anything can leave it in jquery, but the -400 has to go out in percentage.

Long live Brazil!


<style>
#gallery {
   position: relative;
   width: 200px;
   height: 100px;
   border: 1px green dotted;
   margin: 30px 0 0 150px;
   /* usually an «overflow:hidden» is set here */
}

#overflow:checked + #gallery { 
  overflow:hidden; 
}

#gallery ul {
   font-size: 0;
   white-space: nowrap;
   position: absolute;
   top: 0;
   left: -200px;
   margin: 0; padding: 0;
}

#gallery li {
   display: inline-block;
   vertical-align: top;
   width: 96px;
   height: 96px;
   white-space: normal;
   padding: 2px
}

button {
  font: 40px "Courier New";
  border: 1px #d8d8d8 dotted;
  color: #626262;
  background: none;
  cursor: pointer;
  width: 50px;
  text-align: center;
  margin: 20px -150px 0 150px;
}

label, a {
   font: 14px Georgia;
   font-style: italic;
   color: #626262;
}
</style>

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <label for="overflow">This checkbox toggles <b>overflow: hidden</b> property on the gallery <br> to see the effect when a mask is applied:</label>
  <input type="checkbox" id="overflow">
  
  <div id="kangaroo-brother"> <!-- mask -->
    
    <ul>  <!-- container -->
      <li><img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1"></li>
      <li><img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></li>
      <li><img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3"></li>
      <li><img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=4"></li>
<li><img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=5"></li>
      <li><img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=6"></li>
      <li><img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=7"></li>
      <li><img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=8"></li>
<li><img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=9"></li>
      <li><img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=10"></li>

    </ul>    

  </div>
  
  <button type="button" id="prev">&laquo;</button>
  <button type="button" id="next">&raquo;</button>
  
  
</body>
</html>


<script type="text/javascript">
$(function() {
 
  var gallery = $('#kangaroo-brother'),
      items   = gallery.find('li'),
      len     = items.length,
      current = 1,  /* the current item we're looking */
      
      first   = items.filter(':first-child'),
      second  = items.filter((index)=>index==1),
      last    = items.filter(':last-child'),
      secondlast = items.filter((index)=>index==items.length-2),
      
      triggers = $('button');
   
console.log("second 1 " + second);
  
  /* 1. Cloning first and last item */
  first.before(secondlast.clone(true)); 
  first.before(last.clone(true)); 
  last.after(second.clone(true)); 
  last.after(first.clone(true)); 
  
  /* 2. Set button handlers */
  triggers.on('click', function() {
    
    if (gallery.is(':not(:animated)')) {
     
        var cycle = false,
            delta = (this.id === "prev")? -1 : 1;
            /* in the example buttons have id "prev" or "next" */  
    
        gallery.animate({ left: "+=" + (-400 * delta) }, function() {
      
            current += delta;
       
            /** 
             * we're cycling the slider when the the value of "current" 
             * variable (after increment/decrement) is 0 or when it exceeds
             * the initial gallery length
             */          
            cycle = !!(current === 0 || current > len);
       
            if (cycle) {
                /* we switched from image 1 to 4-cloned or 
                   from image 4 to 1-cloned */
                current = (current === 0)? len : 1; 
                gallery.css({left:  -400 * (current + 1) });
            }
        });   
     }
    
  });
});
</script>

What tests do you have for the code, to ensure that it works properly?

We can use those tests to ensure that converted code achieves exactly the same things that the tests care about.

2 Likes