CODEWITHSUNDEEP
javascriptjqueryhtmlcss
reis1089
reis1089

Reputation: 19

Hello! I am trying to make a slider that works. javascript, css, and html

Hello I am trying to make a responsive slider with buttons. The slider should be able to load 4 panels one at a time. There is a timer function set up in the java script to move each div over after 4 seconds. none of it is working as intended! Please help if you can.

My html is: 

<link rel="stylesheet" type="text/css" href="slider.css">
<script type='text/javascript' src='jquery-1.11.2.min.js'> </script>
<script type='text/javascript' src='jquery-ui.min.js'> </script>
<script src='slider.js'> </script>


<div class="slide-viewer">
    <div class="slide-group">
        <div class="slide slide-1">Hello</div>
        <div class="slide slide-2">he2llo</div>
        <div class="slide slide-3">he3llo</div>
        <div class="slide slide-4">g4ello</div>
    </div>
</div>
<div class="slide-buttons"> </div>

</html>

My CSS is

.slide-viewer {
    position: relative;
    overflow:hidden;
    height: 300px;
    background-color:green;
    color: white;
}
.slide-group { 
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    width:100%;
    height:100%;
    display:none;
    position:absolute;
}

.slide:first-child {
    display:block;
}

My JavaScript is:

$('.slider').each(function(){
    var $this = $(this);
    var $group = $this.find('.slide-group');
    var $slides =  $this.find('.slide');
    var buttonArray = [];
    var currentIndex = 0;
    var timeout;

function move(newIndex){
    var animateLeft, slideLeft;

    advance();

    if($group.is(':animated') || currentIndex === newIndex) {
        return;
    }

    buttonArray[currentIndex].removeClass('active');
    buttonArray[newIndex].addClass('active');

    if(newIndex > currentIndex) {
        slideLeft = '100%';
        animateLeft = '-100%';
    } else {
        slideLeft = '-100%';
        animateLeft = '100%';
    }

    $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);
    timeout = setTimeout(function(){
        if(currentIndex < ($slides.length - 1)) {
            move(currentIndex + 1);
        }   else {
            move(0);
        }
    },4000);
}

$.each($slides, function(index){
    var $button = $('<button type="button" class="slide-btn">&bull;</button>') 
    if (index === currentIndex) {
        $button.addClass('active');
    }

    $button.on('click', function(){
        move(index);
    }).appendTo('.slide-buttons');

    buttonArray.push($button);
});

advance();

});

Upvotes: 0

Views: 356

Answers (1)

John S
John S

Reputation: 21492

Your code is trying to instrument all elements with the class "slider" as sliders, but I see no such elements in your HTML. It works if you surround the elements for the slider with <div class="slider"> ... </div>.

<div class="slider">
    <div class="slide-viewer">
        <div class="slide-group">
            <div class="slide slide-1">Hello</div>
            <div class="slide slide-2">he2llo</div>
            <div class="slide slide-3">he3llo</div>
            <div class="slide slide-4">g4ello</div>
        </div>
    </div>
    <div class="slide-buttons"></div>
</div>

jsfiddle

Upvotes: 2

Related Questions