How to Automatically Scroll Text and Images Vertically Using sagscroller.js｜DAD UNION

In this guide, we will show you how to automatically scroll text links and images set in list tags vertically using sagscroller.js.

CSS for Two Patterns of Vertical Scrolling Areas: Text and Images

Note: We have prepared two patterns of vertical scrolling areas for text (id=”mysagscroller”) and images (id=”mysagscroller2″). Feel free to modify them 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:700px;
	margin:0 auto;
	text-align:left;
}

.sagscroller{
	width: 310px;
	height:300px;
	overflow:hidden;
	position:relative;
	border:5px solid black;
}
.sagscroller ul{
	position:absolute;
	margin:0;
	padding:0;
	background:white;
	list-style:none;
	width: 300px;
}
.sagscroller ul li{
	display:block;
}
.sagscroller ul li .rsslabel{
	margin-top:5px;
	font-size:12px;
	clear: both;
}
/* Text List Vertical Scroll Demo */
div#mysagscroller{
	width: 310px;
	height:310px;
	float:left;
}
div#mysagscroller ul li{
	color:000000;
	padding:5px;
	margin-bottom:5px;
}
div#mysagscroller ul li:first-letter{
	font-size:24px;
	background:#666666;
	color:#ffffff;
	padding:0 2px;
	margin-right:2px;
}
/* Image Vertical Scroll Demo */
div#mysagscroller2{
	width: 300px;
	height:600px;
	border:5px solid #C0C0C0;
	float:right;
}
div#mysagscroller2 ul li img{
	border-width:0;
	display:block;
}
-->
</style>

JavaScript for Automatically Scrolling Text Links and Images Using sagscroller.js

Note: We have set two areas to scroll vertically, one for text (id=”mysagscroller”) and one for images (id=”mysagscroller2″). Options such as speed and auto-scroll can be configured.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="sagscroller.js"></script>
<script type="text/javascript">
/* Text List Vertical Scroll Demo */
var sagscroller1=new sagscroller({
	id:'mysagscroller',
	mode: 'manual'
});
/* Image Vertical Scroll Demo */
var sagscroller2=new sagscroller({
	id:'mysagscroller2',
	mode: 'auto',
	pause: 2500,
	animatespeed: 400
});
</script>

HTML for Two Patterns of Vertical Scrolling Areas: Text and Images

Note: We have prepared two patterns of vertical scrolling areas for text (id=”mysagscroller”) and images (id=”mysagscroller2″). Feel free to modify them as needed.

<div id="idWrap">
    <h1>Automatically Scroll Text Links and Images Set in List Tags Vertically</h1>

<div id="mysagscroller" class="sagscroller">
	<ul>
           <li><a href="https://dad-union.com/javascript/158">How to Blink Displayed Images Using jQuery</a></li>
            <li><a href="https://dad-union.com/javascript/155">How to Switch Multiple PNG Images at Regular Intervals with jQuery and setInterval</a></li>
            <li><a href="https://dad-union.com/javascript/153">jquery.tablesorter: Make Table Tags Sortable with JS</a></li>
            <li><a href="https://dad-union.com/javascript/148">snowfall.jquery: Display Confetti with JS</a></li>
            <li><a href="https://dad-union.com/javascript/146">jquery.countdown.js: Display Countdown from Set Date</a></li>
            <li><a href="https://dad-union.com/javascript/158">How to Blink Displayed Images Using jQuery</a></li>
            <li><a href="https://dad-union.com/javascript/155">How to Switch Multiple PNG Images at Regular Intervals with jQuery and setInterval</a></li>
            <li><a href="https://dad-union.com/javascript/153">jquery.tablesorter: Make Table Tags Sortable with JS</a></li>
            <li><a href="https://dad-union.com/javascript/148">snowfall.jquery: Display Confetti with JS</a></li>
            <li><a href="https://dad-union.com/javascript/146">jquery.countdown.js: Display Countdown from Set Date</a></li>
	</ul>
</div>


<div id="mysagscroller2" class="sagscroller">
	<ul>
	<li><img src="i1.jpg" alt="1" /></li>
	<li><img src="i2.jpg" alt="2" /></li>
	<li><img src="i3.jpg" alt="3" /></li>
	<li><img src="i4.jpg" alt="4" /></li>
	<li><img src="i5.jpg" alt="5" /></li>
	<li><img src="i6.jpg" alt="6" /></li>
	<li><img src="i7.jpg" alt="7" /></li>
	<li><img src="i8.jpg" alt="8" /></li>
	<li><img src="i9.jpg" alt="9" /></li>
	<li><img src="i10.jpg" alt="10" /></li>
	</ul>
</div>
    
</div><!--/idWrap-->