CODEWITHSUNDEEP
javascriptjqueryslick.js
SDH
SDH

Reputation: 391

Slick Carousel works when Images Inserted but not With API Call

I have a working API call that returns images correctly and code for slick carousel that works if the images are hard coded into my HTML. However, when I combine the two, my images dynamically populate the divs correctly but the carousel doesn't render.

I've been working on this for 12 hours and so confused. Have to this get done this weekend for a critical project. Any help would be much appreciated.

Below is my code. Notice that I have the images hard-coded in and commented out for reference.

Slick Files

You can get slick.css, slick-theme.css, and slick.js from http://kenwheeler.github.io/slick/ as the slick.js library is too big to insert into this post.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }
  </style>
</head>
<body>

   <section class="slider-for slider">
  <!-- Images Commented Out
 <div>
      <img src="http://target.scene7.com/is/image/Target/14263758">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt02">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt03">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt04">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt05">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt06">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt07">
    </div>-->
  </section>

  <section class="slider-nav slider">
    <!--Images Commented Out
<div>
      <img src="http://target.scene7.com/is/image/Target/14263758">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt02">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt03">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt04">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt05">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt06">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt07">
    </div>-->
  </section>



  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="model-controller.js" type="text/javascript"></script>
  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {

      $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.slider-nav'
      });
      $('.slider-nav').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: true,
        centerMode: true,
        focusOnSelect: true
      });

    });
  </script>

</body>
</html>

model-controller.js

$.getJSON("item-data.json", function(results) {
        $.each(results.CatalogEntryView, function(index, item) {
   //////////////used to verify tree structure while building indexes////////////////
            console.dir(item.Images[0].PrimaryImage[0].image);
        });

/////////////Builds Slideshow Array and Appends to div tags///////////////////////////
     var slideShowArray = results.CatalogEntryView.map(item => item.Images.map(imgs =>[imgs.PrimaryImage[0].image, ...imgs.AlternateImages.map(alt => alt.image)]))[0][0];
        $.each(slideShowArray, function(k, v){
            var slidesBig = "<div><img src='" + v + "'></div>";
            var slidesSmall = "<div><img src='" + v + "'></div>";
            $(".slider-for").append(slidesBig);
            $(".slider-nav").append(slidesSmall);
        });

});

item-data.json

I shrunk this down significantly to only include relevant data. Should be correct syntax after shrinking it down but if not, feel free to edit:

{
 "CatalogEntryView": [
  {
   "Images": [
    {
     "AlternateImages": [
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt01"
      },
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt02"
      },
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt03"
      },
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt04"
      },
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt05"
      },
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt06"
      },
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt07"
      }
     ],
     "PrimaryImage": [
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758"
      }
     ],

     "imageCount": "8",
     "source": "internal"
    }
   ]
  }
 ]
}

What It's Doing Right Now

enter image description here

Upvotes: 2

Views: 2219

Answers (2)

C. M&#252;rtz
C. M&#252;rtz

Reputation: 504

You initialized slick before getting the data! So slick creates its containers and you add the images outside of slicks container! I never worked with slick but it should be the problem! I will fix it and edit this answer!

Fixed model-controller.js

function getData() {
    $.getJSON("item-data.json", function(results) {
        var slideShowArray = results.CatalogEntryView.map(item => item.Images.map(imgs =>[imgs.PrimaryImage[0].image, ...imgs.AlternateImages.map(alt => alt.image)]))[0][0];
        $.each(slideShowArray, function(k, v){
            var slidesBig = "<div><img src='" + v + "'></div>";
            var slidesSmall = "<div><img src='" + v + "'></div>";
            $(".slider-for").slick("slickAdd", slidesBig);
            $(".slider-nav").slick("slickAdd", slidesSmall);
        });

    });
}

Call the getData() function right after initializing slick!

Upvotes: 0

masterpreenz
masterpreenz

Reputation: 2290

Use slickAdd not append:

$(".slider-for").slick("slickAdd", slidesBig);
$(".slider-nav").slick("slickAdd", slidesSmall);

and not:

$(".slider-for").append(slidesBig);
$(".slider-nav").append(slidesSmall);

why slickAdd it's because there are still some JS magic slick need to call before adding an item .append do not call those.

refer to slicks documentation of slickAdd

hope that helps

Upvotes: 2

Related Questions