How to make a slider with image and text underneath.

Question

1.00/5 (1 vote)

See more:

I am making a website and I have a tab in the site labeled "games" when you click "games" I want a slider with a image inside a div (so I can make it a button that takes you to a different part of the same website) and then text underneath. Now, this part is very important, I DO NOT want then text on the image. I want the text UNDER the image. The text should change when the image changes ( the image will be a picture of the game and the text will be the description of the game). Also very important, DO NOT USE SCSS, only normal html, css, and js. [While your at it, please add key code events so that when you push the left or right arrow the image and text moves correspondingly. I have no code for this, as I couldn't find what I'm looking for online, nor could I code it myself.

What I have tried:

I tried stackoverflow and finding it on codepen and glitch

Posted 12-Jul-22 7:46am

Cohen Johnson

Updated 12-Jul-22 22:05pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Answer 1 · 2022-07-12T14:11:00

Solution 1

THis Google Search will help you: html slider event listener examples - Google Search[^]

Here is one answer on how it works: onchange vs. oninput for Range Sliders - Impressive Webs[^]

Posted 12-Jul-22 14:11pm

Graeme_Grant

Comments

Cohen Johnson 12-Jul-22 21:35pm

That is not at all the solution to my problem

Graeme_Grant 12-Jul-22 22:02pm

I'm not going to write the code for you, that is your job.

What I have done is given you a search and one possible solution that you can use - All the framework is there, you just need to adapt to your "use case with div + content".

There are services like fiverr[^] and Freelancer[^] where you can pay someone to do it for you...

Richard MacCutchan · Answer 2 · 2022-07-12T22:05:00

Solution 2

See How To Create Range Sliders[^].

Posted 12-Jul-22 22:05pm

Richard MacCutchan