در این قسمت از مجموعه پست های ۵ تکنیک کاربردی CSS و jQuery قصد آموزش نحوه نوشتن یک اسلایدشوی بسیار زیبا و کاربردی را دارم. همانطور که می دانید اسلایدشوها در انواع مختلفی وجود دارند و کاربرد آنها نیز می تواند متفاوت باشد. اسلایدشوهای متنی یا تصویری ، اسلایدشوهایی که دارای توضیحات هستند و یا بدون توضیحات و…

اسلایدشویی که در این آموزش نحوه نوشتن آن را یاد میگیرید یک اسلایدشوی تصویری بسیار زیبا می باشد که قابلیت اضافه کردن توضیحات به تصاویر را نیز دارد و همینطور درای قسمت ناوبری یا Navigation می باشد…

بدنه اسلایدشو

در ابتدا با استفاده از کدهای ساده HTML بدنه ی اصلی اسلایدشو را به صورت زیر می نویسم :

<div id="slideshow">
<div id="slideshow-reel">
<div class="slide">
<h1>Slide 1</h1>
</div>
<div class="slide">
<h1>Slide 2</h1>
</div>
<div class="slide">
<h1>Slide 3</h1>
</div>
<div class="slide">
<h1>Slide 4</h1>
</div>
<div class="slide">
<h1>Slide 5</h1>
</div>
<div class="slide">
<h1>Slide 6</h1>
</div>
</div>
</div>

در اینجا ما از شش تصویر اسلاید استفاده کرده ایم که بر اساس نیاز شما می تواند متغیر باشد.

در این قسمت کدهای CSS مربوطه را می نویسم :

#slideshow {
width: 900px;
height: 500px;
overflow: hidden;
position: relative;
}
#slideshow-reel {
width: 5400px;
height: 450px;
position: absolute;
top: 0;
left: 0;
}
#slideshow-reel .slide {
width: 900px;
height: 450px;
float: left;
background-color: gray;
}

در این بخش ما سایز تصاویر اسلایدر را مشخص کرده ایم و آنها را در حالت شناور تعریف کرده ایم و… .

همانطور که مشاهده می کنید عرض تصاویر ۹۰۰ پیکسل است و تعداد تصاویر ۶ عدد میباشد. بنابراین باید برای ۶ عدد تصویر، عدد ۹۰۰ را در ۶ ضرب کنیم تا سایز کلی بدست بیاید که ۵۴۰۰ پیکسل است. پس اگر تعداد تصاویر شما بیشتر یا کمتر از ۶ هست باید مقدار ۵۴۰۰ را تغییر دهید.

متحرک سازی اسلایدشو

کدهای جی کوئری زیر را برای متحرک سازی اسلایدشو اضافه می کنیم :

$(function() {
function changeSlide( newSlide ) {
// change the currSlide value
currSlide = newSlide;
// make sure the currSlide value is not too low or high
if ( currSlide > maxSlide ) currSlide = 0;
else if ( currSlide < 0 ) currSlide = maxSlide;
// animate the slide reel
$slideReel.animate({
left : currSlide * -900
}, 400, 'swing', function() {
// set new timeout if active
if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
});
}
function nextSlide() {
changeSlide( currSlide + 1 );
}
// define some variables / DOM references
var activeSlideshow = true,
currSlide = 0,
slideTimeout,
$slideshow = $('#slideshow'),
$slideReel = $slideshow.find('#slideshow-reel'),
maxSlide = $slideReel.children().length - 1;
// start the animation
slideTimeout = setTimeout(nextSlide, 1200);
});

دکمه های راست و چپ اسلایدشو

برای اضافه کردن دکمه های راست و چپ در اسلایدشو از کدهای زیر می توانیم استفاده کنیم :

<a href="#" id="slideshow-prev"></a>
<a href="#" id="slideshow-next"></a>

حالا کدهای CSS مربوط به فلش ها را می نویسیم :

#slideshow-prev, #slideshow-next {
display: block;
position: absolute;
top: 190px;
width: 0;
height: 0;
border-style: solid;
border-width: 28px 21px;
border-color: transparent;
outline: none;
}
#slideshow-prev:hover, #slideshow-next:hover {
opacity: .5;
filter: alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#slideshow-prev {
left: 0;
border-right-color: #fff;
}
#slideshow-next {
right: 0;
border-left-color: #fff;
}

