/ اسلایدر فول Css | اتوماتیک اسلاید | | پاس شدن با بردن موس روی آن |قابل استفاده برای وردپرس و ویبولتین |
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
فروش قالب وردپرس فروش فایل مشابه ژاکت وندا هاست
صفحه 5 از 5 نخستنخست ... 345
نمایش نتایج: از 41 به 44 از 44

مقاله: اسلایدر فول Css | اتوماتیک اسلاید | | پاس شدن با بردن موس روی آن |قابل استفاده برای وردپرس و ویبولتین |

    1. اسلایدر فول Css | اتوماتیک اسلاید | | پاس شدن با بردن موس روی آن |قابل استفاده برای وردپرس و ویبولتین |

      اسلایدر فول Css | اتوماتیک اسلاید | | پاس شدن با بردن موس روی آن |قابل استفاده برای وردپرس و ویبولتین |

      بسم الله الرحمن الرحیم

      این اسلایدر خیلی سبک و شاهکاره (در یک کلام) مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      | دمو و فولدر عکس ها و استایل سی اس اس | داخل فایل دانلودی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      برای وردپرس این کد هارو داخل تگ های بادی قرار بدید


      کد:
      <div class="container">
              <div id="content-slider">
                  <div class="nivoSlider" style="position: relative; background: url("http://www.wikivb.ir/images/img_1.jpg") no-repeat scroll 0% 0% transparent;" id="slider">
                      <div id="mask">
                      <ul>
                  <li id="first" class="firstanimation">
                  <a href="#">
                      <img style="display: none;" src="http://www.wikivb.ir/images/img_1.jpg" alt="Cougar">
                      </a>
                  <div class="tooltip">
                      <h1>متن دلخواه</h1>
                      </div>
                      </li>
                      <li id="second" class="secondanimation">
                      <a href="#">
                      <img src="http://www.wikivb.ir/images/img_2.jpg" alt="Lions">
                      </a>
                  <div class="tooltip">
                      <h1>متن دلخواه</h1>
                      </div>
                      </li>
                       
                      <li id="third" class="thirdanimation">
                      <a href="#">
                      <img src="http://www.wikivb.ir/images/img_3.jpg" alt="Snowalker">
                      </a>
                      <div class="tooltip">
                      <h1>متن دلخواه</h1>
                      </div>
                      </li>
                                   
                      <li id="fourth" class="fourthanimation">
                      <a href="#">
                      <img src="http://www.wikivb.ir/images/img_4.jpg" alt="Howling">
                      </a>
                      <div class="tooltip">
                      <h1>متن دلخواه</h1>
                      </div>
                      </li>
                                   
                      <li id="fifth" class="fifthanimation">
                      <a href="#">
                      <img src="http://www.wikivb.ir/images/img_5.jpg" alt="Sunbathing">
                      </a>
                      <div class="tooltip">
                      <h1>متن دلخواه</h1>
                      </div>
                      </li>
                      </ul>
                      </div>
                      <div class="progress-bar"></div>
                  <div style="display: none; opacity: 0.8;" class="nivo-caption"><p></p></div><div style="display: none;" class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div><div class="nivo-controlNav"><a class="nivo-control active" rel="0">1</a><a class="nivo-control" rel="1">2</a></div></div>
              </div>
          </div>
      سپس این کد هارو داخل تگ های استایل بگذارید

      کد:
          /* wikivb css3 slider */
          html, body, div, span, applet, object, iframe,
          h1, h2, h3, h4, h5, h6, p, blockquote, pre,
          a, abbr, acronym, address, big, cite, code,
          del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
          dl, dt, dd, ol, ul, li,
          fieldset, form, label, legend,
          table, caption, tbody, tfoot, thead, tr, th, td,
          article, aside, canvas, details, embed,
          figure, figcaption, footer, header, hgroup,
          menu, nav, output, ruby, section, summary,
          time, mark, audio, video {
              margin: 0;
              padding: 0;
              border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
      }
      /* LAYOUT */
          .container {
              margin:0 auto;
              overflow:hidden;
              width:960px;
          }
          /* CONTENT SLIDER */
          #content-slider {
              width:100%;
              height:360px;
              margin:10px auto 0;
          }
          /* SLIDER */
          #slider {
          background:#000;
              border:5px solid #eaeaea;
              box-shadow:1px 1px 5px rgba(0,0,0,0.7);
          height:320px;
              width:680px;
          margin:10px auto 0;
          overflow:visible;
          position:relative;
          }
          #mask {
          overflow:hidden;
              height:320px;
          }
          #slider ul {
              margin:0;
              padding:0;
              position:relative;
          }
          #slider li {
              width:680px;
              height:320px;
              position:absolute;
          top:-325px;
              list-style:none;
          }
          #slider li.firstanimation {
              -moz-animation:cycle 25s linear infinite;  
              -webkit-animation:cycle 25s linear infinite;       
          }
          #slider li.secondanimation {
          -moz-animation:cycletwo 25s linear infinite;
              -webkit-animation:cycletwo 25s linear infinite;    
          }
          #slider li.thirdanimation {
              -moz-animation:cyclethree 25s linear infinite;
              -webkit-animation:cyclethree 25s linear infinite;      
          }
          #slider li.fourthanimation {
              -moz-animation:cyclefour 25s linear infinite;
              -webkit-animation:cyclefour 25s linear infinite;       
          }
          #slider li.fifthanimation {
          -moz-animation:cyclefive 25s linear infinite;
              -webkit-animation:cyclefive 25s linear infinite;       
          }
          #slider .tooltip {
              background:rgba(0,0,0,0.7);
              width:300px;
          height:60px;
          position:relative;
              bottom:75px;
              left:690px;
          -moz-transition:all 0.3s ease-in-out;
              -webkit-transition:all 0.3s ease-in-out; 
          }
          #slider .tooltip h1 {
              color:#fff;
          font-size:24px;
              font-weight:300;
          line-height:60px;
          direction:rtl;
          padding:0 20px 0 0;
          }
          #slider li#first:hover .tooltip,
          #slider li#second:hover .tooltip,
          #slider li#third:hover .tooltip,
          #slider li#fourth:hover .tooltip,
          #slider li#fifth:hover .tooltip {
          left:390px;
      }
          #slider:hover li,
          #slider:hover .progress-bar {
          -moz-animation-play-state:paused;
              -webkit-animation-play-state:paused;
          }
      /* PROGRESS BAR */
          .progress-bar {
              position:relative;
          top:-5px;
          width:680px;
          height:5px;
              background:#000;
          -moz-animation:fullexpand 25s ease-out infinite;
        -webkit-animation:fullexpand 25s ease-out infinite;
          }
          /* ANIMATION */
          @-moz-keyframes cycle {
              0%  { top:0px; }
          4%  { top:0px; }
              16% { top:0px; opacity:1; z-index:0; }
          20% { top:325px; opacity:0; z-index:0; }
          21% { top:-325px; opacity:0; z-index:-1; }
              92% { top:-325px; opacity:0; z-index:0; }
              96% { top:-325px; opacity:0; }
              100%{ top:0px; opacity:1; }
               
          }
          @-moz-keyframes cycletwo {
              0%  { top:-325px; opacity:0; }
         16% { top:-325px; opacity:0; }
              20% { top:0px; opacity:1; }
          24% { top:0px; opacity:1; }
          36% { top:0px; opacity:1; z-index:0; }
          40% { top:325px; opacity:0; z-index:0; }
          41% { top:-325px; opacity:0; z-index:-1; }
          100%{ top:-325px; opacity:0; z-index:-1; }
      }
          @-moz-keyframes cyclethree {
          0%  { top:-325px; opacity:0; }
          36% { top:-325px; opacity:0; }
              40% { top:0px; opacity:1; }
              44% { top:0px; opacity:1; }
          56% { top:0px; opacity:1; }
          60% { top:325px; opacity:0; z-index:0; }
              61% { top:-325px; opacity:0; z-index:-1; }
              100%{ top:-325px; opacity:0; z-index:-1; }
      }
          @-moz-keyframes cyclefour {
              0%  { top:-325px; opacity:0; }
              56% { top:-325px; opacity:0; }
         60% { top:0px; opacity:1; }
              64% { top:0px; opacity:1; }
          76% { top:0px; opacity:1; z-index:0; }
          80% { top:325px; opacity:0; z-index:0; }
              81% { top:-325px; opacity:0; z-index:-1; }
              100%{ top:-325px; opacity:0; z-index:-1; }
          }
      @-moz-keyframes cyclefive {
          0%  { top:-325px; opacity:0; }
              76% { top:-325px; opacity:0; }
         80% { top:0px; opacity:1; }
              84% { top:0px; opacity:1; }
          96% { top:0px; opacity:1; z-index:0; }
              100%{ top:325px; opacity:0; z-index:0; }
          }
          @-webkit-keyframes cycle {
          0%  { top:0px; }
          4%  { top:0px; }
        16% { top:0px; opacity:1; z-index:0; }
          20% { top:325px; opacity:0; z-index:0; }
          21% { top:-325px; opacity:0; z-index:-1; }
              50% { top:-325px; opacity:0; z-index:-1; }
              92% { top:-325px; opacity:0; z-index:0; }
          96% { top:-325px; opacity:0; }
          100%{ top:0px; opacity:1; }
               
      }
          @-webkit-keyframes cycletwo {
              0%  { top:-325px; opacity:0; }
          16% { top:-325px; opacity:0; }
          20% { top:0px; opacity:1; }
          24% { top:0px; opacity:1; }
          36% { top:0px; opacity:1; z-index:0; }
          40% { top:325px; opacity:0; z-index:0; }
          41% { top:-325px; opacity:0; z-index:-1; } 
         100%{ top:-325px; opacity:0; z-index:-1; }
          }
          @-webkit-keyframes cyclethree {
          0%  { top:-325px; opacity:0; }
          36% { top:-325px; opacity:0; }
              40% { top:0px; opacity:1; }
              44% { top:0px; opacity:1; }
          56% { top:0px; opacity:1; z-index:0; }
              60% { top:325px; opacity:0; z-index:0; }
              61% { top:-325px; opacity:0; z-index:-1; }
          100%{ top:-325px; opacity:0; z-index:-1; }
      }
      @-webkit-keyframes cyclefour {
          0%  { top:-325px; opacity:0; }
          56% { top:-325px; opacity:0; }
              60% { top:0px; opacity:1; }
          64% { top:0px; opacity:1; }
          76% { top:0px; opacity:1; z-index:0; }
              80% { top:325px; opacity:0; z-index:0; }
              81% { top:-325px; opacity:0; z-index:-1; }
          100%{ top:-325px; opacity:0; z-index:-1; }
          }
          @-webkit-keyframes cyclefive {
          0%  { top:-325px; opacity:0; }
              76% { top:-325px; opacity:0; }
              80% { top:0px; opacity:1; }
          84% { top:0px; opacity:1; }
          96% { top:0px; opacity:1; z-index:0; }
          100%{ top:325px; opacity:0; z-index:0; }
      }
          /* ANIMATION BAR */
          @-moz-keyframes fullexpand {
              0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
              4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
             16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
             17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
             18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  
          }
          @-webkit-keyframes fullexpand {
              0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
              4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
         16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
         17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
             18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  
          }
          /* HTML5 display-role reset for older browsers */
          article, aside, details, figcaption, figure,
          footer, header, hgroup, menu, nav, section {
              display: block;
          }
          body {
          line-height: 1;
          }
          ol, ul {
          list-style: none;
          }
          blockquote, q {
              quotes: none;
          }
          blockquote:before, blockquote:after,
          q:before, q:after {
              content: '';
          content: none;
      }
          table {
          border-collapse: collapse;
              border-spacing: 0;
          }
      برای ویبولتین کد های اول رو به هرجایی که دوست دارید قرار بدید مثلا ناو بار و کد های دوم رو توی ادیشنال
      ولی یادتون نره که ادرس دهی باید عوض شه و فولدر که توی فایل دانلودی هست باید توی فولدر اون استایلی که دارید اسلایدر رو توش میزارید اکسترکت شه

      سایز عکس ها هم باید 320*680 باشه .
      و در ضمن اسم عکس هاهم باید همینی باشه که توی فولدر دانلود هست

      در پناه حق مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      ویرایش توسط xperiairan : 05-01-2014 در ساعت 11:46 PM
      چنانچه این مطلب مورد پسند شما واقع شده بر روی کلیک کنید .

      12 نفر از اعضا پست xperiairan را پسندیده اند


  1. #41
    M4hdi آنلاین نیست.
    M4hdi
    کاربر اخراجي
    308نوشته26مورد پسند

    تاریخ عضویت
    Feb 2014
    شماره عضویت
    4363
    پسندیده است
    111 پست
    بلاگ
    پست
    میزان امتیاز
    36
    gamestart.ir
    سلام

    ببخشید مهندس من از الان این کد ها رو قرار دادم منتها پایین سمت راست اسلایدر دو تا عدد 1 و 2 نوشته شده. مشکل کجاست؟

    http://upload7.ir/imgs/2014-05/72837205011310200276.png
    ویرایش توسط M4hdi : 05-11-2014 در ساعت 03:22 AM

  2. #42
    xperiairan آنلاین نیست.
    xperiairan
    کاربر اخراجي
    532نوشته662مورد پسند

    تاریخ عضویت
    Sep 2013
    شماره عضویت
    3018
    پسندیده است
    327 پست
    بلاگ
    پست
    میزان امتیاز
    672
    wikivb.ir
    نقل قول نوشته اصلی توسط M4hdi نمایش پست ها
    سلام

    ببخشید مهندس من از الان این کد ها رو قرار دادم منتها پایین سمت راست اسلایدر دو تا عدد 1 و 2 نوشته شده. مشکل کجاست؟

    http://upload7.ir/imgs/2014-05/72837205011310200276.png
    درود. ادرس انجمنتون رو بدید اون ادرسی که توی عکس بود ارور 403 میداد و اون گیم استارت دات ای ار اسلایدر روش نبودمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  3. #43
    M4hdi آنلاین نیست.
    M4hdi
    کاربر اخراجي
    308نوشته26مورد پسند

    تاریخ عضویت
    Feb 2014
    شماره عضویت
    4363
    پسندیده است
    111 پست
    بلاگ
    پست
    میزان امتیاز
    36
    gamestart.ir
    نقل قول نوشته اصلی توسط xperiairan نمایش پست ها
    درود. ادرس انجمنتون رو بدید اون ادرسی که توی عکس بود ارور 403 میداد و اون گیم استارت دات ای ار اسلایدر روش نبودمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    خوب وقتی اسلایدر خوب رو انجمن قرار نمیگره باید سریع بردارمش دیگه!

    اصلا یه چیز ترسناکیه بخدا مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی تا کد ها رو میذارم تو ادیشنال همه ی فونت ها بزرگ و Arial میشن و کلا انجمن عقب مونده میشه ...

  4. #44
    مهدی0331 آنلاین نیست.
    مهدی0331
    کاربر سايت
    110نوشته25مورد پسند

    تاریخ عضویت
    Sep 2013
    شماره عضویت
    3046
    پسندیده است
    37 پست
    بلاگ
    پست
    میزان امتیاز
    35
    nejebadiha.ir/forum.php
    ینفر نیس این اسلایدر رو درست کنه منم همین مشکل دوست قبلی رو دارم
    کلا فونت انجمن میریزه بهم و ناجور میشه

صفحه 5 از 5 نخستنخست ... 345

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

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

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

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

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