Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 262
  • Last Modified:

Slideshow not working right

Hi,

Please look at : seasidewindow.com/test/gallery2.html

The slideshow is supposed to function sort of like this one, but with arrows for advance and back. : http://www.pikachoose.com/

I'll attach the code for the example page I have.without-carousel.html

the library folder is uploaded, the bottom.css is uploaded,  and I can't figure out why it's not working.

I know you can though! Thanks in advance!
0
mel200
Asked:
mel200
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
Looking at the console, you are missing a css file and a couple of js errors.

ailed to load resource: the server responded with a status of 404 (Not Found) http://seasidewindow.com/test/slides/base.css
Uncaught ReferenceError: getTwitters is not defined scripts.js:133
Uncaught TypeError: Object [object Object] has no method 'fitVids' scripts.js:5
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Open in new window


Looking at the basic example http://sorgalla.com/jcarousel/examples/basic/
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Basic carousel - jCarousel Examples</title>

        <!-- Shared assets -->
        <link rel="stylesheet" type="text/css" href="../_shared/css/style.css">

        <!-- Example assets -->
        <link rel="stylesheet" type="text/css" href="jcarousel.basic.css">

        <script type="text/javascript" src="../../libs/jquery/jquery.js"></script>
        <script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>

        <script type="text/javascript" src="jcarousel.basic.js"></script>

    </head>
    <body>

        <div class="wrapper">
            <h1>Basic carousel</h1>

            <p>This example shows how to setup a basic carousel with prev/next controls and pagination.</p>

            <div class="jcarousel-wrapper">
                <div class="jcarousel">
                    <ul>
                        <li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
                        <li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
                        <li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
                        <li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li>
                        <li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li>
                        <li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li>
                    </ul>
                </div>

                <p class="photo-credits">
                    Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a>
                </p>

                <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
                <a href="#" class="jcarousel-control-next">&rsaquo;</a>
                
                <p class="jcarousel-pagination">
                    
                </p>
            </div>
        </div>

    </body>
</html>

Open in new window


You need to start with an unordered list of images enclosed by two divs  
<div class="jcarousel-wrapper">
                <div class="jcarousel">

Start over with the basic example and begin placing your own images.  Make sure all of your files are uploaded as well.
0
 
mel200Author Commented:
Thanks, I got it working.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now