超簡単でカッコいいスライダー！『FullWideSlider』を実装しよう

img_top
こんちには!
最近は『レゴ　ジュラシックワールド』というゲームで遊んでおります、Webデザイナーのノザキです！

いきなりですが、ホームページに動きがあると、それだけで「おおっ！」となる時がありますよね？
はい！私はよくあるんです！！
駆け出しの私はスライダーを使いたがるのですが、今回はブラウザ画面いっぱいで表示する『FullWideSlider』をご紹介したいと思います。
こちらのスライダーですが、制作者様が日本の方のようです！
『FullWideSlider』は簡単に実装できるしカッコイイので、私自身よく使用させていただいております。
この場をお借りし、お礼をお伝えしたいと思います。
「お世話になっております。ありがとうございます！」
『FullWideSlider』についてはこちらで制作者様のサイトをご覧いただけます。

私の記事も最後まで読んでもらえたらうれしいです（笑）
では、さっそく実装していきましょう。

スクリプトを保存しよう

まずは下記のスクリプトを保存しましょう。
私はわかりやすく「wideslider.js」という名前で保存しています。

$(function(){
    $setElm = $('.wideslider');
    baseWidth = 1000;
    baseHeight = 600;
    minWidth = 320;
 
    slideSpeed = 700;
    delayTime = 5000;
    easing = 'linear';
    autoPlay = '1'; // notAutoPlay = '0'
 
    flickMove = '1'; // notFlick = '0'
 
    btnOpacity = 0.5;
    pnOpacity = 0.5;
 
    ua = navigator.userAgent;
 
    $(window).load(function(){
        $setElm.find('img').css({display:'block'});
        $setElm.each(function(){
            targetObj = $(this);
            targetObj.children('ul').wrapAll('<div class="wideslider_base"><div class="wideslider_wrap"></div><div class="slider_prev"></div><div class="slider_next"></div></div>');
 
            var findBase = targetObj.find('.wideslider_base'),
            findWrap = targetObj.find('.wideslider_wrap'),
            findPrev = targetObj.find('.slider_prev'),
            findNext = targetObj.find('.slider_next');
 
            var pagination = $('<div class="pagination"></div>');
            targetObj.append(pagination);
 
            var baseList = findWrap.find('li'),
            baseListLink = findWrap.find('li').children('a'),
            baseListCount = findWrap.find('li').length;
 
            baseList.each(function(i){
                $(this).css({width:(baseWidth),height:(baseHeight)});
                pagination.append('<a href="javascript:void(0);" class="pn'+(i+1)+'"></a>');
            });
 
            var findPagi = targetObj.find('.pagination');
 
            setSlide();
            function setSlide(){
                windowWidth = $(window).width();
                findList = findWrap.find('li');
                setParts = (findBase,findWrap,findPrev,findNext,$setElm);
 
                setWrapLeft = parseInt(findWrap.css('left'));
                setlistWidth = findList.find('img').width();
                setLeft = setWrapLeft / setlistWidth;
 
                if(windowWidth < baseWidth){
                    if(windowWidth > minWidth){
                        findList.css({width:(windowWidth)});
                        var reImgHeight = findList.find('img').height();
                        findList.css({height:(reImgHeight)});
                        setParts.css({height:(reImgHeight)});
                    } else if(windowWidth <= minWidth){
                        findList.css({width:(minWidth)});
                        var reImgHeight = findList.find('img').height();
                        findList.css({height:(reImgHeight)});
                        setParts.css({height:(reImgHeight)});
                    }
                } else if(windowWidth >= baseWidth){
                    findList.css({width:(baseWidth),height:(baseHeight)});
                    setParts.css({height:(baseHeight)});
                }
 
                setWidth = findList.find('img').width();
                setHeight = findList.find('img').height();
                baseWrapWidth = (setWidth)*(baseListCount);
 
                ulCount = findWrap.find('ul').length;
                if(ulCount == 1){
                    var makeClone = findWrap.children('ul');
                    makeClone.clone().prependTo(findWrap);
                    makeClone.clone().appendTo(findWrap);
                    findWrap.children('ul').eq('1').addClass('mainList');
                    var mainList = findWrap.find('.mainList').children('li');
                    mainList.eq('0').addClass('mainActive')
 
                    allListCount = findWrap.find('li').length;
                }
                allLWrapWidth = (setWidth)*(allListCount),
                posAdjust = ((windowWidth)-(setWidth))/2;
 
                findBase.css({left:(posAdjust),width:(setWidth),height:(setHeight)});
                findPrev.css({left:-(posAdjust),width:(posAdjust),height:(setHeight),opacity:(btnOpacity)});
                findNext.css({right:-(posAdjust),width:(posAdjust),height:(setHeight),opacity:(btnOpacity)});
 
                findWrap.css({width:(allLWrapWidth),height:(setHeight)});
                findWrap.children('ul').css({width:(baseWrapWidth),height:(setHeight)});
 
                posResetNext = -(baseWrapWidth)*2,
                posResetPrev = -(baseWrapWidth)+(setWidth);
 
                adjLeft = setWidth * setLeft;
                findWrap.css({left:(adjLeft)});
 
            }
            findWrap.css({left:-(baseWrapWidth)});
 
            var pnPoint = pagination.children('a'),
            pnFirst = pagination.children('a:first'),
            pnLast = pagination.children('a:last'),
            pnCount = pagination.children('a').length;
 
            if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
                pnPoint.css({opacity:(pnOpacity)});
            } else {
                pnPoint.css({opacity:(pnOpacity)}).hover(function(){
                    $(this).stop().animate({opacity:'1'},300);
                }, function(){
                    $(this).stop().animate({opacity:(pnOpacity)},300);
                });
            }
 
            pnFirst.addClass('active');
            pnPoint.click(function(){
                if(autoPlay == '1'){clearInterval(wsSetTimer);}
                var setNum = pnPoint.index(this),
                moveLeft = ((setWidth)*(setNum))+baseWrapWidth;
                findWrap.stop().animate({left: -(moveLeft)},slideSpeed,easing);
                pnPoint.removeClass('active');
                $(this).addClass('active');
                activePos();
                if(autoPlay == '1'){wsTimer();}
            });
 
            if(autoPlay == '1'){wsTimer();}
 
            function wsTimer(){
                wsSetTimer = setInterval(function(){
                    findNext.click();
                },delayTime);
            }
            findNext.click(function(){
                findWrap.not(':animated').each(function(){
                    if(autoPlay == '1'){clearInterval(wsSetTimer);}
                    var posLeft = parseInt($(findWrap).css('left')),
                    moveLeft = ((posLeft)-(setWidth));
                    findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){
                        var adjustLeft = parseInt($(findWrap).css('left'));
                        if(adjustLeft <= posResetNext){
                            findWrap.css({left: -(baseWrapWidth)});
                        }
                    });
 
                    var pnPointActive = pagination.children('a.active');
                    pnPointActive.each(function(){
                        var pnIndex = pnPoint.index(this),
                        listCount = pnIndex+1;
                        if(pnCount == listCount){
                            pnPointActive.removeClass('active');
                            pnFirst.addClass('active');
                        } else {
                            pnPointActive.removeClass('active').next().addClass('active');
                        }
                    });
                    activePos();
 
                    if(autoPlay == '1'){wsTimer();}
                });
            }).hover(function(){
                $(this).stop().animate({opacity:((btnOpacity)+0.1)},100);
            }, function(){
                $(this).stop().animate({opacity:(btnOpacity)},100);
            });
 
            findPrev.click(function(){
                findWrap.not(':animated').each(function(){
                    if(autoPlay == '1'){clearInterval(wsSetTimer);}
 
                    var posLeft = parseInt($(findWrap).css('left')),
                    moveLeft = ((posLeft)+(setWidth));
                    findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){
                        var adjustLeft = parseInt($(findWrap).css('left')),
                        adjustLeftPrev = (posResetNext)+(setWidth);
                        if(adjustLeft >= posResetPrev){
                            findWrap.css({left: (adjustLeftPrev)});
                        }
                    });
 
                    var pnPointActive = pagination.children('a.active');
                    pnPointActive.each(function(){
                        var pnIndex = pnPoint.index(this),
                        listCount = pnIndex+1;
                        if(1 == listCount){
                            pnPointActive.removeClass('active');
                            pnLast.addClass('active');
                        } else {
                            pnPointActive.removeClass('active').prev().addClass('active');
                        }
                    });
                    activePos();
 
                    if(autoPlay == '1'){wsTimer();}
                });
            }).hover(function(){
                $(this).stop().animate({opacity:((btnOpacity)+0.1)},100);
            }, function(){
                $(this).stop().animate({opacity:(btnOpacity)},100);
            });
 
            function activePos(){
                var posActive = findPagi.find('a.active');
                posActive.each(function(){
                    var posIndex = pnPoint.index(this),
                    setMainList = findWrap.find('.mainList').children('li');
                    setMainList.removeClass('mainActive').eq(posIndex).addClass('mainActive');
                });
            }
 
            $(window).on('resize',function(){
                if(autoPlay == '1'){clearInterval(wsSetTimer);}
                setSlide();
                if(autoPlay == '1'){wsTimer();}
            }).resize();
 
            if(flickMove == '1'){
                var isTouch = ('ontouchstart' in window);
                findWrap.on(
                    {'touchstart mousedown': function(e){
                        if(findWrap.is(':animated')){
                            e.preventDefault();
                        } else {
                            if(autoPlay == '1'){clearInterval(wsSetTimer);}
                            if(!(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1)){
                                e.preventDefault();
                            }
                            this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
                            this.leftBegin = parseInt($(this).css('left'));
                            this.left = parseInt($(this).css('left'));
                            this.touched = true;
                        }
                    },'touchmove mousemove': function(e){
                        if(!this.touched){return;}
                        e.preventDefault();
                        this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );
                        this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
                        $(this).css({left:this.left});
                    },'touchend mouseup mouseout': function(e){
                        if (!this.touched) {return;}
                        this.touched = false;
 
                        var setThumbLiActive = pagination.children('a.active'),
                        listWidth = parseInt(baseList.css('width')),leftMax = -((listWidth)*((baseListCount)-1));
 
                        if(((this.leftBegin)-30) > this.left && (!((this.leftBegin) === (leftMax)))){
                            $(this).stop().animate({left:((this.leftBegin)-(listWidth))},slideSpeed,easing,function(){
                                var adjustLeft = parseInt($(findWrap).css('left'));
                                if(adjustLeft <= posResetNext){
                                    findWrap.css({left: -(baseWrapWidth)});
                                }
                            });
 
                            setThumbLiActive.each(function(){
                                var pnIndex = pnPoint.index(this),
                                listCount = pnIndex+1;
                                if(pnCount == listCount){
                                    setThumbLiActive.removeClass('active');
                                    pnFirst.addClass('active');
                                } else {
                                    setThumbLiActive.removeClass('active').next().addClass('active');
                                }
                            });
                            activePos();
                        } else if(((this.leftBegin)+30) < this.left && (!((this.leftBegin) === 0))){
                            $(this).stop().animate({left:((this.leftBegin)+(listWidth))},slideSpeed,easing,function(){
                                var adjustLeft = parseInt($(findWrap).css('left')),
                                adjustLeftPrev = (posResetNext)+(setWidth);
                                if(adjustLeft >= posResetPrev){
                                    findWrap.css({left: (adjustLeftPrev)});
                                }
                            });
                            setThumbLiActive.each(function(){
                                var pnIndex = pnPoint.index(this),
                                listCount = pnIndex+1;
                                if(1 == listCount){
                                    setThumbLiActive.removeClass('active');
                                    pnLast.addClass('active');
                                } else {
                                    setThumbLiActive.removeClass('active').prev().addClass('active');
                                }
                            });
                            activePos();
                        } else {
                            $(this).stop().animate({left:(this.leftBegin)},slideSpeed,easing);
                        }
                        compBeginLeft = this.leftBegin;
                        compThisLeft = this.left;
                        baseListLink.click(function(e){
                            if(!(compBeginLeft == compThisLeft)){
                                e.preventDefault();
                            }
                        });
                        if(autoPlay == '1'){wsTimer();}
                    }
                });
            }
            setTimeout(function(){setSlide();},500);
        });
    });
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

