Solved

Slideshow not working right

Posted on 2014-04-03
2
236 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

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.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

813 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

16 Experts available now in Live!

Get 1:1 Help Now