Developing image slider using jQuery and javascript

Question

Below is my code in that i have developed three functions to get desired image by scrolling and i am having "prev" and "next" divs to move images.It looks good for me but there must be something wrong which is not letting it works.

<!DOCTYPE html>
    <html>
    <head><head>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript" >

        var imageArr = document.getElementsByClassName('slide');
        var offset = imageArr.length-1;
        var currentImage, prevImage, nextImage;

        function getCurrentImage() {
            currentImage = imageArr[offset];
        }

        function getPrevImage() {
            if(offset == 0) 
                offset = imageArr.length-1;
            else
                offset = offset-1;

            prevImage = imageArr[offset];

        }

        function getNextImage() {
            if(offset == imageArr.length-1)
                offset = 0;
            else
                offset = offset+1;

            nextImage = imageArr[offset];

        }

    $("document").ready(function(){

        $(".prev").click(function(){

             $(function(){
                getCurrentImage();
             });
             $(function(){
                getPrevImage();
             });


             $(currentImage).css({right:0px});
             $(prevImage).css({left:0px});

             $(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0'});
             $(prevImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
        });

        $(".next").click(function(){
                 $(function(){
                    getCurrentImage();
                 });
                 $(function(){
                    getNextImage();
                 });


             $(currentImage).css({right:0});
             $(nextImage).css({left:0px});

             $(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0%'});
             $(nextImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
        });

    });


    </script>

    <style>
        .container {
            width : 90%;
            margin-left: 5%;
            margin-right: 5%;
            height : 400px;
            border : 2px solid black;
            position: relative;
        }
        img {
            width:100%;
            height:400px;
            position: absolute;

        }

        .prev, .next {
            position :relative;
            cursor : pointer;
            width : 4%;
            height: 70px;
            border : 1px solid black;
            margin-top: -250px;
            font-size: 40px;
            color:#fff;
            padding-left:10px;
            background: #000;
            opacity: .5;

        }
        .next {
            float:right;
            margin-right: 0px;

        }
        .prev{
            float:left;
            margin-left: 0px;
        }

        .prev:hover, .next:hover{
            opacity: 1;
        }
    </style>
</head>
<body>


    <div class="container">
        <img src="slide1.jpg" class="slide" />
        <img src="slide2.jpg" class="slide" />
        <img src="slide3.jpg" class="slide" />
        <img src="slide4.jpg" class="slide" /> 
    </div>



    <div class="prev" >&#10094;</div>
    <div class="next" >&#10095;</div>


</body>
</html>

Do you see any errors in developer tools? for instance there is a syntax error here==> $(prevImage).css({left:'0px'}); it should be a string or a number — karthick, Jul 18 '17 at 20:47
You may be interested in a jquery plugin that already exists that does this: http://jquery.malsup.com/cycle2/ — War10ck, Jul 18 '17 at 21:02

score 0 · Accepted Answer · answered Jul 18 '17 at 21:00

0

You have syntax errors in $().css({right: 0px}); should by $().css({right: '0px'});
Getting html elements also must be after $("document").ready, because your html elements do not exist before.

It works for me:

    $("document").ready(function(){
    var imageArr = document.getElementsByClassName('slide');
    var offset = imageArr.length-1;
    var currentImage, prevImage, nextImage;

    function getCurrentImage() {
        currentImage = imageArr[offset];
    }

    function getPrevImage() {
        if(offset == 0) 
            offset = imageArr.length-1;
        else
            offset = offset-1;

        prevImage = imageArr[offset];

    }

    function getNextImage() {
        if(offset == imageArr.length-1)
            offset = 0;
        else
            offset = offset+1;

        nextImage = imageArr[offset];
    }

    $(".prev").click(function(){

         $(function(){
            getCurrentImage();
         });
         $(function(){
            getPrevImage();
         });

         $(currentImage).css({right: '0px'});
         $(prevImage).css({left: '0px'});

         $(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0'});
         $(prevImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
    });

    $(".next").click(function(){
             $(function(){
                getCurrentImage();
             });
             $(function(){
                getNextImage();
             });


         $(currentImage).css({right: '0px'});
         $(nextImage).css({left: '0px'});

         $(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0%'});
         $(nextImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
    });
 });

answered Jul 18 '17 at 21:00

yellowmint

130
5

i accepted @yellowmint as i am new so i didn't know about it.sorry for it – Aasim Jul 19 '17 at 15:08
No problem. I'm here from 3 days :) – yellowmint Jul 19 '17 at 15:16
though it is working now but the sliding of images are not as i wanted.I want when i click "prev" then image should slide from "prev" to "next" and on clicking "next" image should slide from "next" to "prev".How to achieve it? – Aasim Jul 19 '17 at 15:23
It is not perfect, but I do [this](https://jsfiddle.net/vy317fns/). In css left property is stronger than right, so you must clear left if you want right. – yellowmint Jul 19 '17 at 15:58
Btw as @War10ck mentioned exist many libraries to do this. I can recommend [slick](http://kenwheeler.github.io/slick/). – yellowmint Jul 19 '17 at 16:18
code edited at JSFiddle is working but sometimes a part of background and rarely blank is appearing but i want both should slide connecting each other without appearing background.How to sort it out ? – Aasim Jul 19 '17 at 16:45
Change order of animations. First start animate new image, then old image.[Update](https://jsfiddle.net/vy317fns/1/) – yellowmint Jul 19 '17 at 18:05
can you look at this question [link]https://stackoverflow.com/questions/45618434/update-dynamically-a-page-through-ajax-and-php , i asked and want to display newly submitted data just after div(#first) every time and previuosly inserted data should shift one below so that newly inserted data could be inserted after the div(#first).thanks – Aasim Aug 18 '17 at 06:44

Developing image slider using jQuery and javascript

1 Answers1