ijquery

اسلاید رسپانسیو

21 دیدگاه / اسلاید شو / از

screenshot

 

elastislide اسلایدی رسپانسیو ( responsive ) برای قالب های نوین که به این شیوه طراحی شدند

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

  1. قبل از </head> کد زیر را قرا دهید :  
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/elastislide.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script src="js/modernizr.custom.17475.js"></script>

     

  2. بعد از <body> کد زیر را قرار دهید : 
    <div class="container demo-1">
<div class="main">
<header class="clearfix">	
<h1>Elastislide <span>A Responsive Image Carousel</span></h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Example 1</a>
<a href="index2.html">Example 2</a>
<a href="index3.html">Example 3</a>
<a href="index4.html">Example 4</a>
</nav>
</header>

<!-- Elastislide Carousel -->
<ul id="carousel" class="elastislide-list">
<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
</ul>
<!-- End Elastislide Carousel -->

<p><strong>Resize the browser to see how the carousel adapts</strong></p>

<p class="info"><strong>Example 1:</strong> A minimum of 3 (default) images are always visible.</p>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquerypp.custom.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript">

$( '#carousel' ).elastislide();

</script>

     


پیش نمایش دانلود فایل پلاگین

21 دیدگاه دربارهٔ «اسلاید رسپانسیو»

  2. مهدی

    درود خسته نباشید , برای مثال من می خوام نمونه ایندکس اول رو تویه یه قالب با دستور آی فریم فراخوانی کنم اما هرکاری می کنم اندازه ها و پس زمینه درست نمیشه , میشه یه آموزش بدید ؟ کد خوام با همان اندازه برام بزارید ؟

    پاسخ
  5. mahdi

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

    پاسخ
  6. مهدی

    خب داداش یک فاصله ای خالی بین بالای مرورگر تا خود اسلایدر هست چطوری اونو بردارم میخوام پس زمینه هم نداشته باشه

    پاسخ
  7. ابوالفضل

    سلام و عرضه خسته نباشید
    – میخواستم از این اسلایدشو (حالت اول) استفاده کنم، اما فقط یک عکس باشه و هر دفعه یک عکس بیاد و بره
    ینی مثلا الان که در اینی که شما گذاشتید 5 عکس به صورت کامل هست و یه نصفه عکس نشون میده
    اما من میخوام فقط یک عکس نشون بده

    -و یه سوال دیگه اینکه میشه به صورت اتومات هم عکسا بیادو بره، بدون اینکه روی فلش کلیک کنیم؟

    ممنون

    پاسخ
  9. iman

    سلام عزیز ببخشید یه سوال داشتم چرا این ها انقدر سنگین هستن و برای لود شدن زمان میبرن؟ من فکر میکنم به خاطر اون لحظه ای هستش که به گوگل وصل میشه نمیشه کاریش کرد؟

    پاسخ
    1. mahdi

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

      پاسخ
  10. مهدی

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

    پاسخ
  12. نسرین

    سلام
    من یک گالری تصویر میخوام که مثل گوگل باشه ، یعنی چند تا تصویر کنار هم هست و وقتی روی تصویر مورد نظر کلیک میکنیم ، آن عکس بزرگ شده و در بین همون عکس های کوچیک اولیه نمایش داده بشه ، مثل جستجوی تصویر در گوگل
    مرسی

    پاسخ
  13. ashkan926

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

    پاسخ
    1. رضا طاهری

      سلام ashkan926
      بله چون این کد ها مربوط به اسلایدر اولیه
      شما داخل فایل دانلودیتون کد های فایل مورد نظر رو کپی کنید
      موفق باشید.

      پاسخ

دیدگاه‌ خود را بنویسید

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