Why are the button elements not changing the pictures?
01:50 13 Aug 2017

I am in the middle of working on creating my own web site. I just started working on the about me section of the website and I wanted to add a slideshow to showcase pictures of my life and interests. I used the code in the book "Jquery & Javascript by Jon Duckett" but for some reason when I click on the buttons to change to the next slide nothing happens.

/*jslint browser: true*/
/*global $, jQuery, alert*/

$('.slider').each(function () {
    'use strict';
    var $this = $(this),                   //For every slider
        $group = $this.find('.slides'),  //Gets the current slider
        $slides = $this.find('.slide'),      //Gets the slide-group(container)
        buttonArray = [],                   //jQuery object to hold all slides
        currentIndex = 0,                   //Create array to hold nav buttons
        timeout;                           //Used to store the timer



    function move(newIndex) {
        var animateLeft, slideLeft;                   //Declare variables 

        //advance(); 


        //if current slide is showing or a slide is animating, then do nothing
        if ($group.is(':animated') || currentIndex === newIndex) {
            return;
        }

        buttonArray[currentIndex].removeClass('active');   //Remove class from item
        buttonArray[newIndex].addClass('active');  //Add class to new item

        if (newIndex > currentIndex) {
            slideLeft = '100%';
            animateLeft = '-100%';      //Animate the current group to the left
        } else { 
            slideLeft = '-100%';
            animateLeft = '100%';
        }

        //Position new slide to left (if less) or right (if more) of current
        $slides.eq(newIndex).css({left: slideLeft, display: 'block'});
        $group.animate({left: animateLeft}, function () {
            $slides.eq(currentIndex).css({display: 'none'});
            $slides.eq(newIndex).css({left: 0});
            $group.css({left: 0});
            currentIndex = newIndex;
        });
    }

    function advance() {
        clearTimeout(timeout);  //Clear timer stored in timeout
        //Start timer to run an anonymous function every 4 seconds
        timeout = setTimeout(function () {
            if (currentIndex < ($slides.length - 1)) {  //If not the last slide 
                move(currentIndex + 1);                 //Move to next slide 
            } else {                                    //Otherwise                 
                move(0);                                //Move to the first slide
            }
        }, 4000);                                       //Milliseconds timer will wait
    }

    $.each($slides, function (index) {
        //Create a button element for the button
        var $button = $('');
        if (index === currentIndex) {
            $button.addClass('active');
        }
        $button.on('click', function () {
            move(index);
        }).appendTo($this.find('.slide-buttons'));
        buttonArray.push($button);
    });

    advance();

});
html {
    height: 100%;
}


h1 {
    color: white;
    text-align: center;
}

h2{
    color: white;
}
h3 {
    color: white;
}
body{ min-height:100%; 
    padding:0; 
    margin:0; 
    position: relative; 
    overflow-x:hidden;
}
#IDE{
    background-color: white;
    width: 60%;
}
#banner {
    position: absolute;
    top: -20px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 200px;
    z-index: -1;
}
#picture {
    /* border: 50px solid black;*/
    border-radius: 10px;
    display:block;
    margin: 0px auto; 


}
#Paragraph{
    color:white;
    font-size:130%;
}

#Navbar
{
    /*list-style-type: none;*/
    margin: 100px;
    margin-right: -10px;
    margin-left: 0px;
    padding: 0;
    overflow: hidden;
    /*background-color: orange;*/
    background: #1e5799;
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    /*background-image: url("https://www.transparenttextures.com/patterns/black-orchid.png");*/
    /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! ");*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#Navbar a {
    display: block;
    padding: 14px;
    /* background: #e2e2e2;*/
    background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); 
    background: -ms-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); 
    background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    /* background-color: dodgerblue;
    background-image: url("https://www.transparenttextures.com/patterns/fake-brick.png");
    /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

table {
    margin-top: 260px;
    color: white;
    background-color: black;
}
#Navbar li {

    display:inline-block;
    margin-right:0px;
    font-weight: bold;
    color: white;
    float: left;
    border-right: 0px solid #bbb;
}
#Skillset{
    list-style-type: disc;
    color: white;
}
li a, .dropbtn{
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn{
    /* background-color:#111;*/
    background-color: black;
    color: red;
    text-shadow: 0 0 20px blue, 0 0 10px lime;
    font-style: oblique;
    text-decoration:underline;
    background-color: green;
}
#Skillset ul li{
    list-style-type: disc;
}
li.dropdown{
    display:inline-block;
}
.active {
    background-color: #4CAF50;

}


/* THe container 
 - needed to position the drop down content*/
/*.dropdown{
position: relative;
display: inline-block;
}*/
/*Drop down content hidden by default*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color:#f9f9f9;
    min-width;160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
/*Links inside the dropdown*/
.dropdown-content a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align:left;
}

/*Changes color of dropdown links hover*/
.dropdown-content a:hover {background-color:black;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

#sidebar_container
{ float: right;
    width: 300px;}

.sidebar_base
{ width: 200px;
    height: 14px;
    background-color: black;}

.sidebar
{ float: right;
    width: 290px;
    padding: 0;
    margin: 100px 0 16px 0;



}

.sidebar_item
{ background-color: black;
    padding: 0 15px;
    width: 250px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    height: 1000px;

}

.sidebar li a.selected
{ color: #444;} 

.sidebar ul
{ margin: 0;} 

.footer {
    position: absolute;
    bottom: -1100px;
    padding: 1rem;
    background-color: black;
    text-align: center;
    width: 100%;

}

.footer p
{ line-height: 1.7em;
    padding: 0 0 10px 0;
    color: white;

}

.footer a
{ color: #A8AA94;
    text-decoration: none;
}

.footer a:hover
{ color: blue;
    text-decoration:underline;
}

.slider {
max-height: 430px;
  max-width: 940px;
  margin: 0px auto 30px auto;}
slide-viewer {
    position:relative;
    overflow: hidden;
    height: 300%;
}
.slide-group{
    width:100%;
    height:100%;
    position:relative;
}
.slide{
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
.slide:first-child{
    display: block;
}

.slide-buttons {
  text-align: right;
}

.slide-btn {
  border:none;
  background: none;
  color: red;
  font-size: 200%;
    line-height: 0.5em;}

.slide-btn.active, .slide-btn:hover {
  color: #ed8e6c;
  cursor: pointer;}

button {
  font-size: 90%;
  text-align: left;
  text-transform: uppercase;}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}


    
    
        
        
        Bart Allen

        
Bartholomew Allen