Konular

Easy Slider Jquery Plugin

Jquery ile yapılmış mükkemmel sliderlardan birisi Easy Slider

Gerçekten ismi ile aynı özelliklere sahip bir slider.

Easy Slider Jquery Plugin

Bu adresten gerekli bilgilere ve Jquery plugin dosyasına ulaşabilirsiniz.

Özelliklerinden bazıları:

  • Aynı sayfa içerisinde birden fazla kullanabilirsiniz
  • Numaralandırılmış slider desteği var
  • Otomatik geçiş desteği var.

Aşağıdaki gibi her slide için farklı ayarlayabileceğiniz bir ayar tablosu var

prevId: 		'prevBtn',
prevText: 		'Previous',
nextId: 		'nextBtn',	
nextText: 		'Next',
controlsShow:		true,
controlsBefore:	'',
controlsAfter:		'',	
controlsFade:		true,
firstId: 		'firstBtn',
firstText: 		'First',
firstShow:		false,
lastId: 		'lastBtn',	
lastText: 		'Last',
lastShow:		false,				
vertical:		false,
speed: 		800,
auto:			false,
pause:			2000,
continuous:		false, 
numeric: 		false,
numericId: 		'controls'

 

3 farklı örnekle nasıl kullanacağımıza bakalım

1. Continuous slide

 

Easy Slider Jquery Plugin


<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/easySlider1.7.js"></script>
        <script type="text/javascript">
                $(document).ready(function(){  
                        $("#slider").easySlider({
                                auto: true,
                                continuous: true
                        });
                });    
        </script>
       
<style type="text/css">
#slider ul, #slider li,
        #slider2 ul, #slider2 li{
                margin:0;
                padding:0;
                list-style:none;
                }
        #slider2{margin-top:1em;}
        #slider li, #slider2 li{
                /*
                        define width and height of list item (slide)
                        entire slider area will adjust according to the parameters provided here
                */
                width:696px;
                height:241px;
                overflow:hidden;
                }      
        #prevBtn, #nextBtn,
        #slider1next, #slider1prev{
                display:block;
                width:30px;
                height:77px;
                position:absolute;
                left:-30px;
                top:71px;
                z-index:1000;
                }      
        #nextBtn, #slider1next{
                left:696px;
                }                                                                                                              
        #prevBtn a, #nextBtn a,
        #slider1next a, #slider1prev a{  
                display:block;
                position:relative;
                width:30px;
                height:77px;
                background:url(../images/btn_prev.gif) no-repeat 0 0;  
                }      
        #nextBtn a, #slider1next a{
                background:url(../images/btn_next.gif) no-repeat 0 0;  
                }      
               
        /* numeric controls */ 

        ol#controls{
                margin:1em 0;
                padding:0;
                height:28px;   
                }
        ol#controls li{
                margin:0 10px 0 0;
                padding:0;
                float:left;
                list-style:none;
                height:28px;
                line-height:28px;
                }
        ol#controls li a{
                float:left;
                height:28px;
                line-height:28px;
                border:1px solid #ccc;
                background:#DAF3F8;
                color:#555;
                padding:0 10px;
                text-decoration:none;
                }
        ol#controls li.current a{
                background:#5DC9E1;
                color:#fff;
                }
        ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
</style>
       
</head>
<body>

       
<div id="slider">
  <ul>                         
        <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
        <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
        <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
        <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
        <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>                 
   </ul>
</div>
                       

</body>
</html>

 Kodlar gayet sade ve anlaşılır.

2.Numeric navigation

 

Easy Slider Jquery Plugin

Yukarıdaki koddaki Jquery kısmını değiştirmeniz bu efekt için yeterli

 

<script type="text/javascript">
                $(document).ready(function(){  
                        $("#slider").easySlider({
                                auto: true,
                                continuous: true,
                                numeric: true
                        });
                });    
        </script>
 

 3.Multiple slides

Bu özellikle Easy Slider'in en güzel yanı

 

Easy Slider Jquery Plugin

Yine aynı şekilde En baştaki Jquery kısmını aşağıdaki gibi yapmanız yeterli

 

<script type="text/javascript">
                $(document).ready(function(){  
                        $("#slider").easySlider({
                                auto: true,
                                continuous: true,
                                nextId: "slider1next",
                                prevId: "slider1prev"
                        });
                        $("#slider2").easySlider({
                                numeric: true
                        });
                });    
        </script>
 

 

Kaynak http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

Yorumunuzu Ekleyin

Kapsayan Tagı Silmek unwrap()

Bazen SEO için tagları bir başka tag içerisine gömmek zorunda kalırız. Fakat daha sonra bu gömen kod başımıza bela olabilir. JQuery ile bundan unwrap ile kurtulabiliriz.

22,322 Okunma Henüz yorum yapılmamış 10/07/2011 04:55:07

Jquery Tab Menu Örneği

Çok güzel hazırlanmış bir Jquery Tab Menu Uygulaması

22,086 Okunma Henüz yorum yapılmamış 30/07/2011 21:16:35

Jquery ile Basit Bir Slider

Jquery kullanarak yapılmış basit bir slider örneği

20,575 Okunma Henüz yorum yapılmamış 25/07/2011 22:20:05

Jquery İle Resim Boyutlandırma

Bir IMG tagının içinde bulunduğu DIV tağına göre yeniden boyutlandırılması, sayfanın genişliğinin değişmesi sonuçları değiştirecektir.

19,751 Okunma Henüz yorum yapılmamış 10/07/2011 04:24:25

Jquery ile Resim Ortalamak

Bir DIV tagı ile sınırlandırılmış bir alana bir IMG tagını ortalayarak yerleştirmek

16,504 Okunma Henüz yorum yapılmamış 10/07/2011 04:23:28

JQuery Seçicilerini Kullanmak (JQuery Selectors)

Bir HTML nesnesini, bir CSS clasını, bir ID ye sahip elemanı veya bir name'e sahip form nesnesini seçip nasıl JQuery efekti verebiliriz?

16,020 Okunma Henüz yorum yapılmamış 15/01/2014 19:09:39

Yükleniyor...