نمایش تصاویر بصورت ریلی

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

اسلایدر های زیادی با استفاده از JQuery  نوشته شده اند و بصورت رایگان در دسترس می باشند یکی از این موارد که بنظرم بسیار ساده نوشته شده و به سادگی قابل پیاده سازی در وب سایت ها می باشد در سایت sorgalla.com معرفی شده که بصورت open source با مجوز MIT ارائه می شود

در ادامه حالت پایه اسلایدر معرفی شده در سایت فوق را با تغییراتی جهت نمایش کالاها بصورت ریلی استفاده کردم

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

برای شروع از یک تگ div  استفاده میکنیم که قالب اسلایدر خواهد بود  و با استفاده از css های مربوط به آن در فایل style.css (در مسیر css/style.css فایل پیوست)قرار داده شده مشخص میکنیم که اسلایدر چه اندازه ای داشته باشد و کجای صفحه قرار بگیرد.

<div class="ProductSlider">
</div>

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

.ProductSlider{
	display: inline;
        float: left;
        position: relative;
        margin-left: 20px;
        margin-right: 20px;
	direction: rtl; 
	min-height: 300px;
	border:1px solid #e2e2e2 !important;
	width:70%;
	font-family:yekan;
}

قدم بعدی تعیین هدر و بدنه اسلایدر می باشد که برای اینکار از تگ article استفاده شده است داخل تگ header عنوان اسلایدر نوشته می شود

<div class="ProductSlider">
     <article class='SliderHeader' data-sort=''>
           <header>
                <h3>پر بازدیدترین ها</h3>
           </header>

           <!--بدنه اصلی اسلایدر-->

     </article>
</div>

برای این قسمت در فایل style.css استایل هایی لحاظ شده که بسته به سلیقه شما قابل تغییر است

.SliderHeader{
    background-color: #f7f9fa;
    height: 40px;
}
.SliderHeader h3{
    color: #666;
    display: inline-block;
    font-size: 12px;
    padding-right: 15px;
    direction: rtl;
}

بدنه اصلی اسلایدر از تگ div تشکیل شده استایل های مربوطه در فایل jcarousel.basic.css (داخل پوشه css) اعمال شده است. از تگ a با کلاس های jcarousel-control-prev و jcarousel-control-next بعنوان کلید های بعدی و قبلی استفاده شده.

<div class="ProductSlider">
     <article class='SliderHeader' data-sort=''>
           <header>
                <h3>پر بازدیدترین ها</h3>
           </header>

           <div class="jcarousel-wrapper">
               <div class="jcarousel">
                  <!--ایتم های اسلایدر در این قسمت قرار می گیرند-->
               </div>
               <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
               <a href="#" class="jcarousel-control-next">&rsaquo;</a>
           </div>
     </article>      
</div>

برای برای نمایش آیتم ها که معمولا عکس یا ترکیبی از عکس و نوشته است از تگ ul و li استفاده می شود.من از این اسلایدر برای نمایش کالاها به همراه نام و قیمت آنها استفاده کردم و استایل هایی را هم در فایل style.css براشون لحاظ کردم و استایل ها رو هم از سایت دیجی کالا کپی کردم که شبیه اسلایدر نمایش کالا در دیجی کالا باشه

<div class="ProductSlider">
     <article class='SliderHeader' data-sort=''>
           <header>
                <h3>پر بازدیدترین ها</h3>
           </header>

           <div class="jcarousel-wrapper">
               <div class="jcarousel">
                  <ul>
                       <li>
                           <a href='#' target="_blank" class="productItem">
                                 <img src='images/Tablet-Huawei-MediaPad-X1-70.jpg' alt='Tablet-Huawei-MediaPad-X1'/>
                                 <h5 class="entitle">Tablet-Huawei-MediaPad-X1</h5>
                                 <span class="final-price">699,000 <span class="currency">تومان</span></span>
                           </a>
                       </li>
                       <li>
                             <!--آیتم دوم-->
                       </li>
                       <li>
                             <!--آیتم سوم-->
                       </li>

                  </ul>
               </div>
               <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
               <a href="#" class="jcarousel-control-next">&rsaquo;</a>
           </div>
     </article>      
</div>

برای اینکه این اسلایدر کار بکنه نیاز به کد های جاوا اسکریپت داریم توابعی که هنگام کلیک روی کلید قبلی و بعدی بصورت ریلی تصاویر رو نمایش بده. توابعی که من استفاده کردم از سایت sorgalla.com گرفتم و مربوط به نسخه پایه اسلایدر معرفی شده در آنجا هستش. برای نوشتن این اسلایدر از کتاب خانه JQuery ورژن ۱٫۱۱٫۱ استفاده شده که در فایل پیوست قرار داده شده (فایل jquery-1.11.1.js در پوشه scripts) و دو فایل JQuery دیگر هم بنام های jquery.jcarousel.min.js و jcarousel.basic.js استفاده شده که آنها رو باید به پروژه اضافه کنید.  فایل های jquery-1.11.1.js و jquery.jcarousel.min.js بدون تغییر باید به پروژه اضافه بشن اما فایل jcarousel.basic.js حاوی تنظیمات پایه اسلایدر هست که تنظیمات مربوط به اینکه با هر بار کلیک روی کلید های “بعدی” و “قبلی” چند آیتم جا به جا بشن از طریق تابع داخل این فایل انجام می شود. در اسلایدری که من بعنوان دمو نمایش دادم در هر بار کلیک ۴ آیتم جابه جا می شوند اگر بخواهید تعداد آیتم های جابه جا شونده را تغییر دهید این کار رو با تغییر مقدار target در فایل مذکور  می توانید انجام دهید.

        $('.jcarousel-control-prev')
            .on('jcarouselcontrol:active', function () {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function () {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '-=4'
            });

        $('.jcarousel-control-next')
            .on('jcarouselcontrol:active', function () {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function () {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '+=4'
            });

دریافت فایل پیوست

(1 امتیاز, میانگین: 3٫00 از 5)

Loading...