Syncing labels to automatic image slider

Question

I'm having trouble trying to sync up my labels for the images that automatically fade in and fade out.

I'm trying to get an 'active' class, which changes the label color to orange, to automatically rotate between labels based on which slide is showing.

I know the display value of each image is set to block when it fades in and the others are set to none when they fade out. I thought that might be the best way to bind the two but I'm not sure what will make it happen.

Here's some code:

            <div class="slideWrap">
                <header>
                    <label for="slide1Trigger">
                        <i class="fa fa-circle active" aria-hidden="true"></i>
                    </label>
                    <label for="slide2Trigger">
                        <i class="fa fa-circle" aria-hidden="true"></i>
                    </label>
                    <label for="slide3Trigger">
                        <i class="fa fa-circle" aria-hidden="true"></i>
                    </label>
                </header>
                <div id="slide1Trigger">
                    <img src="img/SMharley1.png">
                </div>
                <div id="slide2Trigger">
                    <img src="img/SMharley2.png">
                </div>
                <div id="slide3Trigger">
                    <img src="img/SMharley3.png">
                </div>

//Make sure the document is loaded before running any Javascript
$(document).ready(function(){


//Hide the dropdown menu until interaction
$("#menu").hide();

$(".navToggle").click(function(){
    $("#menu").slideToggle();
});

//If the menu is down, allow the user to click anywhere to make it retract
$(document).click(function() {
    if (!$(event.target).is( '.navToggle, #menu' )) {
        $("#menu").slideUp();
    }
});

//Change the color of the button when a new slide is shown
$('i').click(function(){
    $(this).addClass('active');
    $(this).parent().siblings().find('i').removeClass('active');
});



//Make the slides automatically fade in & out
$(".slideWrap > div:gt(0)").hide();

setInterval(function() { 
  $('.slideWrap > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('.slideWrap');
},  3000);

if ( $('#slide1Trigger').is(':visible') ) {
    $('label[for=slide1Trigger]').addClass('active');
}   else {$('label[for=slide1Trigger]').removeClass('active')}

});

Thanks in advance for your help!

Answer 1 · 2016-06-11T20:39:46Z

June 11, 2016 8:39pm

I made a few guesses about the missing code and I think I have a solution:

setInterval(function() { 
  $('.slideWrap > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('.slideWrap');
  $("header .active").removeClass("active");
  $("label[for=" + $('.slideWrap > div:first').attr("id") + "]").addClass("active")
},  3000);

This replaces the setInterval call in the code above. You can also remove the code following it (in the if...else).

Also, change the ".active" selector in the CSS to ".slideWrap header label.active" to give it higher specificity.

Answer 2 · 2016-06-12T13:31:41Z

June 12, 2016 1:31pm

Sorry, this project is not in workspaces. I'm using sublime text. I appreciate your help though, your code removes .active but it doesn't add the class to any labels

Answer 3 · 2016-06-12T13:40:39Z

June 12, 2016 1:40pm

That's correct, I thought I said that in the main question. Here's all my code:

<!DOCTYPE html>

<!--

Adjust responsive design so it looks clean on all screens. 

Add ALT tags to photos -- Done

Rebuild image slider so it's automated. -- Done, figuring out labels


-->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Teko' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Averia+Libre:700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <title></title>
  </head>
    <body>
        <div id="mainWrap">
        <div id="header">
            <div class="nav">
              <ul>
                <li id="mobileWBHD"class="nav1"><a href="http://www.waltersbroshd.com">&num;WBHD</a></li>
                <li id="fixedWBHD" class="nav1"><a href="http://www.waltersbroshd.com">WALTERS BROTHERS HARLEY DAVIDSON</a></li>
                <li class="nav2"><i class="fa fa-bars navToggle" aria-hidden="true">
                    <ol id="menu">
                        <li><a href="http://www.waltersbroshd.com/showroom">NEW HARLEYS</a></li>
                        <li><a href="http://www.waltersbroshd.com/inventory/used">USED HARLEYS</a></li>
                        <li><a href="http://www.harley-davidson.com">HARLEY DAVIDSON USA</a></li>
                        <li><a href="http://www.waltersbroshd.com/map_hours.asp">MAP &amp; HOURS</a></li>
                    </ol></i></li>
                <li class="nav3"><a href="http://www.waltersbroshd.com/custompage3.asp?pg=rentals">RENTALS</a></li>
              </ul>
            </div>
            <div id="headerInfo">
                <img src="img/HarleyLogo.png" class="harleyLogo">
            <div id="desktopCall">
                <h1><span class="Emph">RENTAL SEASON</span> is HERE!</h1>
                <h3>and <span class="Emph big">WALTERS BROTHERS HARLEY DAVIDSON</span> has Central Illinois'</h3> <H1>LARGEST H-D RENTAL FLEET</H1>
            </div>
                <a href="http://www.waltersbroshd.com/"><img src="img/WBHD-logo.png" class="wbhdLogo"></a>
            </div>
        </div>
        <div id="content">
            <div id="mobileCall" class="callToAction">
                <h1><span class="oEmph">RENTAL SEASON</span> is HERE!</h1>
                <h3>and <span class="oEmph big">WALTERS BROTHERS HARLEY DAVIDSON</span> has Central Illinois'</h3> <H1>LARGEST H-D RENTAL FLEET</H1>
            </div>
            <div class="slideWrap">
                <header>
                    <label for="slide1Trigger">
                        <i class="fa fa-circle" aria-hidden="true"></i>
                    </label>
                    <label for="slide2Trigger">
                        <i class="fa fa-circle" aria-hidden="true"></i>
                    </label>
                    <label for="slide3Trigger">
                        <i class="fa fa-circle" aria-hidden="true"></i>
                    </label>
                </header>
                <div id="slide1Trigger">
                    <img src="img/SMharley1.png" alt="The Harley Davidson Road King" title="Rent the Harley Davidson Road King Today!">
                </div>
                <div id="slide2Trigger">
                    <img src="img/SMharley2.png" alt="The Harley Davidson Electra Glide Ultra Classic" title="Rent the Harley Davidson Electra Glide Ultra Classic Today!">
                </div>
                <div id="slide3Trigger">
                    <img src="img/SMharley3.png" alt="The Harley Davidson Road Glide" title="Rent the Harley Davidson Road Glide Today!">
                </div>
            </div>
        </div>
        <div id="footer">
            <header>
                <h3><span class="oEmph big">GET LOST</span><br> for a DAY or for a LIFETIME</h3>
                <h4>on ANY of these models</h4>
            </header>
            <footer>
                <form action="index.html" method="post">
                    <h1>CONTACT US!</h1>
                    <input type="text" id="name" name="user_name" placeholder="Your Name">
                    <input type="email" id="mail" name="user_email" placeholder="Your Email">
                    <input type="tel" id="telephone" name="user_telephone_number" placeholder="Phone Number" maxlength="10">
                    <textarea id="comment" name="user_comment" placeholder="How can we help you?"></textarea>
                    <button type="submit">SUBMIT</button>
                </form>
                <div class="socialMedia">
                    <a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                </div>
                <div class="contact">
                    <div class="address">
                        <h2>Walters Brothers Harley Davidson</h2>
                        <h3>615 S. Maxwell Rd.</h3>
                        <h3>Peoria, IL 61607</h3>
                        <h3>309.697.1917</h3>
                    </div>
                </div>
            </footer>
        </div>

      </div>

    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="js/scripts.js"></script>
</html>

/****************************************
GENERAL STYLES
*****************************************/
* {
  outline: none;
}

html,
#mainWrap {
    text-align: center;
    font-family: 'Teko', sans-serif;
    height: 100%;
    width: 100%;
}

a {
    text-decoration: none;
    color: black;
}

ol, ul, li {
    list-style: none;
}

ol {
    margin-left: 0px;
    padding-left: 0px;
}

/****************************************
NAVIGATION
*****************************************/

.nav {
    font-size: 2em;
    background: black;
    height: 45px;
}

.nav ul {
    margin-top: 0px;
    background: black;
    display: -webkit-flex;
    display: -o-flex;
    display: -moz-flex;
    display: flex;
    -webkit-justify-content: space-around;
    -o-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    height: inherit;
    width: 100%;
    padding: 0;
}

.nav ul li {
    position: relative;
}

.nav ul li a {
    color: white;
    -webkit-transition: color 200ms ease-out .05s;
    -moz-transition: color 200ms ease-out .05s;
    -o-transition: color 200ms ease-out .05s;
    transition: color 200ms ease-out .05s;
}

.nav ul li a:hover, 
.fa.fa-bars:hover {
    color: #f96302;
    cursor: pointer;
}

#menu {
    top: 0;
    margin-top: 45px;
    margin-left: -36px;
    position: absolute;
    background: black;
    height: 175px;
    width: 100px;
    -webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
    -o-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
    z-index: 9999;
}

