The main feature of this slider is infinite effect showing the most newest post, but basically the container may content somethins else like random such as photo / image galery, video, etc. In this tutorial I will try to show you how to create an automatic infinite Carousel Slider. It seems looks nice function for readers to make much easier to explorer the web contents with relative small space plus navigation key to slide the perivious and next post. You can add this anywhere actually, whether after header or probably before footer section on webpage.I have been made the container with four posting to display. This Automatic infinite function has timing control to slide configured with a few lines of JavaScript, simple, you can also set how many post to slide and you may want to stylish up the view using CSS. The code is very lightweight, it will make the loading time normaly, small size about 3kb.
If you're using Blogger platform, I have combined this slider with the most recent posts script. To add this slider only takes a few minutes, let's see how it made. The following step by step how to make automatic Infinite sliding:
1. Add the following code above
]]></b:skin> or </style> in head section.CSS Tab View
#carousel {
background: #fff;
width: 100%;
position: relative;
margin-bottom:10px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
height: 260px;
overflow: hidden;
border: 1px solid #ccc;
}
#carousel .nametag {
font: 18px Arial;
padding: 5px 10px;
color: #FDFDFD;
text-shadow: 1px 1px 1px #00B2B3;
background: #0055C2;
}
#carousel .ccontainer {
position: absolute;
left: 0px;
width: 100%;
overflow: hidden;
}
#carousel ul {
width:100%;
position: relative;
overflow: hidden;
margin-top: 0px;
}
#carousel ul li {
display: inline;
float: left;
margin: 10px 5px 20px 5px;
padding: 8px;
width: 22%;
overflow: hidden;
height: 180px;
border: 1px solid #eee;
}
#carousel .thumb {
height: auto;
width: 100%;
}
.carousel-image-thumb {
width: 100%;
height: 130px;
transition: all 400ms ease-in-out;
}
#carousel .thumb:hover {
opacity:.7;
filter: alpha(opacity=70);
-moz-opacity: .7;
-khtml-opacity: .7;
}
#carousel #previous_button {
position: absolute;
top: 5px;
right: 39px;
width: 25px;
height: 22px;
cursor: pointer;
background: url("../images/paginate.png") no-repeat;
background-position: 0 0;
}
#carousel #next_button {
position: absolute;
top: 5px;
right: 10px;
width: 25px;
height: 22px;
cursor: pointer;
background: url("../images/paginate.png") no-repeat;
background-position: -27px 0;
}
#carousel #next_button:hover, #previous_button:hover {
opacity: 0.8;
}
#carousel ul li a.slider_title {
color: #043FA8;
display: block;
text-align: center;
font: 12px 'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
}
#carousel ul li a.slider_title:hover {
color: #3B7AE9;
}2. Add the following Jquery script code above the
</head>JQuery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>Note: If you already add any similar JQuery above with another version, then skip the step.
3. Add the following JavaScript code above the
</head>Javascript
<script type='text/javascript'>
(function($){$.fn.jCarouselLite=function(o){
o=$.extend({
btnPrev:null,
btnNext:null,
btnGo:null,
mouseWheel:false,
auto:null,
speed:700,
easing:null,
vertical:false,
circular:true,
visible:4,
start:0,
scroll:1,
beforeStart:null,
afterEnd:null
},
o||{});return this.each(function(){
var running=false,
animCss=o.vertical?"top":"left",
sizeCss=o.vertical?"height":"width";
var div=$(this),
ul=$("ul:first",div),
tLi=$(".car",ul),
tl=tLi.size(),
v=o.visible;if(o.circular){
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start+=v;
}
var li=$(".car",ul), itemLength=li.size(), curr=o.start;
div.css("visibility","visible");
li.css({overflow:"hidden",float:o.vertical?"none":"left"});
ul.css({padding:"0",position:"relative","list-style-type":"none","z-index":"1"});
div.css({overflow:"hidden","z-index":"2"});
var liSize=o.vertical?height(li):width(li);
var ulSize=liSize*itemLength;
var divSize=liSize*v;li.css({width:li.width()});
ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));
div.css(sizeCss,divSize+"px");
if(o.btnPrev)$(o.btnPrev).click(function(){
return go(curr-o.scroll);
});
if(o.btnNext)$(o.btnNext).click(function(){
return go(curr+o.scroll);});
if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){
return go(o.circular?o.visible+i:i);
});
});
if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){
return d>0?go(curr-o.scroll):go(curr+o.scroll);
});
if(o.auto)setInterval(function(){
go(curr+o.scroll);
},
o.auto+o.speed);
function vis(){return li.slice(curr).slice(0,v);};
function go(to){if(!running){
if(o.beforeStart)o.beforeStart.call(this,vis());
if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");
curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll;
}
else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");
curr=to==itemLength-v+1?v+1:v+o.scroll;}
else curr=to;}
else{if(to<0||to>itemLength-v)return;
else curr=to;
}running=true;
ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){
if(o.afterEnd)o.afterEnd.call(this,vis());
running=false;
});
if(!o.circular){$(o.btnPrev+","+ o.btnNext).removeClass("disabled");
$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled");}
}return false;};
});};
function css(el,prop){return parseInt($.css(el[0],prop))||0;};
function width(el){return el[0].offsetWidth+ css(el,'marginLeft')+ css(el,'marginRight');};
function height(el){return el[0].offsetHeight+ css(el,'marginTop')+ css(el,'marginBottom');};
})(jQuery);
</script>4. Still in head section, now add the following recent post script code for blogger above the
</head>JavaScript Recent Posts
<script type='text/javascript'>
imgr=new Array(); imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLsJ2hGI3kWMU0V0tQRVVAvbfuyWmBDLXzvgD4TR-DDtA9HJpZ6fqWvkhdf1bLMgYrzGM3cQ38fr8JX8rowdUEnw-wILwlDF6Y7HqB2zA3Q6v8CXNPVTQflLOylnF1BbGmdDCVj_c_PFf0/s1600/no+image.jpg"; showRandomImg=true; aBold=true; numpostsslide=8; function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showpostsslide(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;img = new Array();for (var i = 0; i < numpostsslide; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var pcm;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {pcm = entry.link[k].title.split(" ")[0];break;}}if ("content" in entry) {var postcontent = entry.content.$t;};if(j>imgr.length-1) j=0;img[i] = imgr[j];s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img class="carousel-image-thumb" src="'+img[i]+'"/></a></div><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd);j++;}}
</script>Blue color is the link image to replace if there is no image in the post page, and you should change the link with your own link.
5. Add following code somewhere in the HTML body after header of before footer section.
HTML and JavaScript
<div id='carousel'>
<div class='nametag'>Auto Sliding Most Recent Post</div>
<div id='previous_button'></div>
<div id='next_button'></div>
<div class='ccontainer'>
<ul>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+numpostsslide+"&orderby=published&alt=json-in-script&callback=showpostsslide\"><\/script>");
</script>
</ul>
</div>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .ccontainer").jCarouselLite({
auto: 7000,
scroll: 2,
speed: 500,
visible: 4,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})}
)(jQuery)
</script>Orange color is for customizing purpose.
6. Save Template, and see the results.
