Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Help with sliding carousel images

Options
  • 11-11-2010 2:49pm
    #1
    DeadlyByDesign
    Registered Users Posts: 853 ✭✭✭


    Am trying to get this image carousel working. I can get as far as the image being displayed put the actual sliding of the images is not happening when I click Prev and Next. If someone could take a look at the code I would be forever greatful

    HTML

    <html>
    <head>
    <script type="text/javascript"

    src="http://jqueryjs.googlecode.com/files/jquery-1.3.2. min

    js"></script>

    <link rel="stylesheet" type="text/css" href="mycss.css" />
    </head>

    <body>


    <div id="container">
    <div id="carousel">

    <ul><img src="halloween.jpg"/><li>
    <ul><img src="chaos.jpg"/><li>
    <ul><img src="wedding.jpg"/><li>
    </ul>
    </div>

    <a id="navNext" href="#">Next</a>
    <a id="navPrev" href="#">Prev</a>
    </div>


    <script type="text/javascript">

    $(document).ready(function(){

    //Define speed for the carousel

    var speed = 600;
    $('#navPrev'). click(function(){
    //As the rest of the Carousel will be hidden, mmove the margin leftuntil

    it's in view

    //jQuery is used to animate() functionand gives the movent a smooth feel
    $('#carousel ul').animate({marginLeft:'-280px'}, speed);
    });

    $('#navNext').click(function(){
    //Move back to start of carousel
    $('#carousel ul').animate({marginLeft:'1px'}, speed);
    });

    });

    </script>
    </body>
    </html>

    css

    #container {height:100px; width: 500px; font-family:Tahoma;}
    #carousel {height: 100px; width: 500px; border: 1px solid #000;overflow:hidden;}

    #carousel ul { list-style-type: none; margin-top: 4px; width:2000px; margin-left:0; left:0; padding-left:1px;}
    #carousel li { display:inline;}
    #carousel ul li img{width:90px; height:90px; border 1px solid #ccc; float:left;}
    #navPrev {float: left;}
    #navNext {float: right;}


Comments

Advertisement