title: Amazing Slider Not Working
body: <p>So I have created a website in which I decided to use the Amazing Slider on. However, when I go to place the HTML on my HTML page, it doesn't seem to work. I'm not exactly sure why. I'll paste all my code on the page here. I'm not sure if it's because of the small opaque content box that it's in or not but I'd just like it to work INSIDE the content box if at all possible...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Think Jewelry&lt;/title&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
          &lt;meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/&gt;
          &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/&gt;
    &lt;!-- Insert to your webpage before the &lt;/head&gt; --&gt;
      &lt;script src="sliderengine/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="sliderengine/amazingslider.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css"&gt;
      &lt;script src="sliderengine/initslider-1.js"&gt;&lt;/script&gt;
      &lt;!-- End of head section HTML codes --&gt;
          &lt;style&gt;
            #horizon        
       {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 0px;
      width: 100%;
      overflow: visible;
      visibility: visible;
      display: block;
      
     }
  
     #stuff    
      {
     font-family: Verdana, Geneva, Arial, sans-serif;
     background-color: #fff;
     opacity: 0.6;
     margin-left: -500px;
     position: absolute;
     top: -125px;
     left: 50%;
     width: 1000px;
     height: 450px;
     visibility: visible;
     overflow: scroll;
     padding: 10px;
     border: 5px dotted #F3DECD;
     text-align: center;
     }
     
     footer {
      height:45px;
     width:100%;
     background-color:#EAC5E4;
     position:absolute;
     bottom:0;
     font-style: italic;
     }
     
       *{
                  margin:0;
                  padding:0;
              }
              body{
                  font-family:Arial;
      background:#fff url(images/bg1.png) repeat;
      background-size: 700px;
      height: 100%;
      min-height: 100%;
                  
              }
              .title{
                  width:548px;
                  height:119px;
                  position:absolute;
                  background:transparent url(title.png) no-repeat top left;
              }
  
              #content{
                  margin:0 auto;
              }
     
  
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt; 
   
          &lt;div id="content"&gt;
    &lt;a href="index.html"&gt;&lt;div class="title"&gt; &lt;/div&gt;&lt;/a&gt;
  
              &lt;div class="navigation" id="nav"&gt;
                  &lt;div class="item user"&gt;
                      &lt;img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/&gt;
                      &lt;a href="#" class="icon"&gt;&lt;/a&gt;
                      &lt;h2&gt;Home&lt;/h2&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="aboutshop.html"&gt;About the Shop&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="aboutartist.html"&gt;About the Artist&lt;/a&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="item home"&gt;
                      &lt;img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/&gt;
                      &lt;a href="#" class="icon"&gt;&lt;/a&gt;
                      &lt;h2&gt;How-To's&lt;/h2&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="howtojewelry.html"&gt;Jewelry&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="howtoclay.html"&gt;Clay&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="item shop"&gt;
                      &lt;img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/&gt;
                      &lt;a href="#" class="icon"&gt;&lt;/a&gt;
                      &lt;h2&gt;Portfolio&lt;/h2&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="jewelry.html"&gt;Jewelry&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="clay.html"&gt;Clay&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="digital.html"&gt;Digital&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="item camera"&gt;
                      &lt;img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/&gt;
                      &lt;a href="#" class="icon"&gt;&lt;/a&gt;
                      &lt;h2&gt;Contact&lt;/h2&gt;
                      &lt;ul&gt;
        &lt;li&gt;&lt;a href="contact.html"&gt;Questions&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="suggestions.html"&gt;Suggestions&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- The JavaScript --&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="jquery.easing.1.3.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(function() {
                  $('#nav &gt; div').hover(
                  function () {
                      var $this = $(this);
                      $this.find('img').stop().animate({
                          'width'     :'199px',
                          'height'    :'199px',
                          'top'       :'-25px',
                          'left'      :'-25px',
                          'opacity'   :'1.0'
                      },500,'easeOutBack',function(){
                          $(this).parent().find('ul').fadeIn(700);
                      });
  
                      $this.find('a:first,h2').addClass('active');
                  },
                  function () {
                      var $this = $(this);
                      $this.find('ul').fadeOut(500);
                      $this.find('img').stop().animate({
                          'width'     :'52px',
                          'height'    :'52px',
                          'top'       :'0px',
                          'left'      :'0px',
                          'opacity'   :'0.1'
                      },5000,'easeOutBack');
  
                      $this.find('a:first,h2').removeClass('active');
                  }
              );
              });
          &lt;/script&gt;
    
    
    
    
  &lt;div id="horizon"&gt;
   &lt;div id="stuff"&gt;
   &lt;h2&gt; Jewelry Gallery &lt;/h2&gt;&lt;br&gt;
   &lt;p&gt;
    &lt;!-- Insert to your webpage where you want to display the slider --&gt;
      &lt;div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:500px;padding-left:0px; padding-right:83px;margin:0px auto 0px;"&gt;
          &lt;div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;"&gt;
              &lt;ul class="amazingslider-slides" style="display:none;"&gt;
                  &lt;li&gt;&lt;img src="images/bracelet1.jpg" alt="bracelet1" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet2.jpg" alt="bracelet2" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet3.jpg" alt="bracelet3" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet4.jpg" alt="bracelet4" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet5.jpg" alt="bracelet5" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet6.jpg" alt="bracelet6" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet7.jpg" alt="bracelet7" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet8.jpg" alt="bracelet8" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet9.jpg" alt="bracelet9" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet10.jpg" alt="bracelet10" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet11.jpg" alt="bracelet11" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet12.jpg" alt="bracelet12" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet13.jpg" alt="bracelet13" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet14.jpg" alt="bracelet14" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet15.jpg" alt="bracelet15" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet16.jpg" alt="bracelet16" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet17.jpg" alt="bracelet17" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet18.jpg" alt="bracelet18" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet19.jpg" alt="bracelet19" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet20.jpg" alt="bracelet20" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet21.jpg" alt="bracelet21" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet22.jpg" alt="bracelet22" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet23.jpg" alt="bracelet23" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet24.jpg" alt="bracelet24" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet25.jpg" alt="bracelet25" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/showcase.jpg" alt="showcase" data-description="A display of earrings and bracelets in the Revive Your Style showcase." /&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="amazingslider-thumbnails" style="display:none;"&gt;
                  &lt;li&gt;&lt;img src="images/bracelet1-tn.jpg" alt="bracelet1" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet2-tn.jpg" alt="bracelet2" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet3-tn.jpg" alt="bracelet3" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet4-tn.jpg" alt="bracelet4" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet5-tn.jpg" alt="bracelet5" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet6-tn.jpg" alt="bracelet6" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet7-tn.jpg" alt="bracelet7" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet8-tn.jpg" alt="bracelet8" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet9-tn.jpg" alt="bracelet9" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet10-tn.jpg" alt="bracelet10" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet11-tn.jpg" alt="bracelet11" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet12-tn.jpg" alt="bracelet12" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet13-tn.jpg" alt="bracelet13" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet14-tn.jpg" alt="bracelet14" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet15-tn.jpg" alt="bracelet15" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet16-tn.jpg" alt="bracelet16" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet17-tn.jpg" alt="bracelet17" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet18-tn.jpg" alt="bracelet18" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet19-tn.jpg" alt="bracelet19" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet20-tn.jpg" alt="bracelet20" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet21-tn.jpg" alt="bracelet21" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet22-tn.jpg" alt="bracelet22" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet23-tn.jpg" alt="bracelet23" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet24-tn.jpg" alt="bracelet24" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/bracelet25-tn.jpg" alt="bracelet25" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/showcase-tn.jpg" alt="showcase" /&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;div class="amazingslider-engine"&gt;&lt;a href="http://amazingslider.com" title="Responsive jQuery Content Slider"&gt;Responsive jQuery Content Slider&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End of body section HTML codes --&gt;
   &lt;/p&gt;
   
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;footer&gt;
  
  &lt;a href=""&gt;
   &lt;img height="32" width="32" alt=" Deviantart" src="deviantart.png"&gt;  
   &lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;
   &lt;a href=""&gt;
   &lt;img height="32" width="32" alt="Think Jewelry Page" src="facebook.png"&gt; 
  &lt;/a&gt;
  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Copyright&amp;copy; 
  &lt;/footer&gt;
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>