کد ایجاد اسلایدر-همیار اسلایدر

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

کد ایجاد اسلایدر-همیار اسلایدر
کد ایجاد اسلایدر-همیار اسلایدر

[button link=”https://codebazan.ir/dl/file/hamyar-slider/fa/index.html” target=”_blank” icon=”momizat-icon-eye”]دمو کد[/button]

[button link=”https://codebazan.ir/dl/file/hamyar-slider/fa.zip” icon=”momizat-icon-arrow-down”]دانلود کد در فایل زیپ[/button]

[quote]اپدیت کد در ۱۰-۲-۹۶[/quote]

ابتدا کدهای قبل از بسته شدن تگ head قرار دهید

<script src="https://codebazan.ir/dl/file/hamyar-slider/fa/js/jquery.js"></script> 
<script src="https://codebazan.ir/dl/file/hamyar-slider/fa/js/hamyar_slider.js">
</script>

بعد از کدهای فوق کدهای css رو قرار دهید

<style>
.hamyar_slider {
 list-style-type:none;
 position:relative;
 margin:auto;
 direction:rtl !important; /* Dont' change this */
 font-family:tahoma;
 background: url("https://codebazan.ir/Tools/pop-box/bg_fieldse.jpg");
 direction:ltr !important; 
}
.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 */
background-image:url(https://codebazan.ir/Tools/pop-box/bg-textarea.gif);
color:#fff;
}
.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("https://codebazan.ir/dl/file/hamyar-slider/fa/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("https://codebazan.ir/dl/file/hamyar-slider/fa/img/glyphicons-halflings.png");
}
.icon-arrow-left {
 background-position: -240px -96px;
}

.icon-arrow-right {
 background-position: -264px -96px;
}
</style>

نوبت به کدهای html میرسه اونجایی که میخواهید اسلایدر به نمایش در اید قرار دهید.و ادرس عکسهای خود را جایگزین و یا اضافه کنید

<div style="width:980px;margin:auto;">
<div class="hamyar_slider" style="height: 183px; width: 810px; overflow: hidden; position: relative; z-index: 2; left: 0px;">
 <ul style="position: relative; list-style-type: none; z-index: 1; margin: 0px; padding: 0px; height: 183px; width: 1620px; right: 0px;"> <li><img src="https://codebazan.ir/logo.png" width="100%" height="100%">1</li>
 <li><img src="https://codebazan.ir/logo.png" width="100%" height="100%">2</li>
 <li><img src="https://codebazan.ir/logo.png" width="100%" height="100%">3</li>
 <li><img src="https://codebazan.ir/logo.png" width="100%" height="100%">4</li>
 <li><img src="https://codebazan.ir/logo.png" width="100%" height="100%">5</li>
 <li><img src="https://codebazan.ir/logo.png" width="100%" height="100%">6</li>
 <li><img src="https://codebazan.ir/logo.png" width="100%" height="100%">7</li>
 <li><img src="https://codebazan.ir/logo.png" width="100%" height="100%">8</li>
 <li><img src="https://codebazan.ir/logo.png" width="100%" height="100%">9</li>
 <li><img src="https://codebazan.ir/logo.png" width="100%" height="100%">10</li>
 </ul>
 </div>
<div class="icon-arrow-left" style="margin-top: -89px;margin-left: 63px;"></div>
<div class="icon-arrow-right disable" style="margin-top: -89px;margin-right: 63px;float: right;"></div>
</div>

قسمت اخر کد جاوا اسکریپت بوده و برای تنظیم سرعت و … اسلایدر استفاده میشود.

<script> 
$('.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:1
});
</script>

show -> تعداد نمایش که به صورت پیش فرض ۵ هست .
btnprev -> سلکتر css دکمه قبلی که به صورت پیش فرض NULL هست .
btnext -> سلکتر css دکمه بعدی که به صورت پیش فرض NULL هست .
speed -> سرعت عوض شدن اسلایدر .
disable_class -> نام کلاس برای دکمه ها وقتی که غیر فعال هستند.
auto -> حالت عوض شدن اتوماتیک اسلایدر که با true و false مشخص میشود .
auto_time -> مشخص کردن زمان برای زمانی که اسلایدر اتوماتیک هست
slide -> تعداد عوض شدن در هر اسلاید مثلاً ۱ دونه ۱ دونه یا ۸ تا ۸ تا

خب اموزشها تموم شد_برای نمایش این اسلایدر در یک صفحه html و یا ثفحات جانبی سایت و وبلاگ کافیه تمام کدهای بالارو به ترتیب زیر هم قرار دهید تا اسلایدر شما اماده شود.

برای تست کد بالا میتوانید از ابزار پیش نمایش کدبازان استفاده نمایید.

31 Comments

  1. میشه کاری کرد اسلایدر نیاد از اول؟!!! یعنی یه دفعه برنگرده عقب و تمام عکس هارو مرور کنه فقط بعد از عکس آخر، دوباره عکس اول و نشون بده.

    nc
    1. سلام
      قسمت اخر این کد بخش تنظیماتشه میتونی همه اینکارا رو انجام بدی
      تایمشو تغییر بدی و…
      ی کم سعی کن نتونستی بازم همینجا بگو برات ردیفش کنم
      اول خودت سعی کن همینجوری نگو ن …

      admin
  2. سلام خسته نیاشید
    خیلی وقته دنبال این اسلاید بودم اما نمیدونم چرا تو میهن بلاگ کار نمیکنه
    اگه ممکنه راهنمایی کنید ممنون

    سامی
      1. سلام داداش ایمیلی که فرستادی چیزی ازش متوجه نشدم
        اون کدی رو که دادی جایگزینه قالب کردم اما قالبم باز نشد فقط یه صفحه سفید بود که یه اسلاید شو بالا وسطح صفحه بود اونم اسلاید شوی که من میخواستم نبود

        سامی
        1. سلام
          قالبی ک فرستادی غیر استاندارد بود بت گفتم
          بدش اسلایدزر نمونه داری بم بگو برات درست کنم
          تو ی سایت چیزی دیدی بگو…

          admin
  3. سلام
    یعنی چی قالبم غیر استاندارد بود ؟
    من اونو از یه شرکت طراحی قالب خریدم
    البته این نسخشو که بهت دادم خودم کلی تغیرات توش دادم میخوای کد خود قالبو بدونه ویرایش بهت بدم و اون کاراییو که گفتم برام درست کن
    یکیش حذف ثبت نظرات تو صفحه اول بود که میخوام تو همون ادامه مطلب نشون بده مث یه سایت رسمی
    یکی دیگشم حذف اون گزینه ادامه مطلب از سمت راست قالبم که میخوام بره سمت چپ درست شبیه اون عکسایی که بهت دادم بشه
    و درمورد اسلاید هم میخوام زیر اسلاید شو خودم درست بالای سه تا ستون قالب یه اسلاید نواری تصاویر کوچیک برام بزاری که لینکم داشته باشه
    تعدادشم یا ششتا باشه یا ۱۲ سایزشونم حدودا ۲۰۰ در ۲۰۰ عالیه مثل همه سایتای موسیقی که عکسای کوچیک خواننده ها بالای قالبشون هست هر کدومم به یه شکلی اما اون اسلایدی که فرستادی یه اسلاید شو بود که از اونا نمیخوام
    چیزایی که گفتم میخوام مثل این سایت باشه
    هم اسلاید شو نواریش هم ادامه مطلبش قربونه دستت https://www.tak3da.com/

    سامی
    1. با سلام
      اینی ک در این سایته بصورت ثابته و اسلاید نیست اسلایدم میشه بهتره کد همیار اسلایدرو بدی همون طراح قالب برات جاساز کنه بدش اینه ک تگ های سایتو نمیشناسم برای کدوم سرویس وبلاگدهیه…
      حالا کد قالبو در یک فایل تکست با utf8 برام بفرستencoding

      admin
      1. سلام
        آره اون ثابته ولی من متحرک میخوام مثل همینی که خودت درست کردی
        با طراح قالبم حرف زدم و ازش خواستم خودش واسم درست کنه و مشکلامو حل کنه
        ولی گفت که اونا طبق قانون خودشون قالب طراحی میکنن و هیچ سفارشی رو قبول نمیکنن
        قالب وبلاگم مال میهن بلاگه تو قسمت ویرایش قالب فکر کنم راجب تگ های میهن بلاگ معرفی کرده
        خب چی شد کدی اصلی رو که فرستادم باز مشکل داشت ؟
        اینبار واست با فرمت OpenDocument Text سیو کردم اگه ممکنه بازم تلاش خودتو بکن شاید درست شد حالا اگه این همیار اسلاد رو نتونستی روش بزاری اشکال نداره همون گزینه ادامه مطلب و قسمت نظرات رو همون طور که قبلا گفتم واسم درست کنی ممنونت میشم
        با طراح قالبم دوباره حرف میزنم ببینم چی میه
        این utf8 که گفتی چی هستش ؟
        اینم کد قالب http://s9.picofile.com/file/8297213126/Document.odt.html

        سامی
        1. داداش اکه تونستی یه اسلاید ثابت شبیه سایت تکصدا واسم درستی کنی بازم خوبه حالا متحرکم نشد اشکال نداره

          سامی
        2. با سلام
          با توجه به اینکه ویرایش قالب و اضافه کردن قسمتهای دلخوه شما نیاز ب وقت داره متاسفانه وقت لازم برای اینکار فعلا ندارم
          انجمن سایت سه نفری بزارین براتون درست میکنن
          در اولین فرصتدحتما براتوت درست میکنم??

          admin
          1. عالیه دمت گرم فقط ستون ها رو مثل اول مرتب کنی حله میمونه او جابجا کردنه ادامه مطلب و انتقال صفحه نظرات به ادامه مطلب

            سامی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *