طراحی سایت شرکتی با کنترل پنل اختصاصی تحویل فوری - 350 هزار تومان اطلاعات بیشتر

ساخت اسلایدر حرفه ای و زیبا lightslider با قابلیت Touch

اسلایدر lightslider یکی از اسلایدرهای قدرتمند جهت نمایش تصاویر

اسلایدر,slider,اسلایدر با قابلیت touch

ساخت اسلایدر حرفه ای و زیبا lightslider با قابلیت Touch

اسلایدر سایت به مجموعه ای از تصاویر گفته می شود که از مابقی تصاویر مهم تر هستند و مدیر سایت قصد دارد که به طور ویژه در معرض دید قرار گیرد. این تصاویر میتوانند جهت معرفی خدمات و محصولات، فراخوان ها، رویدادهای مهم و تبلیغات مورد استفاده قرار گیرند، که عموما در صفحه اصلی ظاهر می شوند ولی الزامی برای این امر وجود ندارد و درصفحات جانبی مانند صفحات محصولات نیز دیده شده اند. چگونگی استفاده و جایگاه قرار گیری اسلایدر بستگی به ساختار سایت و تصمیم مدیر و طراح سایت دارد ولی در 90 درصد مواقع در بالای صفحه اصلی پس از لوگو و نام شرکت، گاهی قبل از منو و گاهی بعد از منو قرار دارد. اسلایدرهای متنوع و زیاد با امکانات مختلف مانند کپشن، قابلیت زوم، نمایش به همراه افکت خاص و غیره وجود دارد که ما در این بخش قصد آموزش اسلایدر با قابلیت Touch را داریم. با ما همراه باشید.

ایتدا کتابخانه Jquery و فایلهای lightslider.js و lightslider.css را از طریق لینک دمو دانلود و ضمیمه پروژه نمایید.

کد HTML اسلایدر LightSlider

   <div class="demo">
        <div class="item">
            <div class="clearfix" style="max-width:474px;">
                <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                    <li data-thumb="img/thumb/cS-1.jpg">
                        <img src="img/cS-1.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-2.jpg">
                        <img src="img/cS-2.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-3.jpg">
                        <img src="img/cS-3.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-4.jpg">
                        <img src="img/cS-4.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-5.jpg">
                        <img src="img/cS-5.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-6.jpg">
                        <img src="img/cS-6.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-7.jpg">
                        <img src="img/cS-7.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-8.jpg">
                        <img src="img/cS-8.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-9.jpg">
                        <img src="img/cS-9.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-10.jpg">
                        <img src="img/cS-10.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-11.jpg">
                        <img src="img/cS-11.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-12.jpg">
                        <img src="img/cS-12.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-13.jpg">
                        <img src="img/cS-13.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-14.jpg">
                        <img src="img/cS-14.jpg" />
                    </li>
                    <li data-thumb="img/thumb/cS-15.jpg">
                        <img src="img/cS-15.jpg" />
                    </li>
                </ul>
            </div>
        </div>
    </div>

 

کد JavaScript اسلایدر LightSlider

 <script type="text/javascript">
        $(document).ready(function() {
            $("#content-slider").lightSlider({
                loop: true,
                keyPress: true
            });
            $('#image-gallery').lightSlider({
                gallery: true,
                item: 1,
                thumbItem: 9,
                slideMargin: 0,
                speed: 500,
                auto: true,
                loop: true,
                onSliderLoad: function() {
                    $('#image-gallery').removeClass('cS-hidden');
                }
            });
        });

    </script>

منبع: طراحی سایت ارزان

اگر سوالی در رابطه با این مطلب دارید می توانید از طریق فرم زیر ارسال کنید
  • ایمیل شما به هیچ عنوان در سایت نمایش داده نمی شود
  • کامنت شما بعد از تایید مدیر سایت نمایش داده می شود