search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.34k stars 5.88k forks source link

Slick carousel with JS-generated HTML only works after window resizing #4115

Open ammarchalifah opened 3 years ago

ammarchalifah commented 3 years ago

I'm using JS Fetch API to fetch data from MySQL, render it to HTML, and put inside the slick div class. However, the slick carousel is not displayed by default, only being displayed after window resize. To check the reason, I created two slick div tag, one with JS-generated HTML and one with hard-written HTML, and the second one works just fine. After inspecting the HTML source on Chrome, I found that the first one isn't rendered correctly.

I've tried slick refresh and slick resize, but it doesn't help. Any idea?

HTML code:

<section>
    <div class="container">
      <div class="row justify-content-center">
        <div class="section-heading text-center">
          <h2>GitHub Repositories</h2>
          <p class="text-muted">Check out my previous projects!</p>
          <hr style="margin-bottom:50px;">
        </div>
      </div>
      <div class="row">
          <div class="container-fluid">
            <div class="github_slider">
              <!--Script in JS-->
            </div>
          </div>
      </div>
      <div class="row">
        <div class="container-fluid">
          <div class="github_slider_2">
            <div class="github-block">
              <div class="row"><b>REPO</b></div>
              <div class="row">TEXT</div>
            </div>
            <div class="github-block">ITEM</div>
            <div class="github-block">ITEM</div>
          </div>
        </div>
      </div>
    </div>
  </section>

<!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Plugin JavaScript -->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for this template -->
  <script src="js/new-age.min.js"></script>
  <script type="text/javascript" src="slick-1.8.1/slick/slick.min.js"></script>
  <script src="main.js"></script>

<!-- Script for GitHub carousel-->
  <script type="text/javascript">
    $(document).ready(function(){
        $('.github_slider').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      arrows: true,
      dots: true,
      responsive: [{
              breakpoint: 768,
              settings: {
                  slidesToShow: 2
              }
          }, {
              breakpoint: 520,
              settings: {
                  slidesToShow: 1
              }
          }]
        });

        $(".github_slider").slick('resize');

      });

      $(document).ready(function(){
        $('.github_slider_2').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      arrows: true,
      dots: true,
      responsive: [{
              breakpoint: 768,
              settings: {
                  slidesToShow: 2
              }
          }, {
              breakpoint: 520,
              settings: {
                  slidesToShow: 1
              }
          }]
        });
      });

      console.log('Github carousel executed');

  </script>

JS script

//Function to parse string to HTML
console.log('HTML parser function definition');
function parseHTML(str) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    console.log(doc);
    return doc.body;
}

// Fetch data from MySQL for GitHub Slider
fetch('server.php').then((res) => res.json())
.then(response => { 
    console.log(response);
    let output = '';
    for(let i in response){
        output += `
        <div class=\"github-block\">
            <div class=\"row\"><b>TEXT</b></div>
            <div class=\"row\">TEXT</div>
        </div>`;
    }

    document.querySelector('.github_slider').innerHTML = parseHTML(output).innerHTML;
}).catch(error => console.log(error));
console.log('MySQL data parsed');

Here's the gif visualizing my issue: https://imgur.com/a/zfs9SEt

I'm using Slick ver 1.8.1

skater2014 commented 2 years ago

good luck

code-reaper08 commented 1 year ago

I'm using JS Fetch API to fetch data from MySQL, render it to HTML, and put inside the slick div class. However, the slick carousel is not displayed by default, only being displayed after window resize. To check the reason, I created two slick div tag, one with JS-generated HTML and one with hard-written HTML, and the second one works just fine. After inspecting the HTML source on Chrome, I found that the first one isn't rendered correctly.

I've tried slick refresh and slick resize, but it doesn't help. Any idea?

HTML code:

<section>
    <div class="container">
      <div class="row justify-content-center">
        <div class="section-heading text-center">
          <h2>GitHub Repositories</h2>
          <p class="text-muted">Check out my previous projects!</p>
          <hr style="margin-bottom:50px;">
        </div>
      </div>
      <div class="row">
          <div class="container-fluid">
            <div class="github_slider">
              <!--Script in JS-->
            </div>
          </div>
      </div>
      <div class="row">
        <div class="container-fluid">
          <div class="github_slider_2">
            <div class="github-block">
              <div class="row"><b>REPO</b></div>
              <div class="row">TEXT</div>
            </div>
            <div class="github-block">ITEM</div>
            <div class="github-block">ITEM</div>
          </div>
        </div>
      </div>
    </div>
  </section>

<!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Plugin JavaScript -->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for this template -->
  <script src="js/new-age.min.js"></script>
  <script type="text/javascript" src="slick-1.8.1/slick/slick.min.js"></script>
  <script src="main.js"></script>

<!-- Script for GitHub carousel-->
  <script type="text/javascript">
    $(document).ready(function(){
        $('.github_slider').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      arrows: true,
      dots: true,
      responsive: [{
              breakpoint: 768,
              settings: {
                  slidesToShow: 2
              }
          }, {
              breakpoint: 520,
              settings: {
                  slidesToShow: 1
              }
          }]
        });

        $(".github_slider").slick('resize');

      });

      $(document).ready(function(){
        $('.github_slider_2').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      arrows: true,
      dots: true,
      responsive: [{
              breakpoint: 768,
              settings: {
                  slidesToShow: 2
              }
          }, {
              breakpoint: 520,
              settings: {
                  slidesToShow: 1
              }
          }]
        });
      });

      console.log('Github carousel executed');

  </script>

JS script

//Function to parse string to HTML
console.log('HTML parser function definition');
function parseHTML(str) {
  var parser = new DOMParser();
  var doc = parser.parseFromString(str, 'text/html');
  console.log(doc);
  return doc.body;
}

// Fetch data from MySQL for GitHub Slider
fetch('server.php').then((res) => res.json())
.then(response => { 
  console.log(response);
  let output = '';
  for(let i in response){
      output += `
      <div class=\"github-block\">
          <div class=\"row\"><b>TEXT</b></div>
          <div class=\"row\">TEXT</div>
      </div>`;
  }

  document.querySelector('.github_slider').innerHTML = parseHTML(output).innerHTML;
}).catch(error => console.log(error));
console.log('MySQL data parsed');

Here's the gif visualizing my issue: https://imgur.com/a/zfs9SEt

I'm using Slick ver 1.8.1

Hello @ammarchalifah! facing the same, any solution to this weird stacking issue? Tried some ways, but nothing works :-(

VVICT commented 1 year ago

I recognize the issues described here. My solution was to add an entry to the reponsive settings with a breakpoint larger than the initial screen size.