Add a image slider banner in magento home page

Image slider is a very interesting in magento. We can implement from Admin->CMS pages in home page and add these code where you want to rotated the image after a while

 <!--Image Slider Start-->
	
	<div align="center">
<script type="text/javascript">

var image1=new Image()
image1.src="{{skin url=images/banner_1.jpg}}"
var image2=new Image()
image2.src="{{skin url=images/banner_2.jpg}}"
var image3=new Image()
image3.src="{{skin url=images/banner_3.jpg}}"

</script>
<a href="http://##">
<img src="{{skin url=images/banner_1.jpg}}" border="2" name="slide" width="890" height="277" /></a>
<script>

//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",5000)
}
slideit()

</script>

</div>
<!--Image Slider End-->
Advertisements

Tagged: , ,

17 thoughts on “Add a image slider banner in magento home page

  1. Rock January 20, 2010 at 10:39 am

    Thank you for the great post, wow that was easy! I’ve been looking around for a simple ad rotator and god it seems everything needs to be complicated with magento, event the simplest thing…

    A small question: is it possible to change the link for each image and have a type of thing??

    I’m a PHP programmer and I still need to learn lots of things in javascript 😉

    thanks a bunch!

  2. Amil Roohani Dar July 21, 2010 at 1:07 pm

    hi,
    there is a mistake in your code. please correct this mistake.
    when i execute code the error was
    *********document.images.slide is undefined********

    i m sending you the place where to correct this one.

    put name inside tag. name=”slide”.

    copy this

    now execute

    regards amil dar

    • mit July 30, 2011 at 8:03 pm

      where u hv to put be clarify…

  3. Amil Roohani Dar July 21, 2010 at 1:10 pm

    inside image tag place name=”slide”

  4. gg August 14, 2010 at 12:17 pm

    it doesnt work for me even after put name=”slide”
    nothing happen and no errors
    zzz

  5. vishal lakhani August 18, 2010 at 2:27 pm

    Where name should be put?Can you give proper place to put that tag name slide

  6. vishal lakhani August 18, 2010 at 2:31 pm

    because in image tag this already name=”slide” already defined still i got this *********document.images.slide is undefined******** Error

  7. vishal lakhani August 18, 2010 at 3:32 pm

    i have done it magento its not give name you have to give id of image like because image dont have name property all other is working!!
    Hope for some 1 usefull!!!

    thanx

  8. jeyam July 26, 2011 at 5:09 pm

    it doesnt work for me even after put name=”slide” nothing all i can see the first image

  9. dancouz July 26, 2011 at 8:32 pm

    The code just work fine.
    One thing: I add 1 image and the slider goes on and when i put the 2 other images, the slider stop…
    Can someone help me with that?

    thx for the good code!!!!!

  10. Jane October 9, 2011 at 6:14 am

    This is great ! Thanx !!

  11. Merk November 23, 2011 at 11:05 pm

    Awesome post, Thanks for shargin with us.

  12. Matrassen January 23, 2012 at 8:27 pm

    Nice one, thanks dude!

  13. Abhijit February 2, 2012 at 2:23 pm

    Great post. It really works. Thank you very much.

  14. Tennisracket February 28, 2012 at 7:56 pm

    Really great post, thanks for the code, this helped me out alot!

    Grtz from holland.

  15. orbitcreator@gmail.com February 28, 2012 at 9:18 pm

    Great code! thx for share,

    by the way, its work in magento enterprise 1.9 too?

  16. Veka March 9, 2012 at 12:51 am

    where and how to add this code

Comments are closed.

%d bloggers like this: