どもです。
スライドショーについて、フェードタイプのもの、カルーセルとしても使えるスライドするものの二種類紹介していましたが、後者についてはこのままではレスポンシブ（スマホ）サイトに対応できません。
ので、レスポンシブサイト対応版作りました。
// JavaScript Document
$(document).ready(function(){
var productHow = $('スライド中身').length; // スライドの数
var productno = 1 ; // スライドの現在番号
var slidflug = 1 ;
var w = 0; //ウィンドウサイズ
var d = 0; //スライド中身のサイズ
var p = 0; //スライドの基準位置
var q = 0; //スライドの次回移動先
function windowSize(){
w = $('html').width(); //ウィンドウサイズを取得
if( w < 540 ){ //ウィンドウサイズが540px(スマホ・PC切り替えサイズ)以下のとき…
d = $('html').width(); //スライド中身のサイズをウィンドウサイズと同じに
}else{ //ウィンドウサイズが切り替えサイズ以上のとき
d = $('スライド祖父母要素').width(); //スライドの中身サイズはスライドの祖父母要素に
}
$('スライド中身').css({"width":d+"px"}); //先のifの結果を反映
q = productHow * d ; // スライドの基準位置（ずれるときは個別調整）
p = q + ( ( productno - 1 ) * d ) ; //サイズ変更後の現在のスライドの位置を算出し、移動先に代入
$("スライド祖父母要素").animate({scrollLeft:p}, 1, "swing"); //算出した現在のスライド位置を適用
}
function slide(){
p = q + ( ( productno - 2 ) * d ) ; //1つ前の位置を代入
$("スライド祖父母要素").animate({scrollLeft:p}, 1, "swing", function(){ //スライド1つ前に移動
p = q + ( ( productno - 1 ) * d ) ; //移動先の位置を代入
$("スライド祖父母要素").animate({scrollLeft:p}, 1000, "swing"); //代入した位置にスライド
});
}
var element = $('スライド中身').clone(true) ; // スライドを複製
$("スライド親要素").append(element); // cal ul の末尾に複製を挿入
var element = $('スライド中身').clone(true) ;
$("スライド親要素").append(element); // cal ul の末尾に複製を挿入（2回やっとく）
setInterval(function() {
if(slidflug === 1 ){
if(productno >= productHow){
productno=1;
}else{
productno++;
}
slide();
}else{
slidflug = 1 ;
}
}, 6000); //スライド時間間隔（個別調整）
$(window).resize(function(){
windowSize();
});
windowSize();
});
CSSは毎度のごとく、
祖父母要素{ width:コンテンツ幅; overflow:hidden; }
親要素{ width:すごく大きな数; }
中身{ float:left }
でどぞ。
このままだと、一定時間でスライドする機能しかないので、サムネイル・左右ボタン等は前述の記事から(・∀・)
ちなみに、ボタンを自動的に吐き出すタイプの完成形がこちら。
// JavaScript Document
$(document).ready(function(){
var productHow = $('#promo .promo li').length; // カルーセルの数
var productno = 1 ; // カルーセルの現在番号
var slidflug = 1 ;
var w = 0; //ウィンドウサイズ
var d = 0; //カルーセル中身のサイズ
var p = 0; //カルーセルの基準位置
var q = 0; //カルーセルの次回移動先
function windowSize(){
w = $('html').width();
if( w < 540 ){
d = $('html').width();
}else{
d = $('#promo .promo').width();;
}
$('#promo .promo li').css({"width":d+"px"});
q = productHow * d ; // カルーセルの基準位置（ずれるときは個別調整）
p = q + ( ( productno - 1 ) * d ) ;
$("#promo .promo").animate({scrollLeft:p}, 1, "swing");
}
function slide(){
p = q + ( ( productno - 2 ) * d ) ;
$("#promo .promo").animate({scrollLeft:p}, 1, "swing", function(){
p = q + ( ( productno - 1 ) * d ) ;
$("#promo .promo").animate({scrollLeft:p}, 1000, "swing");
});
$("#promo .promoBody span:not(:nth-of-type("+ productno +"))").removeClass("now");
$("#promo .promoBody span:nth-of-type("+ productno +")").addClass("now");
}
function slide2(){
p = q + ( ( productno - 1 ) * d ) ;
$("#promo .promo").animate({scrollLeft:p}, 1000, "swing");
$("#promo .promoBody span:not(:nth-of-type("+ productno +"))").removeClass("now");
$("#promo .promoBody span:nth-of-type("+ productno +")").addClass("now");
}
var element = $('#promo .promo li').clone(true) ; // カルーセルを複製
$("#promo .promo ul").append(element); // cal ul の末尾に複製を挿入
var element = $('#promo .promo li').clone(true) ;
$("#promo .promo ul").append(element); // cal ul の末尾に複製を挿入（2回やっとく）
if( productHow > 1){
for (var i=1 ; i <= productHow ; i++){
if(i==1){
$("#promo .promoBody").append('<span class="now"></span>');
}else{
$("#promo .promoBody").append('<span></span>');
}
}
}
setInterval(function() {
if(slidflug === 1 ){
if(productno >= productHow){
productno=1;
}else{
productno++;
}
slide();
}else{
slidflug = 1 ;
}
}, 6000); //スライド時間間隔（個別調整）
$(window).resize(function(){
windowSize();
});
$("#promo .promoBody span").click(function () {
productno = $("#promo .promoBody span").index(this) +1;
slidflug = 0 ;
slide2();
})
windowSize();
});