Want the most effective and the simplest form of jQuery Responsive slider in your blog or website... well.. you came to the right place. Here I've a great jQuery Responsive slider which is easy to handle and easy to put anywhere in your blog or even your website.
Almost no knowledge of coding needed. Just copy and paste and do some tweaks and you're all set with a new jQuery slider to woo your readers and visitors.
- Copy the code below:
<style type="text/css">
/* <![CDATA[ */
#w2bSlideContainer {position: relative;display: block;}
#w2bNivoSlider {position:relative;width:850px !important;height:280px !important;min-height:225px !important;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi57fFCbzttVu2M5lHj5E-NJXFzvIR3RIozNdovykL_uuvtA1TaDfA4ladsP3amHFPBsj8kzN6zmkgabGFyi4LG86l77cPsoqhU3WZ7rt5qljRTurtbsIrcmU_WJQmz-XqvheJ7AzPP6Gsl/s1600/w2bLoader.gif") no-repeat 50% 50%; margin: 20px auto 35px;-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);box-shadow: 0px 1px 5px rgba(0,0,0,0.4);}
#w2bNivoSlider img {position:absolute;top:0;left:0;display:none}
.nivoSlider {position:relative;width:100%;height:auto;}
.nivoSlider img {position:absolute;top:0;left:0}
.nivo-main-image {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img {display:block}
.nivo-caption {padding:10px;font-family:Helvetica,Arial,sans-serif;position:absolute;left:10px;bottom:10px;right:10px;background:#000;color:#fff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:8;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.nivo-caption p {padding:5px;margin:0}
.nivo-caption a {display:inline!important}
.nivo-html-caption {display:none}
.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOw_j6riQKe76KkQVklAPEgTw7kIUoIod-0RX5vvm65L5JceDb53tzIqI0Gu4NYao00wf6CZN_4nraXgXaHc4nQ9o56w-ILrLqWDYnOWq67fLWLOyF8wbMQ5vS7jAtXUjCCfr5G8rxYOSI/s1600/w2bArrows.png") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav {left:10px}
.nivo-nextNav {background-position:-30px 0!important;right:10px}
.nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjanwvPS61_ntjGaXmETDgGluR3TMNddu-fofuWPx_s4Yrv9SSlaKuL-e6_T1-YbSwQr-jI08ua2PGiXlLjlpOGiEKgEcWPEn1x-f6mS68-bcd1nf2ahxxn8DRx2z8vBqY8zgLbBd8U8Smo/s1600/w2bBullets.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect : 'random',
slices : 15,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 3000,
startSlide : 0,
directionNav : false,
directionNavHide : false,
controlNav : false,
keyboardNav : false,
pauseOnHover : true,
captionOpacity : 0.8
});
});
/* ]]> */
</script>
<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="http://www.nosegraze.com/wallbanger-by-alice-clayton/"><img src="http://www.nosegraze.com/wp-content/uploads/2013/02/wallbanger-feature.jpg" title="Wallbanger" alt=""/></a>
<a href="http://www.nosegraze.com/sins-needles-by-karina-halle/"><img src="http://www.nosegraze.com/wp-content/uploads/2013/01/sins-and-needles-feature.jpg" title="Sins & Needles" alt=""/></a>
</div>
</div>
- Now, add a widget to your blogger blog from the layout area and open HTML or Javascipt space.
- Paste the copied code in the area and click ok.
- Rearrange the inserted widget to which ever place you want and view the blog for preview.
- If you want to change the size of the slider then just change width and height size in the following code: position:relative;width:850px !important;height:280px
- To change the images just upload your desired images to an image hosting website like imageshack.us and copy the links of the images and replace with the image links in the code like http://www.nosegraze.com/wp-content/uploads/2013/01/sins-and-needles-feature.jpg
Now to add this Nivo jQuery Responsive slider to your website copy the same code and paste it wherever you want it on your website. Do the same tweaks to modify the slider and you're ready with the slider.
Hope this short and sweet tutorial of inserting a jQuery responsive slider was helpful.
If you need any kind of help then do let me know!! Mail me:: tech3lper@gmail.com
