Showing an individual image when a particular list item is clicked using jquery

I have created an image slider that automatically transitions between images. However, I would like to have a specific image displayed when a particular list item is clicked in the round buttons below.

For example, if the slider is showing the 5th image and I click on the 2nd list item, I want the 2nd image to be displayed, and then the slider should continue normally. Similarly, clicking on the back button should display the 1st image, and the slider should resume rolling.

Here is the code snippet:

Where am I going wrong?

<!DOCTYPE html>
<html>
<head>

<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<style type="text/css">

    .mySlider
    {
        //
    }

    .shadow_div
    {
        //
    }

    .mySlider img
    {
        width:800px;
        height:480px;
        display:none;

    }

    .Parent_Slider > a
    {
        text-decoration:none;
        font-weight:bold;
        width:32px;
        height:32px;
        position:absolute;
        top:45%;
        text-indent:-9999px;
        display:block;
         border:1px solid white;
    }

    .Next_Class
    {
        right: 282px;
        background-image: url(Images/rightarrow.jpg);
    }

    .Prev_Class
    {
        left:282px;
        background-image:url(Images/leftarrow.jpg);
    }

    ul.Round_Buttons
    {
        position:relative;
        left:35%;
        top:5px;
        text-decoration:none;
        list-style-type:none;
        text-indent:-9999px
    }

   ul.Round_Buttons li
   {
       float:left;
       background-color:white;
       margin:1px 5px;
       padding:0px 7px;
       border-radius:50%;
       border-width:1px;
       border:1px solid #3610a5;
       cursor:pointer;
       box-shadow:1px -1px 3px 1px #3610a5;
       transition:all 1s ease-in-out;
       -moz-transition:all 1s ease-in-out;
       -webkit-transition:all 1s ease-in-out;

   }


</style>

<script type="text/javascript">

    $(document).ready(function () {
        $("#my_image_slider>#1").show("fade", 1000);
        $("#my_image_slider>#1").delay(3500)
             .hide("slide", { direction: 'left' }, 800);

        var image_count = $("#my_image_slider > img").length; //total number of images

        var count = 2;

        setInterval(function () {
            $(("#my_image_slider #") + count)
                   .show("slide", {direction: 'right'}, 1000);

            $(("#my_image_slider #") + count).delay(3500)
                  .hide("slide", { direction: 'left' }, 800);

            if (count == image_count) {
                count = 1;
            } else {
                count = count + 1;
            }
        }, 5300);

        $(".Round_Buttons li").click(function () {
            var id_temp = this.id.charAt(0);
            $("my_image_slider #id_temp").show("fade", 1000);
        });
    });


</script>
</head>

<body>
<div class="Parent_Slider">
    <div id="my_image_slider" class="mySlider">
        <img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
        <img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
        <img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
        <img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
        <img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
    </div>
    <a href="#" class="Next_Class">Next</a>
    <a href="#" class="Prev_Class">Prev</a>
</div>
    <div class="shadow_div" >
        <ul class="Round_Buttons">
            <li id="1_Round_Buttons"><a href="#">1</a></li>
            <li id="2_Round_Buttons"><a href="#">2</a></li>
            <li id="3_Round_Buttons"><a href="#">3</a></li>
            <li id="4_Round_Buttons"><a href="#">4</a></li>
            <li id="5_Round_Buttons"><a href="#">5</a></li>
        </ul>
    </div>  
</body>
</html>

Answer №1

There is no requirement to manually display the target image when clicking on a round button.

Simply reset the value of your count variable to that specific value and allow the setInterval function to handle the display.

$(".Round_Buttons li").click(function () {
    count = this.id.charAt(0);
});

Answer №2

id_temp is a variable that needs to be concatenated with the selector before being used

