Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

Help with sliding carousel images

  • 11-11-2010 02:49PM
    #1
    DeadlyByDesign
    Registered Users, Registered Users 2 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