I've been working on an image slider that halts scrolling when the mouse hovers over it. However, I'd like to use div tags instead of image tags to create custom shapes within the slider using CSS. Does anyone have any advice on how to achieve this? When I attempt to replace the images with divs, the functionality breaks. Any suggestions?
#scroller {
position: absolute;
left: 33%;
top: 14%;
}
#scroller .innerScrollArea {
overflow: hidden;
position: absolute;
top: 10%;
bottom: 0;
left: 0;
right: 0;
}
#scroller ul {
padding: 0;
top: 10%;
position: relative;
}
#scroller li {
padding: 0;
top: 7%;
list-style-type: none;
position: absolute;
}
.test {
width:100px;
height:200px;
background-color:pink;} <!-- SCROLLING IMAGE GALLERY-->
<div id="scroller" style="width: 536px; height: 263px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<li><img src="http://i1055.photobucket.com/albums/s511/Josh_Tilton/website/angels_landing_zpsn5dpgsui.jpg" width="536" height="263" /></li>
<li><img src="http://i1055.photobucket.com/albums/s511/Josh_Tilton/website/big_cottonwood_zpszx8qyyik.jpg" width="536" height="263" /></li>
</ul>
</div>
</div>
<!-- JS SCROLLING IMAGES CODE-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var scroller = $('#scroller div.innerScrollArea');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function(){
var $this = $(this);
$this.css('left', curX);
curX += $this.outerWidth(true);
});
var fullW = curX / 2;
var viewportW = scroller.width();
// Scrolling speed management
var controller = {curSpeed:0, fullSpeed:2};
var $controller = $(controller);
var tweenToNewSpeed = function(newSpeed, duration)
{
if (duration === undefined)
duration = 600;
$controller.stop(true).animate({curSpeed:newSpeed}, duration);
};
// Pause on hover
scroller.hover(function(){
tweenToNewSpeed(0);
}, function(){
tweenToNewSpeed(controller.fullSpeed);
});
// Scrolling management; start the automatical scrolling
var doScroll = function()
{
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW*2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 40);
tweenToNewSpeed(controller.fullSpeed);
});
</script>
</body>
</html>