$(function(){

$setElm = $('.wideslider');

baseWidth = 1000;

baseHeight = 600;

minWidth = 320;

slideSpeed = 700;

delayTime = 5000;

easing = 'linear';

autoPlay = '1'; // notAutoPlay = '0'

flickMove = '1'; // notFlick = '0'

btnOpacity = 0.5;

pnOpacity = 0.5;

ua = navigator.userAgent;

$(window).load(function(){

$setElm.find('img').css({display:'block'});

$setElm.each(function(){

targetObj = $(this);

targetObj.children('ul').wrapAll('<div class="wideslider_base"><div class="wideslider_wrap"></div><div class="slider_prev"></div><div class="slider_next"></div></div>');

var findBase = targetObj.find('.wideslider_base'),

findWrap = targetObj.find('.wideslider_wrap'),

findPrev = targetObj.find('.slider_prev'),

findNext = targetObj.find('.slider_next');

var pagination = $('<div class="pagination"></div>');

targetObj.append(pagination);

var baseList = findWrap.find('li'),

baseListLink = findWrap.find('li').children('a'),

baseListCount = findWrap.find('li').length;

baseList.each(function(i){

$(this).css({width:(baseWidth),height:(baseHeight)});

pagination.append('<a href="javascript:void(0);" class="pn'+(i+1)+'"></a>');

});

var findPagi = targetObj.find('.pagination');

setSlide();

function setSlide(){

windowWidth = $(window).width();

findList = findWrap.find('li');

setParts = (findBase,findWrap,findPrev,findNext,$setElm);

setWrapLeft = parseInt(findWrap.css('left'));

setlistWidth = findList.find('img').width();

setLeft = setWrapLeft / setlistWidth;

if(windowWidth < baseWidth){

if(windowWidth > minWidth){

findList.css({width:(windowWidth)});

var reImgHeight = findList.find('img').height();

findList.css({height:(reImgHeight)});

setParts.css({height:(reImgHeight)});

} else if(windowWidth <= minWidth){

findList.css({width:(minWidth)});

var reImgHeight = findList.find('img').height();

findList.css({height:(reImgHeight)});

setParts.css({height:(reImgHeight)});

}

} else if(windowWidth >= baseWidth){

findList.css({width:(baseWidth),height:(baseHeight)});

setParts.css({height:(baseHeight)});

}

setWidth = findList.find('img').width();

setHeight = findList.find('img').height();

baseWrapWidth = (setWidth)*(baseListCount);

ulCount = findWrap.find('ul').length;

if(ulCount == 1){

var makeClone = findWrap.children('ul');

makeClone.clone().prependTo(findWrap);

makeClone.clone().appendTo(findWrap);

findWrap.children('ul').eq('1').addClass('mainList');

var mainList = findWrap.find('.mainList').children('li');

mainList.eq('0').addClass('mainActive')

allListCount = findWrap.find('li').length;

}

allLWrapWidth = (setWidth)*(allListCount),

posAdjust = ((windowWidth)-(setWidth))/2;

findBase.css({left:(posAdjust),width:(setWidth),height:(setHeight)});

findPrev.css({left:-(posAdjust),width:(posAdjust),height:(setHeight),opacity:(btnOpacity)});

findNext.css({right:-(posAdjust),width:(posAdjust),height:(setHeight),opacity:(btnOpacity)});

findWrap.css({width:(allLWrapWidth),height:(setHeight)});

findWrap.children('ul').css({width:(baseWrapWidth),height:(setHeight)});

posResetNext = -(baseWrapWidth)*2,

posResetPrev = -(baseWrapWidth)+(setWidth);

adjLeft = setWidth * setLeft;

findWrap.css({left:(adjLeft)});

}

findWrap.css({left:-(baseWrapWidth)});

var pnPoint = pagination.children('a'),

pnFirst = pagination.children('a:first'),

pnLast = pagination.children('a:last'),

pnCount = pagination.children('a').length;

if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){

pnPoint.css({opacity:(pnOpacity)});

} else {

pnPoint.css({opacity:(pnOpacity)}).hover(function(){

$(this).stop().animate({opacity:'1'},300);

}, function(){

$(this).stop().animate({opacity:(pnOpacity)},300);

});

}

pnFirst.addClass('active');

pnPoint.click(function(){

if(autoPlay == '1'){clearInterval(wsSetTimer);}

var setNum = pnPoint.index(this),

moveLeft = ((setWidth)*(setNum))+baseWrapWidth;

findWrap.stop().animate({left: -(moveLeft)},slideSpeed,easing);

pnPoint.removeClass('active');

$(this).addClass('active');

activePos();

if(autoPlay == '1'){wsTimer();}

});

if(autoPlay == '1'){wsTimer();}

function wsTimer(){

wsSetTimer = setInterval(function(){

findNext.click();

},delayTime);

}

findNext.click(function(){

findWrap.not(':animated').each(function(){

if(autoPlay == '1'){clearInterval(wsSetTimer);}

var posLeft = parseInt($(findWrap).css('left')),

moveLeft = ((posLeft)-(setWidth));

findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){

var adjustLeft = parseInt($(findWrap).css('left'));

if(adjustLeft <= posResetNext){

findWrap.css({left: -(baseWrapWidth)});

}

});

var pnPointActive = pagination.children('a.active');

pnPointActive.each(function(){

var pnIndex = pnPoint.index(this),

listCount = pnIndex+1;

if(pnCount == listCount){

pnPointActive.removeClass('active');

pnFirst.addClass('active');

} else {

pnPointActive.removeClass('active').next().addClass('active');

}

});

activePos();

if(autoPlay == '1'){wsTimer();}

});

}).hover(function(){

$(this).stop().animate({opacity:((btnOpacity)+0.1)},100);

}, function(){

$(this).stop().animate({opacity:(btnOpacity)},100);

});

findPrev.click(function(){

findWrap.not(':animated').each(function(){

if(autoPlay == '1'){clearInterval(wsSetTimer);}

var posLeft = parseInt($(findWrap).css('left')),

moveLeft = ((posLeft)+(setWidth));

findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){

var adjustLeft = parseInt($(findWrap).css('left')),

adjustLeftPrev = (posResetNext)+(setWidth);

if(adjustLeft >= posResetPrev){

findWrap.css({left: (adjustLeftPrev)});

}

});

var pnPointActive = pagination.children('a.active');

pnPointActive.each(function(){

var pnIndex = pnPoint.index(this),

listCount = pnIndex+1;

if(1 == listCount){

pnPointActive.removeClass('active');

pnLast.addClass('active');

} else {

pnPointActive.removeClass('active').prev().addClass('active');

}

});

activePos();

if(autoPlay == '1'){wsTimer();}

});

}).hover(function(){

$(this).stop().animate({opacity:((btnOpacity)+0.1)},100);

}, function(){

$(this).stop().animate({opacity:(btnOpacity)},100);

});

function activePos(){

var posActive = findPagi.find('a.active');

posActive.each(function(){

var posIndex = pnPoint.index(this),

setMainList = findWrap.find('.mainList').children('li');

setMainList.removeClass('mainActive').eq(posIndex).addClass('mainActive');

});

}

$(window).on('resize',function(){

if(autoPlay == '1'){clearInterval(wsSetTimer);}

setSlide();

if(autoPlay == '1'){wsTimer();}

}).resize();

if(flickMove == '1'){

var isTouch = ('ontouchstart' in window);

findWrap.on(

{'touchstart mousedown': function(e){

if(findWrap.is(':animated')){

e.preventDefault();

} else {

if(autoPlay == '1'){clearInterval(wsSetTimer);}

if(!(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1)){

e.preventDefault();

}

this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);

this.leftBegin = parseInt($(this).css('left'));

this.left = parseInt($(this).css('left'));

this.touched = true;

}

},'touchmove mousemove': function(e){

if(!this.touched){return;}

e.preventDefault();

this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );

this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);

$(this).css({left:this.left});

},'touchend mouseup mouseout': function(e){

if (!this.touched) {return;}

this.touched = false;

var setThumbLiActive = pagination.children('a.active'),

listWidth = parseInt(baseList.css('width')),leftMax = -((listWidth)*((baseListCount)-1));

if(((this.leftBegin)-30) > this.left && (!((this.leftBegin) === (leftMax)))){

$(this).stop().animate({left:((this.leftBegin)-(listWidth))},slideSpeed,easing,function(){

var adjustLeft = parseInt($(findWrap).css('left'));

if(adjustLeft <= posResetNext){

findWrap.css({left: -(baseWrapWidth)});

}

});

setThumbLiActive.each(function(){

var pnIndex = pnPoint.index(this),

listCount = pnIndex+1;

if(pnCount == listCount){

setThumbLiActive.removeClass('active');

pnFirst.addClass('active');

} else {

setThumbLiActive.removeClass('active').next().addClass('active');

}

});

activePos();

} else if(((this.leftBegin)+30) < this.left && (!((this.leftBegin) === 0))){

$(this).stop().animate({left:((this.leftBegin)+(listWidth))},slideSpeed,easing,function(){

var adjustLeft = parseInt($(findWrap).css('left')),

adjustLeftPrev = (posResetNext)+(setWidth);

if(adjustLeft >= posResetPrev){

findWrap.css({left: (adjustLeftPrev)});

}

});

setThumbLiActive.each(function(){

var pnIndex = pnPoint.index(this),

listCount = pnIndex+1;

if(1 == listCount){

setThumbLiActive.removeClass('active');

pnLast.addClass('active');

} else {

setThumbLiActive.removeClass('active').prev().addClass('active');

}

});

activePos();

} else {

$(this).stop().animate({left:(this.leftBegin)},slideSpeed,easing);

}

compBeginLeft = this.leftBegin;

compThisLeft = this.left;

baseListLink.click(function(e){

if(!(compBeginLeft == compThisLeft)){

e.preventDefault();

}

});

if(autoPlay == '1'){wsTimer();}

}

});

}