کدهای جی کوئری را نیز برای فعال شدن فلش ها اضافه می کنیم :

$(function() {
function changeSlide( newSlide ) {
// cancel any timeout
clearTimeout( slideTimeout );
// change the currSlide value
currSlide = newSlide;
// make sure the currSlide value is not too low or high
if ( currSlide > maxSlide ) currSlide = 0;
else if ( currSlide < 0 ) currSlide = maxSlide;
// animate the slide reel
$slideReel.animate({
left : currSlide * -900
}, 400, 'swing', function() {
// hide / show the arrows depending on which frame it's on
if ( currSlide == 0 ) $slidePrevNav.hide();
else $slidePrevNav.show();
if ( currSlide == maxSlide ) $slideNextNav.hide();
else $slideNexNav.show();
// set new timeout if active
if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
});
// animate the navigation indicator
$activeNavItem.animate({
left : currSlide * 150
}, 400, 'swing');
}
function nextSlide() {
changeSlide( currSlide + 1 );
}
// define some variables / DOM references
var activeSlideshow = true,
currSlide = 0,
slideTimeout,
$slideshow = $('#slideshow'),
$slideReel = $slideshow.find('#slideshow-reel'),
maxSlide = $slideReel.children().length - 1,
$slidePrevNav = $slideshow.find('#slideshow-prev'),
$slideNextNav = $slideshow.find('#slideshow-next');
// set navigation click events
// left arrow
$slidePrevNav.click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( currSlide - 1 );
});
// right arrow
$slideNextNav.click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( currSlide + 1 );
});
// start the animation
slideTimeout = setTimeout(nextSlide, 1200);
});

به خاطر مفصل بودن توضیحات در مورد کدهای جی کوئری بالا، در مورد آنها توضیح نمیدهم.

اضافه کردن بخش Navigation

امکان مدیریت تصاویر اسلایدشو با استفاده از فلش های چپ و راست امکان پذیر است اما با اضافه کردن بخش ناوبری مدیریت آن راحت تر می شود. برای این کار کدهای جی کوئری زیر را نیز اضافه می کنیم :

$(function() {
function changeSlide( newSlide ) {
// cancel any timeout
clearTimeout( slideTimeout );
// change the currSlide value
currSlide = newSlide;
// make sure the currSlide value is not too low or high
if ( currSlide > maxSlide ) currSlide = 0;
else if ( currSlide < 0 ) currSlide = maxSlide;
// animate the slide reel
$slideReel.animate({
left : currSlide * -900
}, 400, 'swing', function() {
// hide / show the arrows depending on which frame it's on
if ( currSlide == 0 ) $slidePrevNav.hide();
else $slidePrevNav.show();
if ( currSlide == maxSlide ) $slideNextNav.hide();
else $slideNextNav.show();
// set new timeout if active
if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
});
// animate the navigation indicator
$activeNavItem.animate({
left : currSlide * 150
}, 400, 'swing');
}
function nextSlide() {
changeSlide( currSlide + 1 );
}
// define some variables / DOM references
var activeSlideshow = true,
currSlide = 0,
slideTimeout,
$slideshow = $('#slideshow'),
$slideReel = $slideshow.find('#slideshow-reel'),
maxSlide = $slideReel.children().length - 1,
$slidePrevNav = $slideshow.find('#slideshow-prev'),
$slideNextNav = $slideshow.find('#slideshow-next'),
$activeNavItem = $slideshow.find('#active-nav-item');
// set navigation click events
// left arrow
$slidePrevNav.click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( currSlide - 1 );
});
// right arrow
$slideNextNav.click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( currSlide + 1 );
});
// main navigation
$slideshow.find('#slideshow-nav a.nav-item').click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( $(this).index() );
});
// start the animation
slideTimeout = setTimeout(nextSlide, 1200);
});

کار نوشتن اسلایدشو به پایان رسید. برای دانلود نمونه آماده و یا مشاهده پیش نمایش از بخش زیر استفاده کنید. موفق باشید.