Why does slick go when there are less than 3 slides?

Question

HTML

<div class="slider4">
             
            
          
             
             
                <div class="slide">
                    <div class="block-winner">
                       
                    </div>
                    <div class="name-winner">
                        <div class="participants">
                               Спонсор
                            </div>
                            <div class="name">
                                Годовой запас корма <br> "Whiskas"
                            </div>
                    </div>
                </div>
            </div>

function slider4() {
    var slider4 = $('.slider4');

    if (slider4.length) {
        slider4.slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3,
            speed: 1000,
            arrows: true,
            responsive: [
                {
                    breakpoint: 780,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2,
                        infinite: true,
                    }
                },
                {
                    breakpoint: 624,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });
    }
}

For some reason, the width is being cut.

Answer 1

initialize slider on click on tab

Answer 2

Instead of

var $data;
    $data = $('#mlog').serialize();

you can immediately . Moreover, you can move it a few more lines below, to where

.removeClass("hidden_toast").addClass("visible_toast");

most likely it can be rewritten to add/remove one class, but not touch the second one.
Move everything from .toast_visible to toast-container and remove .hidden if necessary.
Where you can use setTimeout twice, you can use .queue().
It will turn out something like this:

$('#Login').click(function(e) {
    e.preventDefault();
    $.ajax({
      url: "/ajax/manager.php?p=1",
      type: 'post',
      data: $('#mlog').serialize(),
      success: function(result) {
        $('#hum').html(result);
        $("#toast-container")
            .removeClass("hidden")
            .delay(3000)
            .fadeOut(500, function(){ // on complete
                $("#hum").html('');
            });
        }
    });
})