setTimeout(function(){setSlide();},500);

});

CSSを記述しよう

次はcssを記述していきます。
下記を「common.css」などのご自身のcssファイルに書き込みましょう。
もしくは、「wideslider.css」というファイルを作るのもありかもしれません。
また、「slider_prev」と「slider_next」の部分は画像が使用されています。
制作者様のサイトでサンプルをダウンロードすることも可能ですが、ご自身でオリジナルのものを使用する場合は、imgの階層をお間違えないようにご注意ください。

.wideslider {
    width: 100%;
    text-align: left;
    position: relative;
    overflow: hidden;
    height: 600px;
}
 
.wideslider ul,
.wideslider ul li {
    float: left;
    display: inline;
    overflow: hidden;
}
 
.wideslider ul li img {
    width: 100%;
    display: none;
}
 
.wideslider_base {
    top: 0;
    position: absolute;
}
.wideslider_wrap {
    top: 0;
    position: absolute;
    overflow: hidden;
 
}
.slider_prev,
.slider_next {
    top: 0;
    overflow: hidden;
    position: absolute;
    z-index: 100;
    cursor: pointer;
}
.slider_prev {
	background: #fff url(../images/prev.jpg) no-repeat right center;
}
.slider_next {
	background: #fff url(../images/next.jpg) no-repeat left center;
} 
.pagination {
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 15px;
    text-align: center;
    position: absolute;
    z-index: 200;
}