#menu li {
    font-family: 'Averia Libre', cursive;
    display: block;
    padding: 4px 0px;
    font-size: 0.5em;
    color: white;
}

#fixedWBHD {
    display: none;
}

.fa.fa-bars {
    margin: 5px 10px 0px;
    float: right;
    color: white;
    -webkit-transition: color 200ms ease-out .05s;
    -moz-transition: color 200ms ease-out .05s;
    -o-transition: color 200ms ease-out .05s;
    transition: color 200ms ease-out .05s;
}


/****************************************
HEADER CONTENT
*****************************************/


#header {
    height: 170px;
    background: black;
    margin: 0px auto;
}

#header img {
    padding: 10px;
    height: 100px;
    width: 125px;
}

#header img:hover {
    cursor: pointer;
}

#headerInfo {
    background: #f96302;
    width: 100%;
    height: 150px;
}

.harleyLogo {
    display: inline-block;
    float: left;
}

.wbhdLogo {
    display: inline-block;
    float: right;
}

.callToAction {
    margin: 0px;
    width: 100%;
    height: 150px;
}

#desktopCall {
    margin: 0px;
    height: 100%;
    width: 500px;
    display: none;
}

#desktopCall h1,
#desktopCall h3,
.callToAction h1,
.callToAction h2,
.callToAction h3,
.callToAction h4,
.callToAction h5 {
    margin: 0px;
}

