CODEWITHSUNDEEP
javascriptjquerycarousel
gdim
gdim

Reputation: 213

How to set specific item number per silde on caroysel using jQuery

I use carousel to display items (items loaded from json) but I need 4 items to be displayed per slide and no more.This is the code to display items:

<div class="carousel slide" id="myCarousel1" data-interval="false">
    <div class="carousel-inner">
       <div class="item active">
       <ul class="thumbnails" id="output">
   </ul>
</div>

and this is the jQuery script to load items:

$(function() {
        $.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) {
        $('#output').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>');

        });
      }
   });
});

this code displaying MORE than 4 items per slide but I want to show just 4.Any ideas how I can do this?

Upvotes: 0

Views: 27

Answers (1)

hsh
hsh

Reputation: 1855

change the success method like this:

success: function(data) {
    $.each(data, function(index, item) {
       if(index < 4){
          $('#output').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>');
       }
    });

Upvotes: 1

Related Questions