Slider using json

Question

I have a slider. If I upload photos using html, then everything works correctly. As soon as I try to upload files using Json, the block is stretched and the animation does not work smoothly, styles are no longer applied to it. Pictures are loaded cropped. Screenshots below. Where is the mistake? https://ibb.co/FwbV9Gb https://ibb.co/hLjpb5p

slider.js

    var slideCount =  $(".slider ul li").length;
    var slideWidth =  $(".slider ul li").width();
    var slideHeight =  $(".slider ul li").height();
    var slideUlWidth =  slideCount * slideWidth;

    $(".slider").css({"max-width":slideWidth, "height": slideHeight});
    $(".slider ul").css({"width":slideUlWidth, "margin-left": - slideWidth });
    $(".slider ul li:last-child").prependTo($(".slider ul"));

    function moveLeft() {
      $(".slider ul").stop().animate({
        left: + slideWidth
      },700, function() {
        $(".slider ul li:last-child").prependTo($(".slider ul"));
        $(".slider ul").css("left","");
      });
    }

    function moveRight() {
      $(".slider ul").stop().animate({
        left: - slideWidth
      },700, function() {
        $(".slider ul li:first-child").appendTo($(".slider ul"));
        $(".slider ul").css("left","");
      });
    }


    $(".next").on("click",function(){
      moveRight();
    });

    $(".prev").on("click",function(){
      moveLeft();
    });


  });

html

 <div class="img">
                <div class="slider">
                    <a href="#0" class="next control">Next</a>
                    <a href="#0" class="prev control">Prev</a>              
                   <ul id="sliders">
                      <li> <img src="/img/2.jpg"> </li>
                      <li><img src="/img/4.jpg"></li> 
                       <li> <img src="/img/5.jpg"> </li>
                      <li> <img src="/img/6.jpg"> </li>
                    </ul>                                 
                  </div>
            </div>

add images using JSON (.js)

 $(function() {
    $.getJSON('catalog.json', function(data) {
      $.each(data.catalog, function(i, category) {
        const detail= category.details;  
        const image =detail.images;      
        const $slider=$(
          "<li><img src="+image.one+"></li><li><img src="+image.two+"></li><li><img src="+image.three+"></li><li><img src="+image.four+"></li>"
        )
        console.log(image.one)
        $slider.appendTo("#sliders");       
      });
    });

Answer 1

The problem most likely lies in timing. On page load, all of the variables are calculated for widths etc.. However, your json takes a few seconds to load, therefore the sizes have already been calculated. What I did is create a function for slider creation and add that in the getJson success callback.

        var slideCount;
        var slideWidth;
        var slideHeight;
        var slideUlWidth;

        $.create_slider = function(){
            slideCount =  $(".slider ul li").length;
            slideWidth =  $(".slider ul li").width();
            slideHeight =  $(".slider ul li").height();
            slideUlWidth =  slideCount * slideWidth;
            $(".slider").css({"max-width":slideWidth, "height": slideHeight});
            $(".slider ul").css({"width":slideUlWidth, "margin-left": - slideWidth });
            $(".slider ul li:last-child").prependTo($(".slider ul"));
        }

        function moveLeft() {
          $(".slider ul").stop().animate({
            left: + slideWidth
          },700, function() {
            $(".slider ul li:last-child").prependTo($(".slider ul"));
            $(".slider ul").css("left","");
          });
        }

        function moveRight() {
          $(".slider ul").stop().animate({
            left: - slideWidth
          },700, function() {
            $(".slider ul li:first-child").appendTo($(".slider ul"));
            $(".slider ul").css("left","");
          });
        }


        $(".next").on("click",function(){
          moveRight();
        });

        $(".prev").on("click",function(){
          moveLeft();
        });


      });

$(function() {
    $.getJSON('catalog.json', function(data) {
      $.each(data.catalog, function(i, category) {
        const detail= category.details;  
        const image =detail.images;      
        const $slider=$(
          "<li><img src="+image.one+"></li><li><img src="+image.two+"></li><li><img src="+image.three+"></li><li><img src="+image.four+"></li>"
        )

        $slider.appendTo("#sliders");       
      });

      $.create_slider();
    });