Carousel Slick - Unexplained magic..

[dodos26]

Hi, I'm playing around with the code "Carousel Slick"
http://kenwheeler.github.io/slick/

I'm trying to do a topic search using ajax. Here is the code snippet that returns the php code.
Notice the code "//   var_dump($scripturl);" (it's a magic spell)..

Code (generate search result) Select Expand

$html = '<table class="sp_fullwidth" id="sp_fullwidth_table_container">';

foreach ($topics as $item)
{
$allOfParents = array();
$allOfParents = array_reverse(getBoardParents($item['id_parent']));

if (isset($item['id_attach'][0]) && !empty($item['id_attach'][0]))
{
if (count($item['id_attach']) > 1) {
$image_link = '<div class="slideshow"><div class="slider">';
foreach ($item['id_attach'] as $image_item) {
$image_link .= '<div class="item"><img src="'. $scripturl .'?action=dlattach;topic='. $item['id_topic'] .'.0;attach='. $image_item .';image" alt="Topic thumbnail"></div>';
}
$image_link .= '</div></div>';
} else {
$image_link = '<img src="'. $scripturl .'?action=dlattach;topic='. $item['id_topic'] .'.0;attach='. $item['id_attach'][0] .';image" alt="topic" style="max-width: 150px;">';
}
} else {
$image_link = sp_embed_image('topic');
}
// var_dump($scripturl);
$html .= '
<tr>
<td class="sp_news_icon sp_center">' . $image_link . '</td>
<td class="sp_news_title">
<a href="' . $scripturl . '?topic=' . $item['id_topic'] . '.msg' . $item['id_msg'] . ';topicseen#new">' . $item['subject'] . '</a>';
if (empty($item['is_read']))
$html .= '<a href="' . $scripturl . '?topic=' . $item['id_topic'] . '.msg' . $item['new_from'] . ';topicseen#new"><img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/new.gif" alt="' . $txt['new'] . '" border="0"></a>';
$html .= '<br />';
$Topic_Rating_Stars = GetPostRating2('stars', $item['id_msg'], !empty($item['total_ratings']) ? $item['total_ratings'] : 0, !empty($item['rating']) ? $item['rating'] : 0);
foreach ($allOfParents as $Parents_Data)
{
$html .= isset($Parents_Data['url']) ? '[<a href="' . $Parents_Data['url'] . '">' . $Parents_Data['name'] . '</a>]' : '[' . $Parents_Data['name'] . ']';
$html .= ' » ';
}
$html .= '[<a href="' . $scripturl . '?board=' . $item['id_board'] . '.0">' . $item['board_name'] . '</a>]
</td>
<td class="sp_news_rate sp_center"> ' . $Topic_Rating_Stars  . '</td>
<td class="sp_news_right sp_right">' . $color_profile[$item['id_member']]['link'] . ' | ' . $txt['sp-articlesViews'] . ': ' . $item['num_views'] . ' <br /> ' . $txt['sp-articlesComments'] . ': ' . $item['num_replies'] . '<br />' . timeformat($item['poster_time']) . '</td>
</tr>';
}

$html .= '</table>';

echo $html;
And here is the original code snippet that generates the list of topics and search fields.

Code Select Expand

echo '<table class="sp_fullwidth" id="sp_fullwidth_table_container">';

foreach ($topics as $item)
{
$allOfParents = array();
$allOfParents = array_reverse(getBoardParents($item['id_parent']));

if (isset($item['id_attach'][0]) && !empty($item['id_attach'][0]))
{
if (count($item['id_attach']) > 1) {
$image_link = '<div class="slideshow"><div class="slider">';
foreach ($item['id_attach'] as $image_item) {
$image_link .= '<div class="item"><img src="'. $scripturl .'?action=dlattach;topic='. $item['id_topic'] .'.0;attach='. $image_item .';image" alt="Topic thumbnail"></div>';
}
$image_link .= '</div></div>';
} else {
$image_link = '<img src="'. $scripturl .'?action=dlattach;topic='. $item['id_topic'] .'.0;attach='. $item['id_attach'][0] .';image" alt="topic" style="max-width: 150px;">';
}
} else {
$image_link = sp_embed_image('topic');
}

echo '
<tr>
<td class="sp_news_icon sp_center">' . $image_link . '</td>
<td class="sp_news_title">
<a href="' . $scripturl . '?topic=' . $item['id_topic'] . '.msg' . $item['id_msg'] . ';topicseen#new">' . $item['subject'] . '</a>
', !empty($item['is_read']) ? '' : '<a href="' . $scripturl . '?topic=' . $item['id_topic'] . '.msg' . $item['new_from'] . ';topicseen#new"><img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/new.gif" alt="' . $txt['new'] . '" border="0"></a>',
'<br />';
$Topic_Rating_Stars = GetPostRating2('stars', $item['id_msg'], !empty($item['total_ratings']) ? $item['total_ratings'] : 0, !empty($item['rating']) ? $item['rating'] : 0);
foreach ($allOfParents as $Parents_Data)
{
echo isset($Parents_Data['url']) ? '[<a href="' . $Parents_Data['url'] . '">' . $Parents_Data['name'] . '</a>]' : '[' . $Parents_Data['name'] . ']';
echo ' » ';
}
echo '[<a href="' . $scripturl . '?board=' . $item['id_board'] . '.0">' . $item['board_name'] . '</a>]
</td>
<td class="sp_news_rate sp_center"> ' . $Topic_Rating_Stars  . '</td>
<td class="sp_news_right sp_right">' . $color_profile[$item['id_member']]['link'] . ' | ' . $txt['sp-articlesViews'] . ': ' . $item['num_views'] . ' <br /> ' . $txt['sp-articlesComments'] . ': ' . $item['num_replies'] . '<br />' . timeformat($item['poster_time']) . '</td>
</tr>';
}

echo '</table>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<style>
.slideshow {
position: relative;
z-index: 1;
height: 100%;
max-width: 150px;
}

.slideshow * {
outline: none;
}

.slideshow .slider {
box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 1);
}

