Question

我正在尝试使用LightSlider插件创建动态内容滑块。我已经构建了一个脚本，可以从数据库表中加载所有内容（将json返回到HTML）。我想要4个div的内容要显示而不是6 ，如下所示（总共存储在数据库表中的6个事务）

我需要的是每张幻灯片要显示4 div。有人知道我该怎么做吗？请帮助。我已经发布了这个但我找不到解决方案。< / p>

Ajax请求：

$.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>');


                });
            }
        });

和HTML输出：

<div class="container">
    <div class="row">
        <div class="item">
           <ul id="content-slider" class="content-slider">
           </ul>
        </div>
  </div>
</div>

这是为了创建滑块：

$(document).ready(function() {
        $("#content-slider").lightSlider({
                item: 4,
                pager: false,
                autoWidth: false,
                slideMargin: 0
            });

Answer 1

尝试更改lightslider.js文件中的默认项目值，并删除滑块创建方法中的项目值。

我有一个类似的滑块，我正在处理它，每张幻灯片显示3个项目，我想要它。我的滑块创建方法没有项值。当我更改lightslider.js文件中的项目值时，它将更改幻灯片中的项目数。

这是我的lightslider.js文件的开头。

(function ($, undefined) {
'use strict';
var defaults = {
    item: 3,
    autoWidth: false,
    slideMove: 1,
    slideMargin: 10,
    addClass: '',
    ..............

使用Ajax的lightSlider的内容滑块

1 个答案: