در این مقاله قصد داریم slideshow ای ساده ایجاد کنیم ، برای این کار ترکیبی از HTML، CSS و جاوا اسکریپت؛ و به طور خاص از jQuery استفاده میکنیم.

آنچه  استفاده خواهیم کرد

ما ترکیبی از HTML، CSS و جاوا اسکریپت؛ و به طور خاص از jQuery استفاده میکنیم

چگونه کار خواهد کرد؟

 slideshow   از طریق تصاویر  اسلاید و همچنین دکمه های عقب و جلو کار میکند

بسیاری از magic ها  در CSS است. از جی کوئری  برای اضافه  و حذف المنت استایلها و حرکت آنها استفاده می شود

slideshow (اسلایدر) برای پوشش تصاویر به صورت افقی، با استفاده از ویژگی float کار میکند

جی کوئری حرکت اسلاید به جلو و عقب را  با تنظیم left margin در DIV که شامل تمام تصاویراست ،انجام میدهد.

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

<div id="slideShow">  
    <div id="slideShowWindow">  
           <div class="slide">  
             <img src=”img1.png”/>  
                   <div class="slideText">  
                      <h2>The Slide Title</h2>  
                         <p>This is the slide text</p>  
                   </div><!--</slideText> -->  
            </div>  <!-- </slide> repeat as many times as needed -->    
     </div><!--</slideShowWindow> -->  
 </div><!--</slideshow> --> 

بعد کدهای CSS  را  به شرح زیر مینویسیم:

    img {  
        display: block;  
        width: 100%;  
        height: auto;  
    }  
    p{  
        background:none;  
        color:#ffffff;  
    }  
    #slideShow #slideShowWindow {  
        width: 650px;  
        height: 450px;  
        margin: 0;  
        padding: 0;  
        position: relative;  
        overflow:hidden;  
        margin-left: auto;  
        margin-right:auto;  
    }  
      
    #slideShow #slideShowWindow .slide {  
            margin: 0;  
            padding: 0;  
            width: 650px;  
            height: 450px;  
            float: left;  
            position: relative;  
            margin-left:auto;  
            margin-right: auto;  
        }  
      
    #slideshow #slideshowWindow .slide, .slideText {  
        position:absolute;  
        bottom:18px;  
        left:0;  
        width:100%;  
        height:auto;  
        margin:0;  
        padding:0;  
        color:#ffffff;  
        font-family:Myriad Pro, Arial, Helvetica, sans-serif;  
    }   
    .slideText {  
        background: rgba(128, 128, 128, 0.49);  
    }  
      
    #slideshow #slideshowWindow .slide .slideText h2,   
    #slideshow #slideshowWindow .slide .slideText p {  
        margin:10px;  
        padding:15px;  
    }  
      
    .slideNav {  
        display: block;  
        text-indent: -10000px;  
        position: absolute;  
        cursor: pointer;  
    }  
    #leftNav {  
        left: 0;  
        bottom: 0;  
        width: 48px;  
        height: 48px;  
        background-image: url("../Images/plus_add_minus.png");  
        background-repeat: no-repeat;  
        z-index: 10;  
    }  
    #rightNav {  
        right: 0;  
        bottom: 0;  
        width: 48px;  
        height: 48px;  
        background-image: url("../Images/plus_add_green.png");  
        background-repeat: no-repeat;  
        z-index: 10;    }  

همانطور که می بینید  چیزی  پیچیده در مورد  CSS وجود ندارد. در واقع این کار اساسی  است، و همه آنها ضروری هستند.
بعد  جی کوئری را ایجاد میکنیم:

    $(document).ready(function () {  
      
        var currentPosition = 0;  
        var slideWidth = 650;  
        var slides = $('.slide');  
        var numberOfSlides = slides.length;  
        var slideShowInterval;  
        var speed = 3000;  
      
        //Assign a timer, so it will run periodically  
        slideShowInterval = setInterval(changePosition, speed);  
      
        slides.wrapAll('<div id="slidesHolder"></div>');  
      
        slides.css({ 'float': 'left' });  
      
        //set #slidesHolder width equal to the total width of all the slides  
        $('#slidesHolder').css('width', slideWidth * numberOfSlides);  
      
        $('#slideShowWindow')  
            .prepend('<span class="slideNav" id="leftNav">Move Left</span>')  
            .append('<span class="slideNav" id="rightNav">Move Right</span>');  
      
        manageNav(currentPosition);  
      
        //tell the buttons what to do when clicked  
        $('.slideNav').bind('click', function () {  
      
            //determine new position  
            currentPosition = ($(this).attr('id') === 'rightNav')  
            ? currentPosition + 1 : currentPosition - 1;  
      
            //hide/show controls  
            manageNav(currentPosition);  
            clearInterval(slideShowInterval);  
            slideShowInterval = setInterval(changePosition, speed);  
            moveSlide();  
        });  
      
        function manageNav(position) {  
            //hide left arrow if position is first slide  
            if (position === 0) {  
                $('#leftNav').hide();  
            }  
            else {  
                $('#leftNav').show();  
            }  
            //hide right arrow is slide position is last slide  
            if (position === numberOfSlides - 1) {  
                $('#rightNav').hide();  
            }  
            else {  
                $('#rightNav').show();  
            }  
        }  
      
      
        //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked  
        function changePosition() {  
            if (currentPosition === numberOfSlides - 1) {  
                currentPosition = 0;  
                manageNav(currentPosition);  
            } else {  

                currentPosition++;  
                manageNav(currentPosition);  
            }  
            moveSlide();  
        }  
      
      
        //moveSlide: this function moves the slide   
        function moveSlide() {  
            $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });  
        }  
      
    });  

 کد جی کوئری به آسانی قابل درک است.   با استفاده از آن بسادگی میتوان  یک slideshow  ساده  ساخت.