Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by amirmohammed
amirmohammed
1,944 Points

Instead of labels, how can I create radio buttons along the bottom for users to click on corresponding to each slide?

This is for Create a Slider With CSS

1 Answer

jcorum
jcorum
71,830 Points
jcorum
jcorum
71,830 Points

You can add an onClick attribute to many different kinds of things: labels, buttons, etc. I'm assuming you want users to go to another page when they click the button. If so, one way is to call a Javascript function when the button is clicked. Here's sample code from w3schools.com:

<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
</script>

It's not quite what you want as they are putting text into a p element. But it's easy to change the function to one that redirects to another page: window.location.href='the_link_togo_to.html'.

Here's an example from a StackOverflow article about how to do it with jQuery:

$('button selector').click(function(){
   window.location.href='the_link_to_go_to.html';
})
amirmohammed
amirmohammed
1,944 Points

There's a tutorial: Create A Fullscreen Slider With CSS. In it, he uses the following html to navigate between the slides. I wanted to use the more traditional buttons at the bottom. I imagine there is a way to do this with just CSS. I haven't learned javascript as of yet.

    <label for="slide-1-trigger">Slide One</label>
    <label for="slide-2-trigger">Slide Two</label>
    <label for="slide-3-trigger">Slide Three</label>
    <label for="slide-4-trigger">Slide Four</label>
   </header>
            <input id="slide-1-trigger" type="radio" name="slides" checked>
            <section class="slide slide-one">
                <h1>Headline One</h1>
            </section>       
            <input id="slide-2-trigger" type="radio" name="slides"> 
            <section class="slide slide-two">
                <h1>Headline Two</h1>
            </section>  
            <input id="slide-3-trigger" type="radio" name="slides">
            <section class="slide slide-three">
                <h1>Headline Three</h1>
            </section>  
            <input id="slide-4-trigger" type="radio" name="slides"> 
            <section class="slide slide-four">
                <h1>Headline Four</h1>
            </section>