اسلاید شو حرفه ای (شماره 2)

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

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

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery.immersive-slider.js"></script>
    <link href='immersive-slider.css' rel='stylesheet' type='text/css' />
    <link href="main.css" rel='stylesheet' type='text/css' />

2-  کد html جهت استفاده پلاگین

  <div class="wrapper">
    <header>
      <a href="http://www.ijquery.ir"><h1>دنیای جی کوئری</h1></a>
    </header>
    <div class="main">
      <div class="page_container">
        <div id="immersive_slider">
          <div class="slide" data-blurred="img/slide1_blurred.jpg">
            <div class="content">
              <h2><a href="http://www.ijquery.ir" target="_blank">دنیای جی کوئری</a></h2>
              <p>دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است.</p>
            </div>
            <div class="image">
              <a href="http://www.ijquery.ir" target="_blank">
                <img src="img/slide1.jpg" alt="Slider 1">
              </a>
            </div>
          </div>
          <div class="slide" data-blurred="img/slide2_blurred.jpg">
            <div class="content">
              <h2><a href="http://www.bucketlistly.com/apps" target="_blank">دنیای جی کوئری</a></h2>
              <p>دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است.</p>
            </div>
            <div class="image">
             <a href="http://www.ijquery.ir" target="_blank"> <img src="img/slide2.jpg" alt="Slider 1"></a>
            </div>
          </div>
          <div class="slide" data-blurred="img/slide3_blurred.jpg">
            <div class="content">
              <h2><a href="http://www.thepetedesign.com" target="_blank">دنیای جی کوئری</a></h2>
              <p>دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است</p>
            </div>
            <div class="image">
              <a href="http://www.ijquery.ir" target="_blank"><img src="img/slide3.jpg" alt="Slider 1"></a>
            </div>
          </div>

          <a href="#" class="is-prev">&laquo;</a>
          <a href="#" class="is-next">&raquo;</a>
        </div>
      </div>
  	</div>
  	<div class="benefits">
      <div class="page_container">

  	  </div>
  	</div>
  	<script type="text/javascript">
  	  $(document).ready( function() {
  	    $("#immersive_slider").immersive_slider({
  	      container: ".main"
  	    });
  	  });
    </script>
  </div>