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
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Help with sliding carousel images

  • 11-11-2010 1: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