CODEWITHSUNDEEP
javascriptjqueryslider
user2598045
user2598045

Reputation:

Custom jQuery slider for html elements not working

I'm trying to add a slider to animate some paragraphs at my home screen. I don't want to use any plugin. I want to create it myself using jQuery. But there is a problem, it seems that condition in jQuery is not working.

Please checkout following codes and try to fix it.

<div id="slider-viewport">
  <div class="slider">
    <p>1 Cloud based e-commerce solution for your downloadable products</p>
    <p>2 Cloud based e-commerce solution for your downloadable products</p>
    <p>3 Cloud based e-commerce solution for your downloadable products</p>
    <p>4 Cloud based e-commerce solution for your downloadable products</p>
  </div>
</div>

CSS

.slider p {
    font-size: 25px;
    color: #fff;
    height: 100px;
    margin: 0;
}

#slider-viewport {
    width: 100%;
    height: 100px;
    overflow: hidden;
    background-color: black;
}

.slider {
    width: 100%;
    height: auto;
}

jQuery

$(document).ready(function() {

    $('.slider p').first().clone().appendTo('#slider-viewport .slider')

    function slider() {

        var $slider = $('#slider-viewport .slider');
        var currentMargin = $slider.css('margin-top');
        var paraHeight = $('.slider p').height();
        var setMargin = parseInt(currentMargin) - paraHeight;
        var resetMargin = -300;

        if (currentMargin < resetMargin) {
            $slider.css('margin-top', 0);
        };

        $slider.animate({
            marginTop: setMargin
        }, {
            duration: 600,
            easing: "easeOutQuint"
            }
        );
    };

    setInterval(slider, 3000);

});

Upvotes: 0

Views: 338

Answers (3)

Vipul Vaghasiya
Vipul Vaghasiya

Reputation: 479

Fixed Here

http://jsfiddle.net/sk5wq/4/

html code:

<div id="slider-viewport">
  <div class="slider">
    <p>1 Cloud based e-commerce solution for your downloadable products</p>
    <p>2 Cloud based e-commerce solution for your downloadable products</p>
    <p>3 Cloud based e-commerce solution for your downloadable products</p>
    <p>4 Cloud based e-commerce solution for your downloadable products</p>
  </div>
</div>

css code:

.slider p {
    font-size: 25px;
    color: #fff;
    height: 100px;
    margin: 0;
}

#slider-viewport {
    width: 100%;
    height: 100px;
    overflow: hidden;
    background-color: black;
}

.slider {
    width: 100%;
    height: auto;
}

update js code:

$(document).ready(function() {
    setInterval(initSlider, 3000);
});

function initSlider() {

var slider = $('#slider-viewport .slider'),
    sliderMargin = parseInt(slider.css('margin-top')),
    pHeight = parseInt(slider.find('p').height()),
    sliderGep = '-'+(parseInt(slider.height())-pHeight),
    go = 0;   

    if (sliderMargin <= sliderGep) {
        slider.animate({marginTop:pHeight+'px'},0);
        go = '0px'
    }else{
        go = '-='+pHeight+'px'
    }

    slider.animate({
        marginTop: go
    }, {
        duration: 600,
        easing: "easeOutQuint"
    });
}

Upvotes: 0

omma2289
omma2289

Reputation: 54619

You can simplify things a bit by animating the first element only and then resetting and putting it back at the end of the list after the animation, also you can avoid setInterval() by making the function recursive

function slider() {
    var $slider = $('#slider-viewport .slider');
    var $first = $slider.find('p:first');

    $first.delay(3000).animate({'margin-top': $first.height() * -1}, 600, "easeOutQuint", function () {
        $(this).css('margin-top', 0).appendTo($slider);
        slider();
    }); 
};

$(document).ready(function () {
    slider(); 
});

Demo fiddle

Upvotes: 4

user2587132
user2587132

Reputation: 

var currentMargin = $slider.css('margin-top').split('px')[0];

$slider.css('margin-top', '0px');

Update

$(document).ready(function() {

setInterval(slider, 3000);

});


var $slider = $('#slider-viewport .slider'); 
var marginNew = $('.slider p').height();
var limit=marginNew*$('.slider p').length;

function slider() {            

    if(marginNew>=limit)
       marginNew=0;            

    $slider.animate({"margin-top":-marginNew});

    marginNew+=100;      


};

http://jsfiddle.net/Xh9SM/2/

Upvotes: 0

Related Questions