Home/ Questions/Q 7868631
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T01:03:49+00:00

Hey I’m looking to do a simple jquery image slider with a simple dropdown

  • 0

Hey I’m looking to do a simple jquery image slider with a simple dropdown when you click on each of the images,if anybody could help me it would be a lifesaver as i’m not great and still learning html and jquery.So far the code I have is this 

<html>
    <head>
        <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
        <link rel="stylesheet" type="text/css" href="eventspage.css" />
        <title>Events page</title>
        <style>
            img {
                float:left;
            }
            .container {
                width:60%;
                margin
            }
            #slider {
                width:400px;
                background-color:green;
                height:200px;
            }
            div {
                position:absolute;
            }
            .window {
                width:400px;
                height:400px;
                overflow:hidden;
                background-color: aqua;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    </head>
    <body>
        <div class="container">
            <button id="left">left</button> <button id="right">right</button>

            <div class="window">
                <div id="slider" class="block">
                    <img width="200px" src="person1.jpg">
                    <img width="200px" src="person2.jpg">
                </div>
            </div>
        </div>      

        <script>
            $("#right").click(function(){
                $(".block").animate({"left": "+=100px"}, "slow");
            });

            $("#left").click(function(){
                $(".block").animate({"left": "-=100px"}, "slow");
            });
        </script>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For the dropdown part of your question:

    You could do this by adding a jquery event handler on the images

    $("#slider img").click(function() {
  //CODE TO OPEN THE DROPDOWN
});
    • 0