JavaScript Infinite Scrolling Data Horizontal Circularly

You know well about HTML MARQUEE Tag for scrolling data in simple way with controlling it via HTML attributes but there is a big problem there that when your data will end then it will scroll blank spaces till the ending od last data then after ending it will start again so means it will not scroll in circular way so what to do when we need it in circular way?

So now for this here we have Infinite Scrolling Data Horizontal Circularly that is a JavaScript snippet that will just modify your MARQUEE tag so it will not scroll the last empty spaces. When t comes to end it will start the data again so you cant see the end of scrolling ever. Now garb the below code and use it anywhere easily.

Features:

1.) No JQuery File Added.
2.) JavaScript File Added.
3.) No Extra CSS Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

HEAD Tag:

<script type="text/javascript" src="https://www.dynamicdrive.com/dynamicindex2/crawler/crawler.js">
/* Text and/or Image Crawler Script v1.53 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
</script>

Text Slider:

<div class="marquee" id="mycrawler">
Those confounded friars dully buzz that faltering jay. An appraising tongue acutely causes our courageous hogs. Their fitting submarines deftly break your approving improvisations. Her downcast taxonomies actually box up those disgusted turtles.
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '450px',
'background': 'lightyellow',
'border': '1px solid #CC3300'
},
inc: 8, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 4,
neutral: 150,
savedirection: true
});
</script>

Image Slider:

<div class="marquee" id="mycrawler2">
<img src="https://i.imgur.com/FMeXmu7.png"/>
<img src="https://i.imgur.com/nBtL0r9.png"/>
<img src="https://i.imgur.com/TOlYTjC.png"/>
<img src="https://i.imgur.com/91YLG19.png"/>
<img src="https://i.imgur.com/F4ngx9Q.png"/>
<img src="https://i.imgur.com/26PTa2P.png"/>
<img src="https://i.imgur.com/M1HHgEw.png"/>
<img src="https://i.imgur.com/Xe1ZuYP.png"/>
<img src="https://i.imgur.com/Ta7l0Rx.png"/>
<img src="https://i.imgur.com/90sas9T.png"/>
<img src="https://i.imgur.com/5bXHTwF.png"/>
<img src="https://i.imgur.com/FMeXmu7.png"/>
<img src="https://i.imgur.com/SSJWyzH.png"/>
<img src="https://i.imgur.com/M1HHgEw.png"/>
<img src="https://i.imgur.com/Xe1ZuYP.png"/>
<img src="https://i.imgur.com/90sas9T.png"/>
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '600px',
'height': '180px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
</script>

Customization:

1.) You Can Add More HTML-CSS. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…