How to call jquery in a html page?

Question

    var currentIndex = 0,
      items = $('.container div'),
      itemAmt = items.length;

    function cycleItems() {
      var item = $('.container div').eq(currentIndex);
      items.hide();
      item.css('display','inline-block');
    }

    var autoSlide = setInterval(function() {
      currentIndex += 1;
      if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
      }
      cycleItems();
    }, 3000);

    $('.next').click(function() {
      clearInterval(autoSlide);
      currentIndex += 1;
      if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
      }
      cycleItems();
    });

    $('.prev').click(function() {
      clearInterval(autoSlide);
      currentIndex -= 1;
      if (currentIndex < 0) {
        currentIndex = itemAmt - 1;
      }
      cycleItems();
    });

This is my jquery in my other file. Do you know how to include this script from my html page?

<button class="next">Next</button>
  <button class="prev">Previous</button>
  <div class="container">
    <div style="display: inline-block;">
      <img src="http://placeimg.com/400/200/people"/>
    </div>
    <div>
     <img src="http://placeimg.com/400/200/any"/>
    </div>
    <div>
      <img src="http://placeimg.com/400/200/nature"/>
    </div>
    <div>
      <img src="http://placeimg.com/400/200/architecture"/>
    </div>
    <div>
      <img src="http://placeimg.com/400/200/animals"/>
    </div>
    <div>
      <img src="http://placeimg.com/400/200/people"/>
    </div>
    <div>
      <img src="http://placeimg.com/400/200/tech"/>
    </div>
  </div>

This is my html file and I included the script at the start of the code. But it seems the connection is not being created? I am a beginner for this. Thanks

Answer 1

You can put all jquery in .js file, Suppose you have put your jquery in custom.js file:

In your html/php file include this custom.js file in the beginning:

<script type="text/javascript" src="custom.js"></script>

Answer 2

You can include the whole jquery on your PHP page by using the script tag of HTML . First of all copy the code and place it within the script tag . Please take a look below .

<script type="text/javascript"> 

// your jquery code // 

</script>

Answer 3

If you want to keep javascript code in your php file then wrap it into <script> </script> tag and put it at the end of your php file .

If it's a separate .js file then include it at the end of your php file : <script type="text/javascript" src="Path/of/your/.js/file"> </script> .