CODEWITHSUNDEEP
javascriptjqueryhtmlcssfrontend
Shahrukh Nasir
Shahrukh Nasir

Reputation: 131

Why jQuery Image Slider does not work?

I had just watched a youtube tutorial (https://www.youtube.com/watch?v=KkzVFB3Ba_o) about Building a Jquery Image gallery (since I have little knowledge of Jquery), However it does not seem to work by any means. I went through my code thoroughly cross checking it, and fixed all possible errors but it still does'nt work. What is it that I'm doing wrong??

HTML:

<div id="slider">
  <ul class="slides">
    <li class="slide"><img src="images/1.jpg"></li>
    <li class="slide"><img src="images/2.jpg"></li>
    <li class="slide"><img src="images/3.jpg"></li>
    <li class="slide"><img src="images/4.jpg"></li>
    <li class="slide"><img src="images/5.jpg"></li>
    <li class="slide"><img src="images/6.jpg"></li>
  </ul>
</div>

CSS:

#slider
{
    width: 720px;
    height: 400px;
    overflow: hidden;
}

#slider.slides
{
    display: block;
    width: 6000px;
    height: 400px;
    margin: 0;
    padding: 0;
}

#slider.slide
{
    float: left;
    list-style-type: none;
    width: 720px;
    height: 400px;
}

Jquery/Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

    $(function() {

    var $slider=$('#slider');
    var $slideContainer=$slider.find('.slides')
    var $slides=$slideContainer.find('.slide');
    var width=720;
    var animationSpeed=1000;
    var pause = 3000;
    var CurrentSlide=1;
    var interval;

     function startSlider()
     {


        interval= setInterval(function(){
            $slider.animate({'margin-left': '-='+width},animationSpeed,function()
                CurrentSlide++;
                if (CurrentSlide===$slides.length){
                    CurrentSlide=1;
                    $slideContainer.css('margin-left',0); 
                }
                });
        },pause);
    }

    function pauseSlider()
    {
        clearInterval(interval);
    }

       $slider.on('mouseenter',pauseSlider).on('mouseleave',startSlider);
       startSlider();

    });



</script>

Source folder of my project: https://drive.google.com/open?id=1M3kvUAWlCRqiZIWLLmTH_60qo0gsxzgT

Upvotes: 0

Views: 341

Answers (2)

Ram Segev
Ram Segev

Reputation: 2571

you are missing curly brackets after function

  $slider.animate({'margin-left': '-='+width},animationSpeed,function()

it should be

  $slider.animate({'margin-left': '-='+width},animationSpeed,function(){

Upvotes: 0

Gyani
Gyani

Reputation: 2241

you are missing 

<ul class="slides">

Upvotes: 2

Related Questions