/****************************************
BODY CONTENT
*****************************************/

#content {
    color: white;
    margin: 0px;
    text-align: center;
    height: 480px;
    background: black;
}

/****************************************
IMAGE SLIDER
*****************************************/


.slideWrap {
    margin: 0px auto;
    font-family: 'Teko', sans-serif;
    height: 300px;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.slideWrap div {
    position: absolute;
    height: 100%;
    width: 100%;
}

.slideWrap img {
    height: 300px;
    width: 400px;
}

.slideWrap header {
    padding-top: 6px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9000;
    width: 100%;
    background: black;
}

.slideWrap header label {
    color: white;
    cursor: pointer;
    display: inline-block;
    margin: 2px 4px 0px;
    padding: 2px 0px;
    line-height: 1.25em;
    font-size: 1.2em;
    -webkit-transition: color 200ms ease-out .05s;
    -moz-transition: color 200ms ease-out .05s;
    -o-transition: color 200ms ease-out .05s;
    transition: color 200ms ease-out .05s;
}

.slideWrap header label:hover {
    color: #f96302;
}

/****************************************
FOOTER CONTENT
*****************************************/


#footer {
    background: black;
    height: 750px;
}

#footer header {
    overflow: hidden;
    margin: 0px auto;
    padding-top: 10px;
    font-family: 'Averia Libre', cursive;
    color: white;
    width: 350px;
    height: 100px;
}

#footer footer {
    margin: 0px auto;
    background: rgb(30, 30, 30);
    border: solid 1px rgb(50, 50, 50);
    border-radius: 6px;
    padding: 10px;
    width: 90%;
}

#footer header h4, #footer header h3 {
    margin: 0px;
}

.contact {
    margin: 10px auto 0px;
    height: 150px;
    width: 300px;
    border: solid 1px #f96302;
    border-radius: 6px;
}

.address {
    margin: 0px auto;
    width: 180px;
}

.address h2, .address h3 {
    margin: 0px;
    color: white;
}

.socialMedia {
    margin: 10px auto 0px; 
    height: 40px; 
    width: 225px;
    display: -webkit-flex;
    display: -o-flex;
    display: -moz-flex;
    display: flex;
    -webkit-justify-content: space-around;
    -o-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
}

/****************************************
FONT AWESOME STYLES
*****************************************/

.fa.fa-instagram:hover, 
.fa-twitter:hover, 
.fa-facebook-official:hover,
.fa-youtube-play:hover {
    cursor: pointer;
}

.fa.fa-instagram, 
.fa-twitter, 
.fa-facebook-official,
.fa-youtube-play {
    font-size: 2.5em;
    margin: 0px 6px;

}