$(".Circular_Icons li").on("click", function () {
    var id_temp = this.id.charAt(0);
    $("#my_slider_images #" + id_temp).fadeIn(1000);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges with CSS div styling (border and image issues)

I won't bore you with the details, but I'm trying to overlay image links on top of a background image in specific positions. Despite my best efforts, the images are not changing no matter how much I tweak their parameters. Here is the HTML code: ...

Ways to separate information from a database into multiple option tags for a dropdown selection menu

I've been grappling with this problem for weeks - my data is currently listed in one massive option tag, but I need it to be split into multiple option tags. Can anyone help out? (Node.js newbie here) ------------------------------ CODE ------------- ...

Is there a way to create Angular components sourced from an external library using JavaScript?

I'm currently developing an Angular project and leveraging an external component library called NGPrime. This library provides me with a variety of pre-built components, including <p-button> (which I am using in place of a standard <button> ...

Ways to arrange and space out td values

Here is an example of my HTML table: <table> <tr> <td>123 - 20 - 20</td> </tr> </table> The numerical values in the table are retrieved from a database and displayed like in this image: https://i.sstatic.net/ ...

Clicking on a button in the Shield UI Grid Toolbar will apply filters to

Currently, I am working with a grid that utilizes a template for the toolbar. In this grid, there is a column labeled "Status." My goal is to filter the rows so that only those where the Status equals Request to Reschedule, Cancelled, Office Call Required, ...

Code needed to efficiently include a d3 module through webpack

Having some trouble importing and using a d3 module in my webpack project. The function I need from the module is declared like so: https://github.com/d3/d3-plugins/blob/master/hive/hive.js d3.hive.link = function() { I attempted to follow this guide to ...

Utilizing absolute path in Typescript: A comprehensive guide

I am currently working on a project written in Typescript running on NodeJS. Within the project, I have been using relative paths to import modules, but as the project grows, this approach is becoming messy. Therefore, I am looking to convert these relativ ...

Extracting over 100 tweets from the Twitter API with the help of Node.js

I am facing a challenge while trying to fetch over 100 tweets from Twitter in nodejs as I continuously receive an empty array. Here is the approach I have attempted: const MAX_TWEETS = 200; const TWEETS_PER_REQUEST = 100; async function retrieveTweets(T, ...

Application built with Ember and search engine crawling by Google

I'm attempting to optimize my ember application for search engine crawling. I am aware that Google now supports JavaScript, CSS, and AJAX since October 2015. However, when I use "Fetch as Google" to test my site, I am seeing an empty page with just th ...

Can the href values within <a> tags be altered based on the existing href value?

I am currently in the process of integrating Video JS and Colorbox. My objective is to utilize jQuery to easily modify all href values that contain ".mp4" by replacing it with ".html". This modification will enable the existing code to function smoothly, ...

Absence of property persists despite the use of null coalescing and optional chaining

Having some trouble with a piece of code that utilizes optional chaining and null coalescing. Despite this, I am confused as to why it is still flagging an error about the property not existing. See image below for more details: The error message display ...

Tips for submitting a form textarea input from CKEditor using AJAX

I am currently utilizing CKEditor, jQuery, and the jQuery form plugin. My objective is to submit the content of the CKEditor form through an Ajax query. Below is the code I have implemented: <form id="article-form" name="article-form" method="post" act ...

Make multiple images in one row resize proportionally instead of wrapping them to the next line

My phone's screen is small and I want the three images to remain in the same row. In case they don't fit, they should shrink proportionately to maintain alignment (refer to image at the bottom). Consider the code snippet below: <div id="exam ...

Show the name of the channel on the FeatherJS chat application

I've been using this repository as a guide to develop a chat application. Currently, I'm working on displaying the channel name (the default room where users are logged in) in the chat client. Is there a way to retrieve channel information from ...

Interacting with shadow DOM elements using Selenium's JavaScriptExecutor in Polymer applications

Having trouble accessing the 'shop now' button in the Men's Outerwear section of the website with the given code on Chrome Browser (V51)'s JavaScript console: document.querySelector('shop-app').shadowRoot.querySelector ...

What would be the most appropriate namespace to utilize for jQuery widgets?

As I delve into the introductory material on building plugins with the jquery ui widget factory, one key aspect that stands out is the use of a namespaced name: $.widget( 'dp.list', { This raises some questions for me... Is having a namespace ...

SVG path tooltips are not functioning properly, unlike in regular HTML where they work perfectly

I have a CSS/HTML code that works perfectly in plain HTML and is also shown as an example at the end of the demo. However, it fails to work properly in SVG. Upon inspecting the element, I found that the :after code is being called but the tooltip remains ...

A Simple Guide to Setting a Background Image in React Native with the Nativebase.io Library

What is the process for including a background image in React Native with the help of the Nativebase.io Library? I have a specific screen where I need to incorporate a background image, with all other elements positioned at the center of the image. ...

Sending form data from React to Express involves creating a form in the React component,

Hello, I am new to React and trying to figure out how to send registration data from a form submission to my backend. I have attempted the traditional method of setting up the post method and route in the form, but it doesn't seem to be working for me ...

"Positioning a div around a Bootstrap form-inline: A step-by-step guide

When using Bootstrap 3 "form-inline" within a <div>, I noticed that the div seems to be nested within the form-inline. This is how my code looks: HTML <div class="wrapper"> <div class="form-inline"> <div ...