.pagination a {
    margin: 0 5px;
    width: 15px;
    height: 15px;
    display: inline-block;
    overflow: hidden;
    background: #333;
}
.pagination a.active {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
}
 
 
/* =======================================
    ClearFixElements
======================================= */
.wideslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
.wideslider ul {
    display: inline-block;
    overflow: hidden;
}

.wideslider {

width: 100%;

text-align: left;

position: relative;

overflow: hidden;

height: 600px;

}

.wideslider ul,

.wideslider ul li {

float: left;

display: inline;

overflow: hidden;

}

.wideslider ul li img {

width: 100%;

display: none;

}

.wideslider_base {

top: 0;

position: absolute;

}

.wideslider_wrap {

top: 0;

position: absolute;

overflow: hidden;

}

.slider_prev,

.slider_next {

top: 0;

overflow: hidden;

position: absolute;

z-index: 100;

cursor: pointer;

}

.slider_prev {

background: #fff url(../images/prev.jpg) no-repeat right center;

}

.slider_next {

background: #fff url(../images/next.jpg) no-repeat left center;

}

.pagination {

bottom: 10px;

left: 0;

width: 100%;

height: 15px;

text-align: center;

position: absolute;

z-index: 200;

}

.pagination a {

margin: 0 5px;

width: 15px;

height: 15px;

display: inline-block;

overflow: hidden;

background: #333;

}

