Why isn't my jquery slideshow showing up…?

Question

It should show up between Speaker of the month and Ticket Prices...

i had to delete the second script because it wasn't formatting correctly here, hence the fiddle.

Here is a fiddle to my code: https://jsfiddle.net/5pvb83wc/

<head>
    <meta charset="utf-8">
    <title>The Official Website of the Whitewater Warriors</title>
    <link rel="shortcut icon" href="images/WhitewaterWarriorsLogo - Copy.ico">
    <link rel="stylesheet" href="website.css">  
    <style>   
    a {text-decoration:none;}  
    </style>
    <style>
/* Prevents slides from flashing */
#slides {
  display:none;
}

</head>

<body>

    <header>
        <img src="images/WhitewaterWarriorsLogo.png" height="150" width="150" alt="Warrior Logo">
        <hgroup>
            <h1> <span class="shadow">The Official Website of the Whitewater Warriors</span> </h1>
        </hgroup>
    </header>

    <nav id="nav_bar">
    <ul>
        <li><a href="HOMEPAGE.html" class="current"> Home </a></li>
        <li><a href=""> History </a></li>
        <li><a href=""> Schedule </a></li>
        <li><a href=""> Tickets </a></li>
        <li><a href=""> Contact </a></li>
    </ul>
    </nav>

    <section>
        <h2 style="border-bottom: 2px solid black;"> Warrior Headlines </h2>
        <ul class="Headlines">
            <li>Join us at Perkins Stadium this Saturday 11/14/15 for a FREE meet and greet with the 2015 Warriors!</li>
            <li><a href="PREVIEW.html"> Opponent Breakdown: Rams</a></li>
            <li><a href="http://www.nfl.com/stats/player" target="blank" alt="2015 NFL Stats">Latest NFL Statistics</a></li>
            <li><a href="http://espn.go.com/nfl/injuries"target="blank" alt="2015 NFL Injury">Latest NFL Injury Report</a></li>
        </ul>
        <h2>Speaker of the Month</h2>

        <article> 
            <div id="slides">
            <img src="images/2008.jpg">
            <img src="images/Greenville_Road_Warriors_logo.svg.png">
            <img src="images/TicketsOnSale.png">
            <img src="images/WarriorHeader.png">
            <img src="images/WhitewaterWarriorsLogo.png">
            </div>
        </article>          
        <h2> Our Ticket Packages </h2>
        <ul>
            <li>
                Season Package: $95
            </li>
            <li>
                Patron Package: $200
            </li>
            <li>
                Single Speaker: $25
            </li>
        </ul>
    </section>

    <aside>
        <h2 id="speakers"> 2011-2012 Speakers </h2>
        <h2>October 19, 2011
        <br>
        <a href="speakers/toobin.html">Jeffrey Toobin </a></h2>
        <img src="images/toobin75.jpg" alt="speaker toobin's image" width="75" height="75">
        <h2>November 16, 2011
        <br>
        <a href="speakers/sorkin.html">Andrew Ross Sorkin </a></h2>
        <img src="images/sorkin75.jpg" alt="speaker sorkin's image" width="75" height="75">
        <h2>January 18, 2012
        <br>
        <a href="speakers/chua.html">Amy Chua </a></h2>
        <img src="images/chua75.jpg" alt="speaker chua's image" width="75" height="75">
        <h2> February 15, 2012
        <br>
        <a href="speakers/sampson.html"> Scott Sampson </a></h2>
        <img src="images/sampson75.jpg" alt="speaker sampson's image" width="75" height="75">
    </aside>

    <footer>
        <p>
            <img id="Footer" src="images/Warriors.png" alt="Warrior"><br>
            &copy; 2015, Whitewater Warriors Football, Whitewater, WI 53190
        </p>
    </footer>

</body>

Answer 1

UPDATE: Few mistakes in JS also here is a working JSFiddle link

Here is a simple slider with few CSS and JS. The code below assumes that all the images are of same size. Please change the width & height of '#slide' as required. Let me know if you need a JSFiddle example too. Good luck have fun.

CSS

#slides {
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
}

#slides img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#slides img.active {
    z-index: 5;
}

#slides img.next-active {
    z-index: 3;
}

JS/jQuery

// make the first image '.active'
// can be done in the html itself
$( '#slides' ).find( 'img:first' );

// init the auto slider
setInterval(slider, 2000);

// rtl is right to left
// ltr is left to right
function slider (dir) {

    // set the default direction
    var dir = dir || 'rtl';

    // current and next item to be slided
    var current, next;

    current = $( '#slides' ).find( '.active' );

    if ( dir == 'rtl' ) {
        next = current.next( 'img' ).length ? current.next( 'img' ) : $( '#slides' ).find( 'img:first' );

        // animate out the current image and remove 'active'
        current.animate({ left: '-100%' }, 500, function () { $(this).removeClass('active') });

        //animate in the next image and make it active
        next.addClass( 'next-active' )
            .css({ left: '100%' })
            .animate({ left: '0' }, 500, function () { $(this).removeClass('next-active').addClass('active') });
    } else if ( dir == 'ltr' ) {
        next = current.prev( 'img' ).length ? current.prev( 'img' ) : $( '#slides' ).find( 'img:last' );

        // animate out the current image and remove 'active'
        current.animate({ left: '100%' }, 500, function () { $(this).removeClass('active') });

        //animate in the next image and make it active
        next.addClass( 'next-active' )
            .css({ left: '-100%' })
            .animate({ left: '0' }, 500, function () { $(this).removeClass('next-active').addClass('active') });
    };
};

Why isn't my jquery slideshow showing up…?

Question

1 answers

solution1
1 ACCPTED 2015-11-18 03:50:38

Why isn't my jquery slideshow showing up…?

Question

1 answers

solution1 1 ACCPTED 2015-11-18 03:50:38

solution1
1 ACCPTED 2015-11-18 03:50:38