javascript - Content slider with lightSlider using Ajax -
i trying create dynamic content slider using lightslider plugin.i have built script loads content database table (returning json
html
).i want 4 div
's of content displayed instead of 6, below (6 transactions stored in database table in total)
what need 4 div
's per slide displayed.does know how can that?please help.i have posted couldn't find out solution.
ajax request:
$.ajax({ url: 'ajax_json.php', type: 'post', data: {get_param: 'value'}, contenttype: "application/json; charset=utf-8", datatype: 'json', success: function(data) { $.each(data, function(index, item) { $('#content-slider').append('<li class="caption"><div class="col-md-3"><div class="item_img"><img src="' +item.image+ '" /></div><div class="item_title">"' +item.title+ '"</div><div class="item_descr">'+ item.description +'</div></div></li>'); }); } });
and html
output:
<div class="container"> <div class="row"> <div class="item"> <ul id="content-slider" class="content-slider"> </ul> </div> </div> </div>
and slider creation:
$(document).ready(function() { $("#content-slider").lightslider({ item: 4, pager: false, autowidth: false, slidemargin: 0 });
try changing default item value in lightslider.js file , remove item value in slider creation method.
i have similar slider i'm working on , display 3 items per slide want it. dont have item value on slider creation method. when change item value in lightslider.js file change number of items in slide.
here start of lightslider.js file.
(function ($, undefined) { 'use strict'; var defaults = { item: 3, autowidth: false, slidemove: 1, slidemargin: 10, addclass: '', ..............
Comments
Post a Comment