0
\$\begingroup\$

I made a slide show using array values, it works, but I strongly believe that the way I did is too long.

There should be an easier or more compact way to achieve this.

$(document).ready(function () {

  var num = 0;
  var myArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"];
  var batch = 1;
  var value = 0;
  var tdLength = 5;
  var flag = true;
  var cal = 0;

  var showArray = function (num) {

    var required = myArray.slice(num, (num+5));
    $('.info').empty();

    $.each(required, function (item, n) {

      $('.info').append(
         '<h1>'+ n +'</h1>'
        )

    })

    //value += 5; 

  }


  function add(amount) {
    num = (num + tdLength - 1 + amount) % tdLength + 1

    cal = (num-1) * 5;
    //console.log(myArray.slice(cal, cal+5));
    showArray(cal);

  }

 $('#next-arrow').click(function(e){

   flag = true;

   if(cal >= (tdLength+5)) {
     $(e.target).css({ opacity:0.5 });
     return
   }
   $(e.target).css({ opacity:1});
   add(batch)


 }); 
 $('#prev-arrow').click(function(e){

   flag = false;

   if(cal <= 1) {
     $(e.target).css({ opacity:0.5 });
     return
   }

   $(e.target).css({ opacity:1});
   add(-batch)

 });

 $('#next-arrow').click();

})

HTML :

<div class="info">

    </div>

    <div class="container">

      <a href="#" id="prev-arrow">Previous</a>
      <a href="#" id="next-arrow">Next</a>

    </div>

Live Demo

\$\endgroup\$
  • \$\begingroup\$ Both codes (here and live demo) are not the same, could you please update your question to put the code to review (for now I don't know if it's this one or the one from the live demo) ? \$\endgroup\$ – Loufylouf Jul 7 '15 at 19:38
  • \$\begingroup\$ You work on the demo. that's ok. mean while I made some code change that's it. I am fine with demo code. \$\endgroup\$ – 3gwebtrain Jul 8 '15 at 4:13
  • \$\begingroup\$ Hum, except that if we do a review on the demo code, it won't relate to the code in this question, making it hard to understand for potential viewers (since you can continue to modify the demo). Just copy the code you want a review on here, put a link to a demo if you want and work on a separate planker, to avoid any confusion possible. \$\endgroup\$ – Loufylouf Jul 8 '15 at 7:32
  • \$\begingroup\$ ok. actually there is no difference between the live and the code what i pasted here. \$\endgroup\$ – 3gwebtrain Jul 8 '15 at 8:29
  • \$\begingroup\$ In the demo, there is no tdLength variable, no dead code, no flag variable, no cal variable. Are you sure we are talking about the same demo code (the link at the end of your question) ? \$\endgroup\$ – Loufylouf Jul 8 '15 at 8:42
2
\$\begingroup\$
  1. JavaScript does type conversion automatically, there is no need to create the myArray variable. You can do that entire bit using a for loop similar to this:

    var showArray = function (num) {
      $('.info').empty();
      for (var i = num; i < Math.max(num + 5, 13); ++i) {
        $('.info').append(`<h1>${n}</h1>`);
      }
    };
    

    (Maybe instead of hardcoding 13, you have a const for the length)

  2. Keep your use of semicolons consistent. Either have them or don't. Pick a style convention and stick to it.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.