treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Why does this not work?

  • This is my home page. For some reason the slider is not loading. Does anyone know why?
    <head>
    <title></title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/silder css/slider.css" />
    <link rel="stylesheet" type="text/css" href="css/silder css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />
    <noscript>
    <link rel="stylesheet" type="text/css" href="css/silder css/noscript.css" />
    </noscript>
    </head>
    @{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Home Page";
    }

    @section featured {
    <section class="featured">
    <div class="content-wrapper">
    <hgroup class="title">
    <h1>Singapore Model United Nations</h1>
    <h2>Slogan goes here</h2>
    </hgroup>
    <p>

    </p>
    </div>
    </section>
    }
    <!--start slider////////////////////////////////////////////////////////////////////////-->
    <div class="wrapper">
    <div id="ei-slider" class="ei-slider">
    <ul class="ei-slider-large">
    <li>
    <img src="images/slider images/6.jpg" alt="image06"/> <a href="#">
    <div class="ei-title">
    <h2>2013 isusses are out!</h2>
    <h3></h3>
    </div>
    </li>
    <li>
    <img src="images/slider images/1.jpg" alt="image01" /> <a href="#">
    <div class="ei-title">
    <h2>Creative</h2>
    <h3>Duet</h3>
    </div>
    </li>
    <li>
    <img src="images/silder images/2.jpg" alt="image02" /> <a href="#">
    <div class="ei-title">
    <h2>Friendly</h2>
    <h3>Devil</h3>
    </div>
    </li>
    <li>
    <img src="images/slider images/3.jpg" alt="image03"/> <a href="#">
    <div class="ei-title">
    <h2></h2>
    <h3></h3>
    </div>
    </li>
    <li>
    <img src="images/slider images/4.jpg" alt="image04"/> <a href="#">
    <div class="ei-title">
    <h2></h2>
    <h3></h3>
    </div>
    </li>
    <li>
    <img src="images/slider images/5.jpg" alt="image05"/> <a href="#">
    <div class="ei-title">
    <h2></h2>
    <h3></h3>
    </div>
    </li>
    <li>
    <img src="images/slider images/7.jpg" alt="image07"/> <a href="#">
    <div class="ei-title">
    <h2></h2>
    <h3></h3>
    </div>
    </li>
    </ul><!-- ei-slider-large -->
    <ul class="ei-slider-thumbs">
    <li class="ei-slider-element">Current</li>
    <li><a href="#">Slide 6</a></li>
    <li><a href="#">Slide 1</a></li>
    <li><a href="#">Slide 2</a></li>
    <li><a href="#">Slide 3</a></li>
    <li><a href="#">Slide 4</a></li>
    <li><a href="#">Slide 5</a></li>
    <li><a href="#">Slide 7</a></li>
    </ul><!-- ei-slider-thumbs -->
    </div><!-- ei-slider -->
    </div><!-- wrapper -->
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script&gt;
    <script type="text/javascript" src="js/jquery.eislideshow.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
    $(function() {
    $('#ei-slider').eislideshow({
    animation : 'center',
    autoplay : true,
    slideshow_interval : 3000,
    titlesFactor : 0
    });
    });
    </script>
    <!--end silder////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
    <section class="features">
    <section class="feature">
    <img src="~/Images/news.png" alt="" />
    <h3>News</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi vel justo pulvinar placerat.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>

    </section>
    <section class="feature">
    <img src="~/Images/photos.png" alt="" />
    <h3>Photos</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi vel justo pulvinar placerat.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>
    </section>
    <section class="feature">
    <img src="~/Images/events.png" alt="" />
    <h3>Events</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi vel justo pulvinar placerat.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>
    </section>
    </section>
  • I'm probably too green to be answering (well, guessing at) this, - - but should both the id and the class be the same name?? (ei-slider??)
  • @tommer, sure they can be the same, there's no reason why they can't. Just make sure the ID is always unique.

    @TheSilverSnake Please share a link to your site or make a demo on jsFiddle.net because in order to figure out why the slider isn't working, we'd need to see the code for it. Which means HTML, css and js are necessary. Also, if you press F12 on your keyboard, it will open up the javascript console which may show what error is causing the problem.
  • A link to my site directory can be fond here: https://www.dropbox.com/sh/xois0ape8xra16q/glsKS7sPGU the file in question is called Default.cshtml . Thank you all for your help but please don't copy my files.
  • Thanks, Mottie . . .
  • Was this fixed? The link you provided shows an empty folder..