How to Automatically Slide Text and Images Horizontally Using crawler.js｜DAD UNION

In this article, I’ll show you how to use crawler.js to automatically slide text and images horizontally.

Contents

CSS for Automatically Sliding Text and Images Horizontally
JavaScript for Automatically Sliding Text and Images Horizontally Using crawler.js
HTML for Automatically Sliding Text and Images Horizontally Using crawler.js
Demo Page: Automatically Slide Text and Images Horizontally Using crawler.js
Source：Dynamic Drive DHTML Scripts- Text and Image Crawler

CSS for Automatically Sliding Text and Images Horizontally

Modify as needed.

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

JavaScript for Automatically Sliding Text and Images Horizontally Using crawler.js

Load the crawler.js file and use marqueeInit() to set the style and options for the slide area. I’ve prepared a sliding text area (id=”idTxtslide”) and a thumbnail image area (id=”idImgslide”).

<script type="text/javascript" src="crawler.js"></script>
<script type="text/javascript">
//Slide settings for text (#idTxtslide)
marqueeInit({
	uniqueid: 'idTxtslide',
	style: {
		'padding': '5px',
		'margin': '0px auto',
		'width': '500px',
		'background': 'lightyellow',
		'border': '1px solid #cccccc'
	},
	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,
	persist: true,
	savedirection: true
});
//Slide settings for images (#idImgslide)
marqueeInit({
	uniqueid: 'idImgslide',
	style: {
		'padding': '50px 0 0 0',
		'margin': '0px auto',
		'width': '260px',
		'height': '50px'
	},
	inc: 0, //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: false,
	random: false
});
</script>

You can set options for speed, mouseover behavior, and more.

HTML for Automatically Sliding Text and Images Horizontally Using crawler.js

I’ve prepared a sliding text area (id=”idTxtslide”) and a thumbnail image area (id=”idImgslide”).

<div id="idWrap">
    <h1>Automatically Slide Text and Images Horizontally</h1>

    <div class="marquee" id="idTxtslide">
    “DAD UNION” is a web technology media focused on making life easier for fathers.
    </div>

	<div class="marquee" id="idImgslide"><img src="img1.jpg" border="0" /><img src="img2.jpg" border="0" /><img src="img3.jpg" border="0" /><img src="img4.jpg" border="0" /><img src="img5.jpg" border="0" /></div>
    
</div><!--/idWrap-->