.fa.fa-instagram {
    color: #9b6954
}

.fa.fa-twitter {
    color: #4099ff;
}

.fa.fa-facebook-official {
    color: #4c66a4
}

.fa.fa-youtube-play {
    color: #bb0000;
}

/****************************************
CONTACT FORM
*****************************************/


input,
textarea,
select {
  font-family: sans-serif;
  background: rgba(255,255,255,0.1);
  font-size: 16px;
  border: 1px solid black;
  border-radius: 4px;
  margin: 6px;
  padding: 10px;
  height: 10px;
  width: 40%;
  background-color: #e8eeef;
  color: black;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
}

textarea {
  width: 80%;
  height: 60px;
}

form {
  opacity: 1;
  background: #f96302;
  width: 300px;
  margin: 0px auto;
  border-radius: 6px;
  border: 1px solid black;
}

button {
  font-family: 'Teko', sans-serif;
  padding: 19px 19px 18px 19px;
  color: #FFF;
  background-color: black;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  width: 60%;
  margin: 10px;
  border-radius: 6px;
  border: none;
}

button:hover {
  -webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
  -o-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
  color: #f96302;
  cursor: pointer;
}

/****************************************
MISC STYLES
*****************************************/

.oEmph {
    color: #f96302;
}

.Emph {
    color: white;
}

.big {
    font-size: 1.25em;
}

.active {
    color: #f96302;
}

//Make sure the document is loaded before running any Javascript
$(document).ready(function(){


//Hide the dropdown menu until interaction
$("#menu").hide();

$(".navToggle").click(function(){
    $("#menu").slideToggle();
});

//If the menu is down, allow the user to click anywhere to make it retract
$(document).click(function() {
    if (!$(event.target).is( '.navToggle, #menu' )) {
        $("#menu").slideUp();
    }
});

//Change the color of the button when a new slide is shown
$('i').click(function(){
    $(this).addClass('active');
    $(this).parent().siblings().find('i').removeClass('active');
});



//Make the slides automatically fade in & out
$(".slideWrap > div:gt(0)").hide();

setInterval(function() { 
  $('.slideWrap > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('.slideWrap');
  $("header .active").removeClass("active");
  $("label[for=" + $('.slideWrap > div:first').attr("id") + "]").addClass("active")
},  3000);

});

Answer 4 · 2016-06-12T13:46:37Z

June 12, 2016 1:46pm

I just realized targeting the labels isn't going to do anything. I need to target the 'i' like I did with the click function above that.

Answer 5 · 2016-06-12T13:55:34Z

June 12, 2016 1:55pm

I see that. and I realize now that the :hover wasn't actually working until I changed it. But that still doesn't make it work. The labels are not what the .active class needs to be attached to. I need to be targeting the "i" children inside the labels.

Answer 6 · 2016-06-12T14:18:45Z

June 12, 2016 2:18pm

whattttttt... whoa. That was awesome.

Answer 7 · 2016-06-12T14:19:29Z

June 12, 2016 2:19pm

Steven Parker, you're the man. Thank you so much.

Answer 8 · 2016-06-12T14:58:24Z

June 12, 2016 2:58pm

lol okay... now to get it to stop once I click on the label... :D

Answer 9 · 2016-06-12T15:06:35Z

June 12, 2016 3:06pm

Yes. Thank you sir!

Welcome to the Treehouse Community

Looking to learn something new?

Paul Jackson

Paul Jackson

Syncing labels to automatic image slider

Steven Parker

Steven Parker

9 Answers

Steven Parker

Steven Parker

I made a few guesses about the missing code and I think I have a solution:

Paul Jackson

Paul Jackson

Paul Jackson

Paul Jackson

Paul Jackson

Paul Jackson

Steven Parker

Steven Parker

Paul Jackson

Paul Jackson

Steven Parker

Steven Parker

A quick fix would be to change the ".active" selector to ".slideWrap header label.active"

Paul Jackson

Paul Jackson

Paul Jackson

Paul Jackson

Steven Parker

Steven Parker

Paul Jackson

Paul Jackson

Paul Jackson

Paul Jackson

Steven Parker

Steven Parker

Paul Jackson

Paul Jackson

Steven Parker

Steven Parker

Paul Jackson

Paul Jackson

A quick fix would be to change the "`.active`" selector to "`.slideWrap header label.active`"