.slideshow .slider-track {
transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}

.slideshow .item {
height: 100%;
position: relative;
z-index: 1;
}

.slideshow .item img {
width: 100%;
transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
transform: scale(1.2);
}

.slideshow .item.slick-active img {
transform: scale(1);
}
</style>
<input type="text" id="search_title" placeholder="Wyszukaj po tytule...">
<input type="text" id="search_username" placeholder="Wyszukaj użytkownika...">
<script>
$(".slider").slick({
  draggable: true,
  arrows: false,
  dots: false, // Disable dots
  fade: true,
  speed: 900,
  infinite: true,
  cssEase: "cubic-bezier(0.7, 0, 0.3, 1)",
  touchThreshold: 100,
  autoplay: true,
  autoplaySpeed: 1200
});

function reloadSlickSlider() {
  // Zniszczenie istniejącej instancji wtyczki
 

  // Ponowne inicjalizowanie wtyczki Slick Slider
$(".slider").slick({
  draggable: true,
  arrows: false,
  dots: false, // Disable dots
  fade: true,
  speed: 900,
  infinite: true,
  cssEase: "cubic-bezier(0.7, 0, 0.3, 1)",
  touchThreshold: 100,
  autoplay: true,
  autoplaySpeed: 1200,
  variableWidth: false
});
}


  // Przechwytywanie zmian w polach tekstowych
  $("#search_username").on("input", function() {
    updateSearchResults();
  });

  $("#search_title").on("input", function() {
    updateSearchResults();
  });

  // Funkcja wywołująca AJAX i aktualizująca tabelę
  function updateSearchResults() {
    var username = $("#search_username").val();
    var title = $("#search_title").val();

    $.ajax({
      url: "search.php",
      method: "POST",
      data: {search_title: title, search_username: username},
      success: function(response) {
        // Sprawdzenie warunku na podstawie odpowiedzi serwera
        if (response.includes("sp_fullwidth_table_container")) {
          // Zastąpienie zawartości tabeli zwróconym kodem HTML
  $(".slider").slick("unslick");
          $("#sp_fullwidth_table_container").html(response);
 
  reloadSlickSlider();
        }
      },
      error: function(xhr, status, error) {
        // Obsługa błędu żądania AJAX
        console.error(error);
      }
    });
  }


</script>';
Now listen carefully. The code displays the list of topics correctly and displays the thumbnails correctly. When searching for a topic, thumbnails (single) are displayed correctly. But when "slick" has to work, the effect breaks, the thumbnails are not visible even though "slick" initializes.
I searched and found the initialized code generates " <div class="slick-track" style="opacity: 1; width: 300px;"> " The width value is somehow automatically determined and contains different values. After replacing the code with ajax and reinitializing, I get "<div class="slick-track" style="opacity: 1; width: 0px;">" width is set to 0 for some reason. Remember the magic spell? Well, when I set var_dump somewhere in the "generate search result" code, I get a properly working slick. For the test, I tried to echo the same element that inserts var_dump, with poor success.

[dodos26]

I fix it change width: 100%; to width: 150px; But I still have no idea why it works like that.

Code Select Expand

.slideshow .item img {
width: 150px;
transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
transform: scale(1.2);
}