همیار اسلایدر

پلاگین جی کوئری همیار اسلایدر یک پلاگین کاربردی ایرانی میباشد که توسط یکی از کاربران مهمان عزیز دنیای جی کوئری نوشته شده است .

آموزش استفاده

1. فراخوانیjs قبل از تگ </head>

<script src="js/jquery.js"></script> 
<script src="js/hamyar_slider.js"></script>

 

1. فراخوانی css قبل از تگ </head>

   <style>
   .hamyar_slider {
   	list-style-type:none;
   	position:relative;
   	margin:auto;
   	direction:rtl !important; /* Dont' change this */
   	font-family:tahoma;
   }
   .hamyar_slider ul li {
   	list-style-type:none;
   	float:left;
   	padding:5px;
   	border:1px solid #ccc;
   	margin:5px;
   	border-radius:5px;
   	-webkit-transition : all 0.4s ease-in;
   	-moz-transition : all 0.4s ease-in;
   	-o-transition : all 0.4s ease-in;
   	cursor:pointer;
   	position:relative;
   	width:140px;
   	height:162px;
   	text-align:center;
   	direction:rtl; /* You can change it */
   }
   .hamyar_slider li:hover {
   	border:1px solid #00F;
   	-webkit-transition : all 0.4s ease-in;
   	-moz-transition : all 0.4s ease-in;
   	-o-transition : all 0.4s ease-in;
   }
   .disable {
   	-webkit-transition : all 0.4s ease-in;
   	-moz-transition : all 0.4s ease-in;
   	-o-transition : all 0.4s ease-in;
   	opacity:.5;
   }
   [class^="icon-"],
   [class*=" icon-"] {
     display: inline-block;
     width: 14px;
     height: 14px;
     margin-top: 1px;
     *margin-right: .3em;
     line-height: 14px;
     vertical-align: text-top;
     background-image: url("img/glyphicons-halflings.png");
     background-position: 14px 14px;
     background-repeat: no-repeat;
   }
   
   /* White icons with optional class, or on hover/focus/active states of certain elements */
   
   .icon-white,
   .nav-pills > .active > a > [class^="icon-"],
   .nav-pills > .active > a > [class*=" icon-"],
   .nav-list > .active > a > [class^="icon-"],
   .nav-list > .active > a > [class*=" icon-"],
   .navbar-inverse .nav > .active > a > [class^="icon-"],
   .navbar-inverse .nav > .active > a > [class*=" icon-"],
   .dropdown-menu > li > a:hover > [class^="icon-"],
   .dropdown-menu > li > a:focus > [class^="icon-"],
   .dropdown-menu > li > a:hover > [class*=" icon-"],
   .dropdown-menu > li > a:focus > [class*=" icon-"],
   .dropdown-menu > .active > a > [class^="icon-"],
   .dropdown-menu > .active > a > [class*=" icon-"],
   .dropdown-submenu:hover > a > [class^="icon-"],
   .dropdown-submenu:focus > a > [class^="icon-"],
   .dropdown-submenu:hover > a > [class*=" icon-"],
   .dropdown-submenu:focus > a > [class*=" icon-"] {
     background-image: url("img/glyphicons-halflings-white.png");
   }
   .icon-arrow-left {
     background-position: -240px -96px;
   }
   
   .icon-arrow-right {
     background-position: -264px -96px;
   }
   </style>

    

2. فراخوانی html بعد از تگ </body>
 

   <div class="hamyar_slider">
         <ul>
           <li><img src="n.png">1</li>
           <li><img src="n.png">2</li>
           <li><img src="n.png">3</li>
           <li><img src="n.png">4</li>
           <li><img src="n.png">5</li>
           <li><img src="n.png">6</li>
           <li><img src="n.png">7</li>
           <li><img src="n.png">8</li>
           <li><img src="n.png">9</li>
           <li><img src="n.png">10</li>
         </ul>
       </div>
   <div class="icon-arrow-left" style="margin-top: -89px;margin-left: 63px;"></div>
   <div class="icon-arrow-right" style="margin-top: -89px;margin-right: 63px;float: right;"></div>

   اجرای پلاگین

   <script type="text/javascript"> 
   $('.hamyar_slider').hamyar_slider({
   		  show:5,
   		  btnprev:'.icon-arrow-right',
   		  btnext:'.icon-arrow-left',
   		  speed:500,
   		  disable_class: 'disable',
   		  auto :true,
   		  auto_time: 2500,
   		  slide:2
   });
   </script>

    

مقدارهای تابع hamyar_slider برای تنظبمات پلاگین

 show -> تعداد نمایش که به صورت پیش فرض 5 هست . 

 btnprev ->  سلکتر css دکمه قبلی که به صورت پیش فرض NULL هست .


 btnext -> سلکتر css دکمه بعدی که به صورت پیش فرض NULL هست .


 speed -> سرعت عوض شدن اسلایدر .


 disable_class -> نام کلاس برای دکمه ها وقتی که غیر فعال هستند.

 auto -> حالت عوض شدن اتوماتیک اسلایدر که با true و false مشخص میشود .


auto_time -> مشخص کردن زمان برای زمانی که اسلایدر اتوماتیک هست


slide -> تعداد عوض شدن در هر اسلاید مثلاً 1 دونه 1 دونه یا 8 تا 8 تا