Solved

Slideshow not working right

Posted on 2014-04-03
2
232 Views
Last Modified: 2014-04-04
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
Comment
Question by:mel200
2 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39977137
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
 

Author Closing Comment

by:mel200
ID: 39978593
Thanks, I got it working.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now