Get data from visible li in bxlider

5 Views

i have a slider. I want getting data from visible element li, and after putm them in my form inputs. How i can do this?
There is code 

    <div class="bx-wrapper" style="max-width: 100%; margin: 0px auto;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 297px;">
    <ul id="snap" class="bxslider" style="width: auto; position: relative;">
        <li data-snap_id="654" data-title="Автоматическая оснастка Colop R30 (Черная)" data-image="wp-content/uploads/2014/08/r30.jpg" style="float: none; list-style: none; position: absolute; z-index: 50; display: block; width: 310px;"><img src="wp-content/uploads/2014/08/r30.jpg" title="Автоматическая оснастка Colop R30 (Черная)">
            <div class="bx-caption"><span>Автоматическая оснастка Colop R30 (Черная)</span></div></li>
        <li data-snap_id="658" data-title="Полуавтоматическая оснастка Colop Stamp Mouse R40 (Черная)" data-image="wp-content/uploads/2014/08/d5de5ccd5ade13bb4d8e82b4fa6371b5.jpg" style="float: none; list-style: none; position: absolute; z-index: 0; display: none; width: 310px;"><img src="wp-content/uploads/2014/08/d5de5ccd5ade13bb4d8e82b4fa6371b5.jpg" title="Полуавтоматическая оснастка Colop Stamp Mouse R40 (Черная)">
            <div class="bx-caption"><span>Полуавтоматическая оснастка Colop Stamp Mouse R40 (Черная)</span></div>
        </li>
        <li data-snap_id="660" data-title="Ручная оснастка D 30 мм" data-image="wp-content/uploads/2014/08/a6030d3f270432a8f138f8fe9d236b7c.jpg" style="float: none; list-style: none; position: absolute; z-index: 0; display: none; width: 310px;"><img src="wp-content/uploads/2014/08/a6030d3f270432a8f138f8fe9d236b7c.jpg" title="Ручная оснастка D 30 мм">
            <div class="bx-caption"><span>Ручная оснастка D 30 мм</span></div>
        </li>
    </ul>
</div>
    <div class="bx-controls bx-has-controls-direction">
        <div class="bx-controls-direction">
            <a class="bx-prev" href="">Prev</a>
            <a class="bx-next" href="">Next</a>
        </div>
    </div>
</div>

This is jquery:

jQuery(".bx-prev", "bx-next").on('click', function() {
    jQuery('#snap').find('li:visible');
    var snap_id = jQuery(this).data('snap_id');
    alert(snap_id);

});
Post Views: 5

Related posts

Leave a Reply

2 comments

  1. fixed your code:

            $(".bx-prev, .bx-next").on('click', function () {
            var el = $('#snap').find('li:visible');
            var snap_id = el.attr('data-snap_id');
            alert(snap_id);
        });

  2. jQuery(this) shouldn’t be used in this case. The error was related to the selectors – jQuery(“.bx-prev, .bx-next”) You can try the code below:

    jQuery(".bx-prev, .bx-next").on('click', function() {

var snap_id = jQuery('#snap').find('li:visible').data('snap_id');
alert(snap_id);

});