Image sliders are useful in showing large number of images in a nice layout, you can easily add links to your slider and it will manage everything on its own. So I was finding this slider out as I needed to embed few images and I got the below own so I though it would be a nice idea to share this with all of you guys.
Now using this image slider you add images the way you want, so the best part about this image slider is that its basically constructed using CSS and 3 Transformation is done using JavaScript. So yes this slider has 3D transformation that makes it look much more awesome. So now if you are good @ CSS you can obviously make few changes into this slider according to you.
So how you liked the above demo of working image slider, so now you can even add links to this slider making it much more easier to link to content.
- Open
Blogger > Template > Edit HTML. - Press
Ctrl +F & search for]]></b:skin>tag & paste below code above it.#slider{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4poi1_4jTuk6hl-rD0PJzWdMkXE6mNeL0ly0gbPcuPpPOHaMLNvCwwWGKzm7ilyDc08izN6cmQYDlLazZgBWRPfYkQIJe4GPqO2OLOR_p9gE6bnxqagan6uOuh2rP5Qa_pfnCmM90X8YQ/s1600/loader.gif) no-repeat 50% 50%;box-shadow:0 1px 5px #999;-moz-box-shadow:0 1px 5px #999;height:350px;margin:15px auto;position:relative;overflow:hidden}#slider img{border:none;display:none;position:absolute}div.mc-caption-bg,div.mc-caption-bg2,div.mc-caption-bg,div.mc-caption,div.mc-caption a,div.mc-caption a:hover{display:none}#slider a.imgLink{border:0;display:none;height:100%;left:0;margin:0;padding:0;position:absolute;top:0;width:100%;z-index:2}div.navBulletsWrapper{top:330px;padding-left:10px;position:relative;z-index:5}div.navBulletsWrapper div{_position:relative;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwVQiQL-o2hVELXJmTyvj55549d_XAzi31qmPvWHY79SrJFu7bdTM0CWkm6U0f8lRJJp8Gk-WZo2iTUxVvp07ZYWDOmOhV_8b_DzYShYfQMUSEHsicQr7LKwIeaJBi3i_760hYg5SFlLZI/s1600/bullet.png) no-repeat 0 0;cursor:pointer;float:left;height:11px;margin-right:10px;overflow:hidden;vertical-align:middle;width:11px}div.navBulletsWrapper div.active{background-position:0 -11px}
- Now again search for
</head>tag & paste below code above it.<script src="https://googledrive.com/host/0B6-apgHh7s2tZG9oR3JMNlN6RHc/image-slider.js" type="text/javascript"></script>
- Now Save Template, your CSS & JavaScript are placed neatly.
- Now navigate to
Blogger > Layout > Add Gadget. - Now choose HTML/JavaScript Gadget & add below code into it.
<div id="slider"><a href="#"><img src="xxxxxxxx"/></a> <a href="#"><img src="xxxxxxx"/></a> <a href="#"><img src="xxxxxxx"/></a> <a href="#"><img src="xxxxxxx"/></a> <a href="#"><img src="xxxxxxx"/></a></div>
- Now just change the blue xxxxxxxx with your own URL (try to maintain the image size according to your image slider).
- That's it now your codes are placed just Save your Gadget and refresh your blog to see this awesome image slider looking good.
- Now if you want to add this slider in any of your POST, just copy the same code provided above and paste it in the HTML section.
That's it hopefully this slider will work like a charm, have fun and do comment if you face any problem using this slider.
(COMMENTS WILL LOAD AUTOMATICALLY)