Tagged: scrolling

Smooth Scrolling Promoted Links

I would like to start off by saying a big thank you to Thomas Kahn for doing all the hard work.

I come up with an idea to use the much-loved Promoted Links web part as a carousel. I thought that someone must have done this already, so I started with a Google search, but I couldn’t find a solution. I then started to look for away to carousel the divs within the Promoted Links web part and I found Thomas’s website http://smoothdivscroll.com.

Download: https://github.com/tkahn/Smooth-Div-Scroll/archive/master.zip

smooth-scrolling-promotedlinks

Upload all the required scripts and images, add a Promoted Links and Script Editor web parts to your page and insert the script below (update URL’s).

<style>
.ms-promlink-body {width: 90%; height: 150px; position: relative;}
.ms-promlink-header {display: none;}
</style>

<link rel="Stylesheet" type="text/css" href="http://intranet/Documents/css/smoothDivScroll.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://intranet/Documents/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="http://intranet/Documents/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://intranet/Documents/js/jquery.kinetic.min.js" type="text/javascript"></script>
<script src="http://intranet/Documents/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {

$("div#promotedlinksbody_WPQ2").smoothDivScroll({
mousewheelScrolling: "allDirections",
manualContinuousScrolling: true,
autoScrollingMode: "onStart"
});

$("#promotedlinksbody_WPQ2").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});

});
</script>
Advertisements