Search code examples
javascriptjqueryhoverslidersmoothing

I can't make the smooth scroll slider work on my site

For some reason I can't get the "smooth div scroll" to work on my portfolio site... I'm wondering if there is something obvious I'm doing wrong. This is the link to the tutorial I am using: http://www.smoothdivscroll.com/#howitworks

I use the top code mentioned in the demo in the head.

I use the second code mentioned between a div I have labeled as " because that is where I want this slider to show up, in the "slider" div.

I am fairly new to plugins, but I am very stuck on wanting this slider to work.

Lastly, I use the last code mentioned (the CSS) in my already set up CSS. IT WONT WORK and I'm pulling my hair out. I also have tried to use other people's code that use the same slider, but it won't work.

PLEASE HELP, I'm desperate! I need to finish this website :(

Solution

  • This is fully functional demo page for the smooth scroll plugin. Copy and paste the following html as demo.html on your computer:

    <!DOCTYPE html>
<html>
<head>
<title>jQuery Smooth Div Scroll</title>
<link rel="Stylesheet" type="text/css" href="http://www.smoothdivscroll.com/css/smoothDivScroll.css" />
<style type="text/css">
#scroller {
  width:100%;
  height: 330px;
  position: relative;
}
#scroller div.scrollableArea img {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#scroller").smoothDivScroll({
      mousewheelScrolling: true,
      manualContinuousScrolling: true,
      visibleHotSpotBackgrounds: "always",
      autoScrollingMode: "onstart"
    });
  });
</script>
</head>

<body>
  <div id="scroller">
    <img src="http://www.smoothdivscroll.com/images/demo/field.jpg" alt="Demo image" id="field" />
    <img src="http://www.smoothdivscroll.com/images/demo/gnome.jpg" alt="Demo image" id="gnome" />
    <img src="http://www.smoothdivscroll.com/images/demo/pencils.jpg" alt="Demo image" id="pencils" />
    <img src="http://www.smoothdivscroll.com/images/demo/golf.jpg" alt="Demo image" id="golf" />
    <img src="http://www.smoothdivscroll.com/images/demo/river.jpg" alt="Demo image" id="river" />
    <img src="http://www.smoothdivscroll.com/images/demo/train.jpg" alt="Demo image" id="train" />
    <img src="http://www.smoothdivscroll.com/images/demo/leaf.jpg" alt="Demo image" id="leaf" />
    <img src="http://www.smoothdivscroll.com/images/demo/dog.jpg" alt="Demo image" id="dog" />
  </div>

</body>
</html>

    Now open this file demo.html in a browser (Firefox or Chrome recommended :)), go to the main menu > Save Page As > choose Web Page Complete (demo2.html) and the browser will save all dependencies (libraries it needs) and also convert all absolute to relative links on your local hardisk. I suppose this is the easiest way how to make it functional.