Content Slideshow using Javascript/CSS

Question

I'm trying to make a content slideshow that changes the content by showing/hiding divs (slideOne, slideTwo, slideThree ...). It's not working with the javascript I have, and I'm not quite sure why. I've created a jsfiddle below. The buttons aren't activating the functions/alerts.

https://jsfiddle.net/1wggk6fw/

HTML code for the sections/divs.

<div class="section">
    <div class="slideWrapper">
        <div class="fdSlideAbout" id="aboutSlide">
      Use the buttons above to navigate through the weeks of your pregnancy!
                <br>
                Each week contains information about the little thing that is growing inside you!
                <br>
                Each section lists:
                <ul>
                    <li> the week, month, and trimester you're in.</li>
                    <li>any vital organs that are making themselves known.</li>
                    <li>what to compare the size of baby to for the week.</li>
                </ul>
            </div>

            <div class="fdSlide" id="slideOne">
                <div class="development">
                    <h2> Week One, Month One, Trimester One</h2>
                    <h5> Length: </h5>
                    about 0.014 to 0.04 inches <br>
                    <h5> Weight:</h5> less than 0.04 ounces<br>
                    <h5>Organs Developing: </h5>
                </div> <!--closing development-->
                <div class="sizeOf" id="sizeOne">
                    <p>image goes here</p>
                </div> <!-- closing sizeOne-->
            </div>  <!--closing slideOne -->
            <div class="fdSlide" id="slideTwo">
                <h2> Week Two, Month One, Trimester One</h2>
                <h5> Length: </h5>
                about 0.014 to 0.04 inches <br>
                <h5> Weight:</h5> less than 0.04 ounces<br>
                <h5>Organs Developing: </h5>
            </div>  <!--closing slideTwo -->
            <div class="fdSlide" id="slideThree">
                <h2> Week Three, Month One, Trimester One</h2>
                <h5> Length: </h5>
                about 0.014 to 0.04 inches <br>
                <h5> Weight:</h5> less than 0.04 ounces<br>
                <h5>Organs Developing: </h5>
            </div>  <!--closing slideThree -->
            <div class="fdSlide" id="slideFour">
                <h2> Week Four, Month One, Trimester One</h2>
                <h5> Length: </h5>
                about 0.014 to 0.04 inches <br>
                <h5> Weight:</h5> less than 0.04 ounces<br>
                <h5>Organs Developing: </h5>
            </div>  <!--closing slideFour -->
            <div class="fdSlide" id="slideFive">
                <h2> Week One, Month One, Trimester One</h2>
                <h5> Length: </h5>
                about 0.014 to 0.04 inches <br>
                <h5> Weight:</h5> less than 0.04 ounces<br>
                <h5>Organs Developing: </h5>
            </div> <!--closing slideFive -->
        </div> <!-- closing slideWrapper -->
    <br>
    <div id="fdNavLinks">
        <div class="slideNav">
            <button class="previous" id="pPage">Last Week</button>
            <p class="activePage" id="aPage"></p>
            <button class="next" id="nPage"> Next Week</button>
        </div>
</div>
</div> <!--closing slide section-->

CSS:

    .slideWrapper {
    width: 97%;
    transform: translate3d(0,0,0);
    white-space: nowrap;
}

.slideWrapper .fdSlide {
    float: left;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    border: thin solid green;
    background: no-repeat;
    display: none;
    padding: 5px;
    text-align: center;
}

#slideOne {
    background-color: rgba(144,238,144, .5);
}
#slideTwo{
    background-color: rgba(144,238,144, .5);
}
#slideThree {
    background-color: rgba(144,238,144, .5);
}
#slideFour{
    background-color: rgba(144,238,144, .5);
}
#slideFive{
    background-color: rgba(113, 234, 245, 0.5);
}

.previous, .next{
    color: beige;
    background-color: darkgray;
}

.slideNav {
    text-align: center;
    display: inline;
}

JavaScript:

//Fetal Dev
    //Variables
var previous = document.getElementById('pPage');
var next = document.getElementById('nPage');
var slide = document.getElementsByClassName('fdSlide');
var prevPage = slide.previousElementSibling.id;
var nextPage = slide.nextElementSibling.id;
var firstSlide = slide.id('slideOne');
//Functions

function switchPrev() {
    //actPage = prevPage.id;
    alert(actPage);
    //actPage.style.display = 'inline';
}

function switchNext(){
    //actPage = nextPage.id;
    alert(actPage);
    //actPage.style.display = 'inline';
}


//Event Listeners
previous.addEventListener("click", switchPrev);
next.addEventListener("click", switchNext);

slide.previousElementSibling.id; gives an error because slide is array of div elements it hasn't previousElementSibling attribute — Gurkan İlleez
– Gurkan İlleez, Commented Dec 22, 2016 at 17:24

Vcasso · Accepted Answer · 2016-12-22 17:21:02Z

1

If you inspect the element, you will notice that you have js errors in the console. I commented out the variables with errors and changed your alert to the string (because that variable was not defined), and alert fired on Last Week button. http://www.screencast.com/t/9XTYUww35HAX

answered Dec 22, 2016 at 17:21

Vcasso

1,3481 gold badge9 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Content Slideshow using Javascript/CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related