Home/ Questions/Q 4593956
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T22:45:36+00:00

Hello Guys! I have been trying to create a cool Image Slider using Jquery!

  • 0

Hello Guys!

I have been trying to create a cool Image Slider using Jquery! I have created it’s framework but I was starting with the basics in creating the plugins. My following code is not seems to be working at all! Can anyone suggest where I’m going wrong? 

<html>
      <head>
             <title>Content Slider</title>
             <script src="jquery-1.5.2.min.js"></script>
             <script src="ajax.jquery.1.8.11.js"></script>
             <script src="img.slider.plugin.js"></script>
             <script>

              jQuery.fn.imgSlider = function () {
                var element = this;
                var imgArray = [];
                $(element+" img").each(function() {
                    var imgId = $(this).attr("id");
                    var imgDesc = $(this).attr("desc");
                    var imgSrc = $(this).attr("src");
                    imgArray.push({
                                   'id':imgId,
                                   'desc':imgDesc,
                                   'src':imgSrc
                                  });
                });
                $.each(imgArray,function( i, v ){
                    element.append($( "<p> Image ID - " + v.id + " | Image Desc - " + v.desc + " | Image Source - " + v.src + "</p>" ));
                });
              }

              $(document).ready(function () {
                    $('div.frame').imgSlider();
              });
             </script>
      </head>
      <body>
             <div class="frame">
                   <img id="1" desc="This Image One!" src="bg-1.jpg" />
                   <img id="2" desc="This Image One!" src="bg-2.jpg" />
                   <img id="3" desc="This Image One!" src="bg-3.jpg" />
                   <img id="4" desc="This Image One!" src="bg-4.jpg" />
                   <img id="5" desc="This Image One!" src="bg-5.jpg" />
             </div>
      </body>
</html>

THANKS IN ADVANCE

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    the problem lies with var element = this; and $(element+" img")

    this refers to the current jquery object. it is not a string to concatenate to.

    use 

    $("img", element).each(function(){/*your code here*/})

    for the second part.

    Or more useful if you want to have multiple sliders in the page

    element.each(function(){
   $('img', this).each(function(){/*your code here*/});
})
    • 0