آموزش اسکریپت اسلایدر با تصاویر بند انگشتی (thumbnail)

در این آموزش jquery، یک اسلایدر ساده را به شما آموزش خواهیم داد که در آن از تصاویر بندانگشتی یا همان thumbnail ها نیز استفاده شده است.

Array

مشاهده دمو

اسکریپت های مورد نیاز این اسلایدر را بصورت زیر در header سایت فراخوانی میکنیم :

[free_vip]

[html]
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $(‘#thumbs’).carouFredSel({
                    synchronise: [‘#images’, false, true],
                    auto: false,
                    width: 450,
                    items: {
                        visible: 3,
                        start: -1
                    },
                    scroll: {
                        onBefore: function( data ) {
                            data.items.old.eq(1).removeClass(‘selected’);
                            data.items.visible.eq(1).addClass(‘selected’);
                        }
                    },
                    prev: ‘#prev’,
                    next: ‘#next’
                });

                $(‘#images’).carouFredSel({
                    auto: false,
                    items: 1,
                    scroll: {
                        fx: ‘fade’
                    }
                });

                $(‘#thumbs img’).click(function() {
                    $(‘#thumbs’).trigger( ‘slideTo’, [this, -1] );
                });
                $(‘#thumbs img:eq(1)’).addClass(‘selected’);
            });
        </script>
[/html]

نکته : مقدار visible تعداد نمایش تصاویر thumbnail را مشخص میکند و شما با مقادیر prev و next میتوانید کلاس یا آیدی مورد نظر خود را به دکمه های قبلی و بعدی اسلایدر بدهید.

کدهای css نیز به صورت زیر میباشند :

[css]
html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    min-height: 600px;
    background-color: #e6e6e6;
}
#slider-wrapper {
    border: 1px solid #ddd;
    background-color: #fff;
    width: 450px;
    height: 575px;
    margin: -300px 0 0 -225px;
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
#slider-wrapper img {
    display: block;
    float: left;
}
#images, #thumbs {
    height: 350px;
    overflow: hidden;
}
#images {
    width: 350px;
    margin: 50px 0 25px 50px;
}
#thumbs {
    width: 450px;
    height: 100px;
}
#thumbs img {
    border: 1px solid #ccc;
    padding: 14px;
    margin: 0 12px 0 12px;
    cursor: pointer;
    width:70px;
    height:70px;
}
#images img {
    width:350px;
    height:350px;
}
#thumbs img.selected, #thumbs img:hover {
    border-color: #333;
}
#slider-wrapper #prev, #slider-wrapper #next {
    width: 15px;
    height: 21px;
    display: block;
    text-indent: -999em;
    background: transparent url(images/carousel_control.png) no-repeat 0 0;
    position: absolute;
    bottom: 85px;
}
#slider-wrapper #prev {
    background-position: 0 0;
    left: 15px;
}
#slider-wrapper #prev:hover {
    left: 14px;
}
#slider-wrapper #next {
    background-position: -18px 0;
    right: 15px;
}
#slider-wrapper #next:hover {
    right: 14px;
}
[/css]

کدهای html این اسلایدر را بصورت زیر باید بنویسید :

[html]

<div id="slider-wrapper">
<div id="images">
<img src="images/large/ek-aanhanger.gif" alt="ek-aanhanger" />
<img src="images/large/ek-alien.gif" alt="ek-alien" />
<img src="images/large/ek-artsen.gif" alt="ek-artsen" />
<img src="images/large/ek-brandweer.gif" alt="ek-brandweer" />
</div><!–#images–>
<div id="thumbs">
<img src="images/small/ek-aanhanger.gif" alt="ek-aanhanger" />
<img src="images/small/ek-alien.gif" alt="ek-alien" />
<img src="images/small/ek-artsen.gif" alt="ek-artsen" />
<img src="images/small/ek-brandweer.gif" alt="ek-brandweer" />
</div><!–#thumbs–>
<a id="prev" href="#"></a> <a id="next" href="#"></a> </div>
<!–#slider-wrapper–>

[/html]

تصاویر بندانگشتی را باید در بین تگ thumbs قرار دهید.

شما میتوانید فایل کامل این آموزش را از لینک زیر دانلود کنید :

[onliner_button type=”edu-demo” url=’https://onliner.co/demo-education/jquery/coolcarousel-horizontal-thumb-slider/slider-width-thumbnail-horizontal-onliner.ir.zip’]دانلود دمو[/onliner_button]

[/free_vip]

دیدگاه خود را برای ما ارسال کنید

3 Comments
    • موسوی
    • ۱۳۹۴-۱۰-۱۲
    پاسخ

    واقعا عالیه …

    خدا خیرت بده استاد …

    • ali.n
    • ۱۳۹۴-۱۰-۱۶
    پاسخ

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