يعتبر السلايد شو من العناصر التي تضفي احترافية و جمالية على المواقع و المدونة بحيت لا تستغني عنه الكثير من المواقع خصوصا المواقع الاخبارية ، و في ما يلي أسرع و أخف سيلادشو للمواقع و المدونات مع طريقة التركيب :
ضع كود الـhtml الخاص بالسلايدشو في مكان ظهور السلايدشو :
<figure id="slider">
<div class="container">
<img src="http://cssdeck.com/uploads/media/items/0/0UeVZv3.jpg" alt="Lorem ipsum dolor sit amet...">
<img src="http://cssdeck.com/uploads/media/items/9/9J2jvF6.jpg" alt="Consectetuer adipiscing elit...">
<img src="http://cssdeck.com/uploads/media/items/0/0ckDaQF.jpg" alt="Sed diam nonummy nibh euismod tincidunt...">
<img src="http://cssdeck.com/uploads/media/items/3/3oMnVPz.jpg" alt="Ut laoreet dolore magna aliquam erat volutpat...">
</div>
<figcaption></figcaption> <!-- slideshow caption -->
<nav id="slider-nav"></nav> <!-- navigation -->
</figure>
1 يجب تعديل روابط الصور الملونة في المثال بالاحمر بروابط الصور الخاصة بك
2 كذلك يجب تعديدل وصف الصور الملون بالازرق ايضا بالوصف الذي تريد ظهوره مع كل صورة
و بعد ذلك يتم اضافة الكود الcss الخاص بتنسيق بالسلايد شو كالعرض و الطول و لون الاطار الخ
<style>
* {margin:0;padding:0}
body {
background-color:#111;
padding:50px;
}
/* Slider */
#slider {
display:block;
border:4px solid #000;
width:448px; /* slider width */
height:286px;; /* slider height */
margin:0 auto;
background:white url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
overflow:hidden;
position:relative;
}
/* For caption */
#slider figcaption {
display:block;
background-color:black;
font:normal normal 11px Arial,Sans-Serif;
color:white;
opacity:.8;
padding:10px 15px;
position:absolute;
right:0;
bottom:-100px; /* hide the caption with this way :) */
left:0;
z-index:44;
}
#slider img {
display:block;
margin:0 0;
width:448px; /* slide width */
height:286px; /* slide height */
position:absolute;
top:0;
left:0;
}
/* Navigation */
#slider-nav {
display:block;
position:absolute;
top:10px;
right:10px;
z-index:99;
}
#slider-nav a {
display:block;
float:left;
width:10px;
height:10px;
background-color:#111;
font-size:0;
color:transparent;
overflow:hidden;
text-indent:-99px;
margin:0 2px 0 0;
border:2px solid white;
border-radius:100%;
box-shadow:0 1px 2px rgba(0,0,0,.4);
}
#slider-nav .active {
background-color:#2589B4;
}
/* Hide all element inside the '#slider' until the page has been loaded! */
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}
</style>
و يجب ايضا اضافة كود الجيكوري الخاص بتحريك السلايد شو و التحكم في سرعة تتالي الصور
<script>
(function($) {
// ==================================================================================
// Configuration here:
// ----------------------------------------------------------------------------------
var config = {
slices: 10, // number of slices
speed: 600, // slideshow speed
easing: null, // easing type
interval: 3000 // slideshow interval
};
// ==================================================================================
// Some variables...
var $slider = $('#slider'),
$caption = $slider.find('figcaption'),
$container = $slider.find('.container'),
$nav = $('#slider-nav'),
$slide = $container.children(),
autoSlide = null,
$first = $slide.first();
// Auto append navigation item based on the slides length
$slide.each(function(index) {
var i = index + 1;
$nav.append('<a href="#slide-'+i+'">'+i+'</a>');
$(this).attr('id', 'slide-'+i);
});
// Set the slices size
var slice_w = $slider.width() / config.slices,
slice_h = $slider.height();
// Build the slices
for (var i = 0; i < config.slices; i++) {
$('<div class="slice" />').css({
'position':'absolute',
'width':slice_w,
'height':slice_h,
'left':slice_w*i,
'z-index':4,
'background-color':'transparent',
'background-repeat':'no-repeat',
'background-position':'-' + slice_w*i + 'px 0'
}).appendTo($slider);
}
// Catch the slices, and also set the different position between odd and even slices
var $sliceOdd = $slider.find('.slice:odd').css('bottom',0),
$sliceEven = $slider.find('.slice:even').css('top',0);
// Click to switch!
$nav.find('a').on("click", function() {
$nav.find('.active').removeClass('active');
$(this).addClass('active');
var pos = $(this).index(),
text = $slide.eq(pos).attr('alt'),
bg = $slide.eq(pos).attr('src');
$slide.hide().eq(pos).trigger("load").show();
// Do the caption and slices animation here!
$caption.stop().animate({bottom:'-100px'}, config.speed/2);
$sliceOdd.each(function(i) {
$(this).stop().delay(i*100).animate({bottom:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
$(this).css({
'background-image':'url('+bg+')',
'bottom':0,
'opacity':1
});
});
});
$sliceEven.each(function(i) {
$(this).stop().delay(i*100).animate({top:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
$(this).css({
'background-image':'url('+bg+')',
'top':0,
'opacity':1
});
});
}).promise().done(function() {
$caption.html(text).stop().animate({bottom:'0'}, config.speed/2);
});
clearInterval(autoSlide);
autoSlide = setInterval(slideShow, config.interval);
return false;
}).first().addClass('active');
// Init slideshow
$caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, config.speed);
// Navigation clicker
function slideShow() {
if ($nav.find('.active').next().length) {
$nav.find('.active').next().trigger("click");
} else {
$nav.find('a').first().trigger("click");
}
}
// Run the slideshow on page load...
// **Edit: Run the slideshow on DOM Ready for the CSS Deck Playground only**
$(function() {
// remove the 'loading background-image' of '#slider'
$slider.css('background-image','none');
// Show the '.container', 'figcaption' and '#slide-nav' when the page has been loaded!
// **Edit: Show the '.container', 'figcaption' and '#slide-nav' on DOM Ready for the CSS Deck Playground only**
$container.show();
$caption.show();
$nav.css('opacity',1);
// Another init slideshow
$slider.find('.slice').css('background-image', 'url('+$first.attr("src")+')');
// Then, start the interval...
autoSlide = setInterval(slideShow, config.interval);
});
})(jQuery);
</script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
