FlexSlider not showing up at all and captions are not showing correctly?

Question

Can someone help me figure out why my flexslider isn't appearing on my page? I have no idea what the issue is.

http://stweb.ccv.edu/CIS-1151-VO02-V13FA/kak10200/final_project/index.html

It is just a white line right now. Here's the code I have implemented based on a tutorial:

<!-- Flexslider CSS and JS -->
<link rel="stylesheet" href="flex/css/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.your_domain.com/flex/js/jquery.flexslider.js"></script>

<!-- Load the flexslider -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
      animation: "slide",  // slide or fade
      controlsContainer: ".flex-container" // the container that holds the flexslider
    });
  });
</script>

            <div class="flexslider">
              <ul class="slides">
                <li>
                  <img src="flex/images/slide1.png" /><p class="flex-caption">Captions and brownies. A winning combination.</p>
                </li>
                <li>
                  <img src="flex/images/slide2.png" /><p class="flex-caption">Captions and brownies. A winning combination.</p>
                </li>
              </ul>
            </div>

UPDATE: So I can now see the slider, but it's very messed up for some reason. Any ideas? Also, does anyone know how to make sure my drop down menu is over the slider rather than beneath it?

Answer 1

First of all remove http://www.your_domain.com in the script tag.

Edit the flexslider css like this:

.flexslider .slides img {
    /*width: 100%;*/
    display: block;
}

NOTE: You could also remove this whole block, if this are ment to be custom styles.

Add those to your own style.css:

.flexslider .slides li {
    position: relative;
}

.flexslider .flex-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 10px;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
}

Also please fix your source images use ctrl-shift-j in chrome to see which are missing.

Change the flexslider styleheet by this one: http://flexslider.woothemes.com/css/flexslider.css

Answer 2

在script src属性中删除http://www.your_domain.com/ 。