Moving jquery image slider for featured content in Blogger

Live Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/30111191622-slider.js" type="text/javascript"></script>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdEu_6R2Pf8YaWQWOtysdoStNUnBKVtBiXaamhNcMJATbLkpW6-udkWmja3r6B6ZXvAzT7fX_3qSSMq3rJ7V8KfgA-eF_UYGn5eccOFQIN2NrlWZWFwde3kv68fYbkqv7dLT1OKy9leYA/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIo0XOU7oh1d2-DRKN8YZP9WDhyZtPonpTnx6ztIs3Um1s8bEF3380BXFypLBtzNTLTo666Vjxxt7kBQ84zwansKX3QuoR8fzg3lt_Kjvnt3oE6nNvNnbtxo4GOgHklgdECwGoVFumAJk/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwWsRoMZlXAsGcUWuKEJ35GyQ5vxkr51_qyuOZVwhyphenhyphenl5VSSb8-t3nmy6tnG6_atM-ybbFVKzpE0BuxXSLDeCKJOGEZMYaaX3dCPyqhyCs61E8HB2QgPoiRKqsbG1QE_2IuZuPmxsfzGg/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
</style>



<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st Template -->
<div class="panel">
<a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdqUJ3bUuVxO2ln3mS9ZFRcMKjdJSfiozq-ex0em7sK66z75LKrTqztIlBjHPNgYFQxHCanV03vgDj7m3JfxZW4vc8jmLmGAUhaTy8vjka77WrLv7Hh8mj_EBoa5TNwrI6ndqxfeHGx2QF/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="110"/> </a>
</div>
<!-- end code of 1st -->

<!-- 2nd Template -->
<div class="panel">
<a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn3_5tlBIkwdtzIHATE9mlMTxytSgk2x5eF4Qt6Omp8C9IlqX9Pbw1tvbHexqY7E4huWVpLW9a8E4luFb_vyg3oFZRZsqjy6mF3YSVVv8J31TWfcg1smgl2pd6NgpQdrJjwj5YhjU5_bLS/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="110"/> </a>
</div>
<!-- end code of 2nd -->

<!-- 3rd Template -->
<div class="panel">
<a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLFfYHl-Z8_U669tddOu3ZhmhMvcGutNoI6_sgknVdg6k2OVwsjxWC7GtYefFhmca7O0v0_TksaXT2h-D88QdZMOFNPuSgMKir0kAUJdABYEFhH-h4qhMrl-SP92b9lB9GXf2urhheylQY/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="110"/> </a>
</div>
<!-- end code of 3rd -->

<!-- 4th Template -->
<div class="panel">
<a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFwIw362RSKmcjJKCJmXkn4Y4unsN08LSXtlErCiME47Qv_5w_ZhVFkrxvF08vqKiW-ewhuVtFLvr5aOXutuAOGHlSaZpXL5cHbuHlspYx0YpOTg2lkTa5yeRe9j_XERtdZizRtXfnMvlW/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="110"/> </a>
</div>
<!-- end code of 4th -->


<!-- 5th Template -->
<div class="panel">
<a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwWTOiR1pF5COMe4tCirAFHBR8nzeicRhC6eR_sx0RXeV2O5rOGH9jEthgghybb0tgKI4tDODUeZOxbwTR2F_o-P-SEkxU7iEOKy737lmd3eZD0LSwHzuUayh9dTdS0ur854X88epoDBOh/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="110"/> </a>
</div>
<!-- end code of 6th -->



</div></div></div>