خانه / جی کوئری / اسلایدشو زیبا

اسلایدشو زیبا

امروز براتون سه اسلاید شو آماده کردیم

البته این سه اسلایدشو شبیه هم هستن اما هر کدام شامل خصوصیات خاص خود هست که خودتون در پیش نمایش ببینید

پیشنمایش و دانلود در ادامه مطلبslideshow

این اسلاید شو توضیحات خاصی نداره و استفاده از اون خیلی راحت هست مثلا برای تغییر عکس ها ،فایل ایندکس مربوط به اسلایدشو دلخواهتون رو باز میکنید

به طور مثال فایل index.html

<div id="js_version">
<ol>
<li data-slide-name="slide1">
<h2><span>اسلاید اول</span></h2>
<div>
<img src="images/1.jpg" alt="Slide One" />
</div>
</li>
<li data-slide-name="slide2">
<h2><span>اسلاید دوم</span></h2>
<div>
<img src="images/2.jpg" alt="Slide Two" />
</div>
</li>
<li data-slide-name="slide3">
<h2><span>اسلاید سوم</span></h2>
<div>
<img src="images/3.jpg" alt="Slide Three" />
</div>
</li>
<li data-slide-name="slide4">
<h2><span>اسلاید چهارم</span></h2>
<div>
<img src="images/4.jpg" width="768" alt="Slide Four" />
</div>
</li>
<li data-slide-name="slide5">
<h2><span>اسلاید پنجم</span></h2>
<div>
<img src="images/5.jpg" alt="Slide Five" />
</div>
</li>
</ol>
<noscript>
<p>لطفا برای فعال کردن جاوا اسکریپت اینجا را کلیک کنید.</p>
</noscript>
</div>

همونطور که می بینید هر خط لیست شامل یک عکس و عنوان هست، که شما می تونید با اضافه کردن یه لیست دیگه و جاگذاری تصویر و عنوان خود به جاهای مورد نظر بهش یک اسلاید دیگه اضافه کنید

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

راستی اگه از این مطلب خوشتون اومده لطفا بهش امتیاز بدین،ممنونیم

درباره ی مرتضی لطفی نژاد

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

مطلب پیشنهادی

دکمه های اشتراک گذاری انعطاف پذیر

امروز براتون دکمه های اشتراک گذاری انعطاف پذیری رو آماده کردیم که با جی کوئری …

7 دیدگاه

  1. با یه کم دست کاری آبجکت خوبی می تونه باشه
    آفرین جناب لطفی
    همین جور ادامه دهید

  2. سلام آقا..خسته نباشید…خیلی معذرت میخوام
    راستش من درست استفاده از این اسلاید شو را بلد نیستم..اگه یه توضیحی بدید که فایل های cssوjqueruکه در فایل هست را چطوری باید ازش استفاده کنیم ممنون میشم.

    • مرتضی لطفی نژاد

      اون رو دانلود میکنید و فایل هاش رو در پوشه سایت خودتون قرار بدین و سپس کد های زیر رو در بین تگ head سایتتون قرار بدین و بقیش هم که توضیح دادم در ادامه مطلب

              <!-- CSS files -->
              <link href="css/layout.css" rel="stylesheet" />
              <link href="css/liteaccordion.css" rel="stylesheet" />
      
              <!-- jQuery -->        
              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      
              <!-- jQuery easing -->
              <script src="js/jquery.easing.1.3.js"></script>
      
              <!-- liteAccordion jQuery library -->
              <script src="js/liteaccordion.jquery.js"></script>
      
              <script>
                  $(document).ready(function(){
                      $('#js_version').liteAccordion({
                          theme : 'dark',
                          rounded : true,
                          enumerateSlides : true,
                          firstSlide : 1,
                          linkable : true,
                          easing: 'easeInOutSine'
                      });
                  });
              </script>
      

پاسخ دهید

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

به خانواده بزرگ فارس اسکریپت بپیوندید

با عضویت در سایت فارس اسکریپت به مطالب بروز کسب درآمد از طراحی صفحات وب و طراحی قالب دست خواهید یافت

Powered by themekiller.com