تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 2 از 2 نخستنخست 12
نمایش نتایج: از 11 به 13 از 13

مقاله: ساخت اسلایدر با جی کوئری

    1. ساخت اسلایدر با جی کوئری »

      ساخت اسلایدر با جی کوئری

      نگارش: , by (توسعه دهنده سایت)
      2013/06/02 01:49 PM
      امتیاز: 

      با سلام
      امروز یک پلاگین جی کوئری نوشتم که با اون می تونید برای خودتون اسلایدر بسازید.
      لینک پروژه
      برای استفاده اول باید لایبری جی کوئری و کد های سی اس اس رو قبل از </head> بذارید.
      کد:
      <style>
              .hamyar_slider{
                      list-style-type:none;
              position:relative;
              margin:auto;
                      direction:ltr !important; /* Dont' change this */
          }
          .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;
              text-align:center;
                      direction:ltr; /* 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;
          }
      </style>
      <script src="js/jquery.js"></script>
      سپس کد های اچ تی ام ال:
      کد:
      <div class="hamyar_slider">
            <ul>
              <li><img src="img/n.png">1</li>
              <li><img src="img/n.png">2</li>
              <li><img src="img/n.png">3</li>
              <li><img src="img/n.png">4</li>
              <li><img src="img/n.png">5</li>
              <li><img src="img/n.png">6</li>
              <li><img src="img/n.png">7</li>
              <li><img src="img/n.png">8</li>
              <li><img src="img/n.png">9</li>
              <li><img src="img/n.png">10</li>
            </ul>
          </div>
      <div class="icon-arrow-left"></div>
      <div class="icon-arrow-right"></div>
      سپس اینکلود کردن پلاگین و ران کردن آن که باید قبل از </body> باشد:
      کد:
      <script src="js/hamyar_slider.js"></script>
      <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:2
      });
      </script>
      توضیحات:
      show: تعداد اسلاید هایی است که باید نمایش داده شود.
      btnprev:سلکتور دکمه عقب رفتن هست.
      btnext:سلکتور دکمه جلو رفتن هست.
      speed:سرعت تغییر اسلاید ها.
      auto:حالت اتوماتیک را تعیین می کند. true برای فعال کردن و false برای غیر فعال کردن.
      auto_time:زمان تغییر اسلاید ها در حالت اتوماتیک است.به میلی ثانیه وارد شود.1ثانیه=1000میلی ثانیه.
      slide:تعداد اسلاید هایی که در هر بار جلو یا عقب برده می شود.
      موفق باشید.
      دریافت پلاگین
  1. Top | #11
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    41
    میزان امتیاز
    0

    پیش فرض

    من هم قبول دارم ! بد توضیح داده شده ! ماجرا رو باز کنید ! بهترین چیز و بی درد سر گذاشتن عکس از مراحل کاری بوده ! این طوری نه آموزنده و اموزش گیرنده مشکل پیدا نمی کنن !!!
    موفق باشید




  2. گیفت کارت آیتونز

  3. Top | #12
    کاربر مفید و فعال

    ورژن ویبولتین
    4.2
    نوشته ها
    1,446
    میزان امتیاز
    169

    پیش فرض

    خدمت آقا عابدین پور عرض کنم که من این اسلایدر رو گزاشتم ولی عکس ها روی هم میفتن میتونین ببینین خودتون :



    من این رو برای ایندکس گزاشتم ...

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

    بعد این کد ها رو قبل از </head> گزاشتم

    کد HTML:
    <style>         .hamyar_slider{                 list-style-type:none;         position:relative;         margin:auto;                 direction:ltr !important; /* Dont' change this */     }     .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;         text-align:center;                 direction:ltr; /* 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;     } </style> <script src="js/jquery.js"></script>
    بعد هم این کد هارو قبل از </body>

    گزاشتم :

    کد HTML:
    <div class="hamyar_slider"> <ul> <li><img src="img/n.png">1</li> <li><img src="img/n.png">2</li> <li><img src="img/n.png">3</li> <li><img src="img/n.png">4</li> <li><img src="img/n.png">5</li> <li><img src="img/n.png">6</li> <li><img src="img/n.png">7</li> <li><img src="img/n.png">8</li> <li><img src="img/n.png">9</li> <li><img src="img/n.png">10</li> </ul> </div> <div class="icon-arrow-left"></div> <div class="icon-arrow-right"></div>
    و همین طور

    کد HTML:
    <script src="js/hamyar_slider.js"></script> <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:2 }); </script>
    @MHAbedinpour

  4. Top | #13
    کاربر سایت

    ورژن ویبولتین
    4.2.0 Pl3
    نوشته ها
    302
    میزان امتیاز
    38

    پیش فرض

    جناب عابدین پور می توانید کمکی در این زمینه بکنید
    راهنمای کنید دقیقا کد ها را باید چی کار کنیم ؟

صفحه 2 از 2 نخستنخست 12

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •