I use a simple html with JQuery SmoothDivScroll. The images scroll nicely, but when you start the file only the right arrow (to scroll faster) is shown. The left arrow only appears when you rollover the right arrow. Can somebody help me to show the left arrow from the beginning?
This is the html I have so far:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic demo - jQuery Smooth Div Scroll</title>
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="http://www.smoothdivscroll.com/css/smoothDivScroll.css" />
<!-- jQuery library - I get it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<!-- jQuery UI widget factory -->
<script src="http://www.smoothdivscroll.com/js/jquery.ui.widget.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.1 - minified for faster loading-->
<script src="http://www.smoothdivscroll.com/js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>
<!-- Script for specified scrolling -->
<script type="text/javascript">
// Initialize the plugin with no custom options
$(window).load(function() {
$("div#makeMeScrollable").smoothDivScroll({
autoScroll: "onstart" ,
autoScrollDirection: "backandforth",
autoScrollStep: 1,
autoScrollInterval: 15,
startAtElementId: "startAtMe",
visibleHotSpots: "always"
});
});
</script>
<!-- Styles for my specific scrolling content -->
<style type="text/css">
#makeMeScrollable
{
width:100%;
height: 200px;
position: relative;
}
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="makeMeScrollable">
<div class="scrollingHotSpotLeft"></div>
<div class="scrollingHotSpotRight"></div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="http://www.creatief-denken.nl/nieuw/images/imagesCD/1.jpg" height="200px"/>
<img src="http://www.creatief-denken.nl/nieuw/images/imagesCD/2.jpg" height="200px"/>
<img src="http://www.creatief-denken.nl/nieuw/images/imagesCD/3.jpg" height="200px" />
<img src="http://www.creatief-denken.nl/nieuw/images/imagesCD/4.jpg" height="200px" />
<img src="http://www.creatief-denken.nl/nieuw/images/imagesCD/5.jpg" height= "200px"/>
<img src="http://www.creatief-denken.nl/nieuw/images/imagesCD/6.jpg" height="200px" />
<img src="http://www.creatief-denken.nl/nieuw/images/imagesCD/7.jpg" height="200px" />
<img src="http://www.creatief-denken.nl/nieuw/images/imagesCD/8.jpg" height="200px" />
</div>
</div>
</div>
</body>
</html>
Before you post, read our: 
