How do I insert this jQuery slider plugin?

Question

I have the HTML and CSS in just fine. However, I cannot seem to figure out how to insert the jQuery and plugin correctly. I am somewhat new to jQuery and JavaScript. I must be placing these incorrectly and I am confused on how to do this. It seems so simple, but I am not seeing it.

Here is a reference to where I have gotten the code from: http://www.jqueryscript.net/rotator/Infinite-Looping-Scroller-Plugin-With-jQuery-loopmovement.html

Below are the links to the JS that I've placed in the bottom of the HTML

 <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="js/jquery.loopmovement.min.js"></script> <script src="js/jquery.loopmovement.js"></script>

As you can see the HTML and CSS are fine, but nothing works as it should. It's not moving.

Answer 1

My guess is that you should:

1 - download the javascript files from the plugin site

2 - save them inside a 'js' folder on your project (create one if you already didn't)

3 - link the files in your html using usual <script src=""> code.

That can make your plugin work.

Answer 2

 $('#box1').loopmovement({ 'direction':'top', 'speed':20 });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://www.jqueryscript.net/demo/Infinite-Looping-Scroller-Plugin-With-jQuery-loopmovement/jquery.loopmovement.css" rel="stylesheet"/> <script src="http://www.jqueryscript.net/demo/Infinite-Looping-Scroller-Plugin-With-jQuery-loopmovement/jquery.loopmovement.min.js"></script> <div id="box"> <div id="box1"> <div class="content toLeft"><i class="fa fa-hashtag"></i> This is Item 1</div> <div class="content toLeft"><i class="fa fa-hashtag"></i> This is Item 2</div> <div class="content toLeft"><i class="fa fa-hashtag"></i> This is Item 3</div> </div> </div>

Would you please refer my above code?