.pagination a.active {

filter:alpha(opacity=100)!important;

-moz-opacity: 1!important;

opacity: 1!important;

}

/* =======================================

ClearFixElements

======================================= */

.wideslider ul:after {

content: ".";

height: 0;

clear: both;

display: block;

visibility: hidden;

}

.wideslider ul {

display: inline-block;

overflow: hidden;

}

head内にリンクを記述しよう

HTMLのhead内にjsファイルのリンクを記述しましょう。
また、widesliderについてのcssが記述されているファイルのリンクも忘れずに記述しましょう。
ファイルの階層はご自身のものに合わせてあげてください。
※注意※
下記の記述はwidesliderのcssが「wideslider.css」に入れてある仮定です。widesliderのcssが記述されているリンクを置いてください。
また、jQuery本体はajaxを使用しております。

<script src="common/js/wideslider.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="common/css/wideslider.css" type="text/css" />

HTMLに記述しよう

HTML内で『FullWideSlider』を使用したい部分に下記を記述しましょう。
imgの階層はご自身のものに合わせてあげてください。

<div class="wideslider">
	<ul>
		<li><img src="common/images/photo01.jpg" /></li>
		<li><img src="common/images/photo02.jpg" /></li>
		<li><img src="common/images/photo03.jpg" /></li>
	</ul>
</div>

<ul>

</ul>

</div>

jsファイルの調整

最初に保存しましたjsファイルの最上部の記述に下記の記述があります。

$setElm = $(‘.wideslider’)	対象にするブロック要素名
baseWidth = 800	スライドさせるコンテンツ要素の幅
baseHeight = 500	スライドさせるコンテンツ要素の高さ
slideSpeed = 500	スライドアニメーションスピード
delayTime = 5000	スライドアニメーション待機時間
easing = ‘linear’	スライドアニメーションイージング
autoPlay = ’1′	自動スライドON／OFF（ON = 1 , OFF = 0）
btnOpacity = 0.5	左右のNEXT／BACKエリアの透過具合
pnOpacity = 0.5	ページネーションの透過具合

こちらの設定値を変更することで、スライドの調整を行うことができるようです。
自分のホームページに合うように調整してみてください。

さいごに

『FullWideSlider』は簡単かつカッコよく実装できるスライダーです！
私と同じような初心者の方でも実装できますので、是非お試しください。

さいごにもう一度、こちらが『FullWideSlider』の制作者様のサイトになります。