NOTICE

Adfly Links not working Find Direct Links HERE

Image Auto Scroller Horizontal In Both Directions Using jQuery For Blogger.

ALSO VISIT:jQuery Horizontal Smooth Slider/Image Scroller with Next/Prev Button

Another Beautiful, clean Black Image Scroller.It scrolls your Image,Links,Text And Videos.It stops on hover.On hovering an image The Set of two Arrows appears in Right As well as Left direction.You can switch it on both directions.Just view its working and looks ! in Demo below : )







Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)






Installation :

Step 1:

Css + Javascripts


Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML now Check Expand Widget Templates

Now Find ]]></b:skin> Then Replace it with Below Code
]]></b:skin>

<link href='http://bloggerplugnplay-files.bravehost.com/imageScroller.css' rel='stylesheet' type='text/css'/>

<script src='http://bloggerplugnplay-files.bravehost.com/scrollerjquery-1.3.2.min.js' type='text/javascript'/>




Step 2:

HTML

click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE

<div id="outerContainer">

 <div id="imageScroller">
     <div id="viewer" class="js-disabled">
         <a class="wrapper" href="http://www.apple.com" title="Apple"><img id="apple" alt="Apple" src="http://4.bp.blogspot.com/_JUJEXEamsyU/SvERMZfHaxI/AAAAAAAAAwk/efIaLaiJZ58/s200/apple.jpg" class="logo"/></a>
         <a class="wrapper" href="http://mozilla-europe.org/en/firefox" title="Firefox"><img id="firefox" alt="Firefox" src="http://3.bp.blogspot.com/_JUJEXEamsyU/SvERMl0BVhI/AAAAAAAAAws/p2InNB3lW88/s200/firefox.jpg" class="logo"/></a>
         <a class="wrapper" href="http://jquery.com" title="jQuery"><img id="jquery" alt="jQuery" src="http://4.bp.blogspot.com/_JUJEXEamsyU/SvERMwOt1YI/AAAAAAAAAw0/q-1NCZ_mh1s/s200/jquery.jpg" class="logo"/></a>
         <a class="wrapper" href="http://twitter.com" title="Twitter"><img id="twitter" alt="Twitter" src="http://2.bp.blogspot.com/_JUJEXEamsyU/SvERNaOx8CI/AAAAAAAAAxE/FIcRUrS26hI/s200/twitter.jpg" class="logo"/></a>
         <a class="wrapper" href="http://jqueryui.com" title="jQuery UI"><img id="jqueryui" alt="jQuery UI" src="http://3.bp.blogspot.com/_JUJEXEamsyU/SvERNIpvqvI/AAAAAAAAAw8/UQvhQTsFnf0/s200/jqueryui.jpg" class="logo"/></a>
     </div>
 </div>

</div>




Now you will see a Scroller on your site.You can replace Images With Any Text,Videos Any thing you like it to have.As i always say...PLEASE DARE TO COMMENT ;)

Credits :Dan Wellman converted to ease for Blogger by Blogger plug n play


ALSO VISIT:jQuery Horizontal Smooth Slider/Image Scroller with Next/Prev Button

7 comments :

  1. Thanks for the Widget :D its great...but i have a question how i can make that the Widget automatic scrolling?

    ReplyDelete
  2. sorry but again your demo is not working :((

    ReplyDelete
  3. Its not working dude........

    ReplyDelete
  4. nice trick..thank u
    http://www.kubur.co.cc

    ReplyDelete
  5. The black image scroller is looking nice but I am not able to download it, some errors are coming. I really don't understand where I am getting wrong.

    ReplyDelete
  6. Hello,

    I have created and shared a JQuery Horizontal Slider.
    Check it out http://lxcblog.com/2010/10/14/jquery-horizontal-slider-sliding-doors-tabs/
    Let me know if you like it.

    Thanks.

    ReplyDelete
  7. Hi, can you please tell me how to reduce the speed of the slider? and also, can i change the background color from black to some other color?

    ReplyDelete

Feel free to leave comment if you like above widget, have any questions or just say Hi! :)