اسلایدر متن و تصویر Cycle

<div class="pics" id="slider"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div> 

.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 
 
.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
}

$('#slider').cycle('fade');

$('#slider').cycle({ 
    fx: 'scrollDown' 
});

$('#slider').cycle({ 
    fx:    'fade', 
    speed:  2500 
 });

$('#slider').cycle({ 
    fx:      'scrollDown', 
    speed:    300, 
    timeout:  2000 
});

<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:    'fade', 
        pause:  1 
    });
});
</script>

<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollDown', 
        random:  1
    });
});
</script>

<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'zoom', 
        easing: 'easeInBounce', 
        delay:  -4000
    });
});
</script>

<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollDown', 
        easing: 'easeOutBounce', 
        delay:  -2000
    });
});
</script>

<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'slideY', 
        speed:  300, 
        next:   '#slider', 
        timeout: 0 
    });
});
</script>

<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'fade', 
        speed:  'fast', 
        timeout: 0, 
        next:   '#next2', 
        prev:   '#prev2'
    });
});
</script>

<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'fade', 
        speed:   300, 
        timeout: 3000, 
        next:   '#slider', 
        pause:   1  
    });
});
</script>

<script>
$(document).ready(function(){
    $('#slider') 
    .before('<div id="nav">') 
    .cycle({ 
        fx:     'turnDown', 
        speed:  'fast', 
        timeout: 0, 
        pager:  '#nav' 
    });
});
</script>

#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px;  }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }

<div class="pics" id="slider"> 
    <div>
        <img src="/images_cycle/beach1.jpg" width="200" height="200" /> 
        <p>برای کسب اطلاعات بیشتر در مورد جاوا اسکریبت به لینک زیر مراجعه فرمایید:</p></br>
        <a href="/http"//www.beyamooz.com/javascript">آموزش جاوا اسکریبت</a>
    </div>
    <div>
        <img src="/images_cycle/beach2.jpg" width="200" height="200" /> 
        <p>برای کسب اطلاعات بیشتر در مورد HTML به لینک زیر مراجعه فرمایید:</p></br>
        <a href="/http"//www.beyamooz.com/html">آموزش HTML</a>
    </div>
    <div>
        <img src="/images_cycle/beach3.jpg" width="200" height="200" /> 
        <p>برای کسب اطلاعات بیشتر در مورد CSS به لینک زیر مراجعه فرمایید:</p></br>
        <a href="/http"//www.beyamooz.com/css">آموزش CSS</a>
    </div>
</div>
<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollUp', 
        timeout: 1000, 
        delay:  -2000  
    });
});
</script>

$('#slider').cycle('stop');

$('#slider').cycle('pause');

<div class="pics" id="slider"> 
    <img src="/images_cycle/beach1.jpg" width="200" height="200" alt="توضیحی درباره عکس شماره 1" /> 
    <img src="/images_cycle/beach2.jpg" width="200" height="200" alt="توضیحی درباره عکس شماره 2"/> 
    <img src="/images_cycle/beach3.jpg" width="200" height="200" alt="توضیحی درباره عکس شماره 3"/> 
</div>
<div id="output">وضعیت اسلایدر</div>
<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollLeft', 
        speed:5000,
        timeout: 5000, 
        before:  onBefore, 
        after:   onAfter 
    });
    function onBefore() { 
    $('#output').html("در حال حاضر، تصویر با آدرس زیر در حال اسلاید شدن است<br>" + this.src); 
    } 
    function onAfter() { 
        $('#output').html("اسلاید برای تصویر با آدرس زیر بصورت کامل انجام شد:<br>" + this.src) 
            .append('<h3>' + this.alt + '</h3>'); 
    }
});
</script>