The image-slide buttons don't work


#1



https://www.codecademy.com/courses/web-beginner-en-seyrq/0/4?content_from=make-an-interactive-website%3Ajquery-effects


I can't make the images fade in and out when recreating the code. It would help to have a clean HTML, CSS and Javascript example.


***HTML***
<div class="slide-window">
    <div class="slider">
        
        <div class="active slide">
         <img src="pictures/s1.jpg">
        </div>
        
        <div class="slide">
         <img src="pictures/s2.jpg">
        </div>
        
        <div class="slide">
         <img src="pictures/s3.jpg">
        </div>
        
        <div class="slide">
         <img src="pictures/s4.jpg">
        </div>
        
        <div class="slide">
         <img src="pictures/s5.jpg">
        </div>
    </div>
    </div>
    <br/>
   
    <div class="btns">
        <ul>
            <li><a class="arrow-prev" href="#">000</a></li>
            <li><a class="arrow-next" href="#">111</a></li>
        </ul>
    </div>
    <script src="js/slidertest.js"></script>

***CSS***
.slide-window{
    
    width:900px;
    height:500px;
}

.slider{
    
    width:800px;
    height:480px;
}

.slide{
    width:800px;
    height:480px;
    display:none;
}

.active{
    width:800px;
    height:480px;
    display:block;
}

.btns ul li{
    width:800px;
    height:480px;
    display:inline;
}

***Javascript***
var main = function() {
    $('.arrow-next').click(function() {
        var currentSlide = $('.active');
        var nextSlide = currentSlide.next();
        
        currentSlide.fadeOut(600).removeClass('active');
        nextSlide.fadeIn(600).addClass('active');
        
    });
    
    
}

$(document).ready(main);


#2

Hi Anielfeyt,

Could you please create a Pen with all of your HTML, CSS, and JavaScript code in it so we can help you?

Thanks :slight_smile:


#3

Hi zystvan. Does this help or how should I post it on here? http://codepen.io/Aniel/pen/aNPmLW


#4

@anielfeyt No, that's great :slight_smile:

I forked and fixed your pen, see here:

First, I imported jQuery since you're trying to use it without linking it in first. Then, I removed position: absolute; from .slide, since that was making it hide the "000" and "111" links.

And I used random earth images I found so something would show up instead of just the broken image icon :slight_smile:


#5

Thank you very much!! That solved my problem. :slight_smile:


#7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.