'slick slider : How can active that slide on first load in which checkbox is checked

Always first slide is show, But I don't want to show first slide always.

I want When a Slick slide item has a checkbox and the checkbox is checked. ON first load, checked checkbox slider item should be show.

My issue is Wednesday event is checked in slide. But user is unable to see checked [selected] event on first load. Assuming this markup:

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="FoH36mB48sFe5N3MZxmmkxYZ3wuJOHgsFSqt7Xe5">

  <head>
    <meta name="Author" content="W3docs">
    <link rel="stylesheet" type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $('.site-slider').slick({
        });
      });
    </script>

    <style>
      * {
        font-family: Arial, Helvetica, sans-serif;
      }

      .site-slider .slick-arrow {
        position: absolute;
        top: 50%;
        z-index: 5;
        transform: translateY(-50%);
      }

      .site-slidees {
        background: #eee;
        padding: 30px;
        margin: 15px;
        text-align: center;
      }

      .site-slider .slick-prev {
        left: 0px;
      }

      .site-slider .slick-next {
        right: 0px;
      }
    </style>
  </head>

<body>
  <div style="max-width: 600px;">

    <div class="site-slider">
      <div class="site-slidees">
        <div>
          <h3> Events</h3>
        </div>
        <input type="checkbox" name="option" />Sun
      </div>
      <div class="site-slidees">
        <div>
          <h3> Events</h3>
        </div><input type="checkbox" name="option" />Mon
      </div>
      <div class="site-slidees">
        <div>
          <h3> Events</h3>
        </div><input type="checkbox" name="option" />Tue
      </div>
      <div class="site-slidees">
        <div>
          <h3> Events</h3>
        </div><input type="checkbox" name="option" checked="checked" />Wed
      </div>
      <div class="site-slidees">
        <div>
          <h3> Events</h3>
        </div><input type="checkbox" name="option" />Thu
      </div>
      <div class="site-slidees">
        <div>
          <h3> Events</h3>
        </div><input type="checkbox" name="option" />Fri
      </div>
      <div class="site-slidees">
        <div>
          <h3> Events</h3>
        </div><input type="checkbox" name="option" />Sat
      </div>
    </div>
  </div>



</body>

</html>

I want to see that slide on first load in which have checkbox is checked.

javascript jquery

Solution 1:^[1]

You can use the following code:

$(document).ready(function () {
    var initialSlide = $('input[name=option]:checked').closest('.site-slidees').index();
    $('.site-slider').slick({
      initialSlide: initialSlide,
    });
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dori Rina

'slick slider : How can active that slide on first load in which checkbox is checked

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]