Menu icon Foundation
Applying Slick Carousel to Ajax Foundation columns

I have an application through which users can search for a city and see weather forecast for the next 7 days.

I'm using Foundation 6 to display 7 responsive weather cards.

I'm using PHP and MySQL to pull in data and echo all the columns one by one through a for loop. Following is the PHP code with the echo statement:

 

for($i=1; $i<8; $i++) {
            echo '<div class="column medium-4 large-3 small-6 float-left"> 
                    <div class="weather-card">
                      <div class="weather-date">
                        <p class="day text-center">DAY '.$i.'</p>
                        <p class="date text-center">'.($issued_date).'</p>
                      </div>
                      <div class="forecast-comment">
                        <p>Sunny</p>
                      </div>
                      <div class="weather-info">
                        <div class="tx"><p>Maximum temp</p></div>
                        <div class="tn"><p>Minimum temp</p></div>
                      </div>
                    </div>
                 </div>'; }

This is the HTML inside which the columns are inserted:

 

<div class="container">
    <div class="row" id="weather-row">

    </div>
</div>

The Ajax call used to call the script:

 

$.ajax({
            type: "POST",
            url: "php/weather.php",
            data:'keyword='+val,
            success: function(data){
                $("#weather-row").html(data);
            }
        });

Currently, first four cards are displayed in a row, and the remaining three are below them. I want to display only four cards and to have a carousel so that users can scroll through the rest of them.

I used Slick as followed:

 

$('#weather-row').slick({
          infinite: true,
          slidesToShow: 4,
          slidesToScroll: 3
        });

But it doesn't work. Is there a way to apply Slick to Ajax Foundation columns? Thanks for the help

slickAJAX

I have an application through which users can search for a city and see weather forecast for the next 7 days.

I'm using Foundation 6 to display 7 responsive weather cards.

I'm using PHP and MySQL to pull in data and echo all the columns one by one through a for loop. Following is the PHP code with the echo statement:

 

for($i=1; $i<8; $i++) {
            echo '<div class="column medium-4 large-3 small-6 float-left"> 
                    <div class="weather-card">
                      <div class="weather-date">
                        <p class="day text-center">DAY '.$i.'</p>
                        <p class="date text-center">'.($issued_date).'</p>
                      </div>
                      <div class="forecast-comment">
                        <p>Sunny</p>
                      </div>
                      <div class="weather-info">
                        <div class="tx"><p>Maximum temp</p></div>
                        <div class="tn"><p>Minimum temp</p></div>
                      </div>
                    </div>
                 </div>'; }

This is the HTML inside which the columns are inserted:

 

<div class="container">
    <div class="row" id="weather-row">

    </div>
</div>

The Ajax call used to call the script:

 

$.ajax({
            type: "POST",
            url: "php/weather.php",
            data:'keyword='+val,
            success: function(data){
                $("#weather-row").html(data);
            }
        });

Currently, first four cards are displayed in a row, and the remaining three are below them. I want to display only four cards and to have a carousel so that users can scroll through the rest of them.

I used Slick as followed:

 

$('#weather-row').slick({
          infinite: true,
          slidesToShow: 4,
          slidesToScroll: 3
        });

But it doesn't work. Is there a way to apply Slick to Ajax Foundation columns? Thanks for the help