Как совместить? document.ready и .on

29 марта 2022, 00:40

Сразу прошу прошения, если вопрос глупый! У меня есть 2 модуля:

Модальное окно
Слайдер.

Оба работают через js, но для старта 1 - нужно чтоб $(document).ready(function... а для старта другого 2- $(document).on(function как можно объеденить .ready и .on??? Или как правильно сделать, чтоб работали оба модуля?

<head>
    <meta charset="UTF-8" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js</script>
    <script src="fancybox/jquery.fancybox.js"></script>
    <script>$(document).ready(function () {
        $(".fancybox").fancybox();

        $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  centerMode: true,
  focusOnSelect: true
});
});</script>
    <script src="js/slick.js"></script>
    </head>
<body>
<?php include("./header.php"); ?>
        <div class="main-view-content">
       <div id="view-content-body">

<div class="main-container-viewcontent">
<div class="images-block-viewcontent">
<section class="slider-for slider">
    <div>
      <img src="http://placehold.it/200x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/200x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/200x300?text=3">
    </div>
    <div>
      <img src="http://placehold.it/200x300?text=4">
    </div>
    <div>
      <img src="http://placehold.it/200x300?text=5">
    </div>
    <div>
      <img src="http://placehold.it/200x300?text=6">
    </div>
  </section>
  <section class="slider-nav slider">
    <div>
      <img src="http://placehold.it/200x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/200x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/200x300?text=3">
    </div>
    <div>
      <img src="http://placehold.it/200x300?text=4">
    </div>
    <div>
      <img src="http://placehold.it/200x300?text=5">
    </div>
    <div>
      <img src="http://placehold.it/200x300?text=6">
    </div>
  </section>
            </div>
    <div class="action-tovar">  
    <div id="cena"><p>Цена: <strong>'.group_numerals($price).'</strong> грн.</p>      </div>
    <div id="scale"><a class="button-scale" href="#"><i class="fas fa-balance-scale"></i></a></div>
    <div class="buttons-buys">
    <div id="knopka-buy"><a class="button-by" data-tid="'.$row["products_id"].'">В корзину</a></div>
    <div id="knopka-1-buy"><a class="button-1-buy fancybox click-one-id-order" href="#buyoneclick" data-tid="'.$row["products_id"].'" >Купить 1 клик</a></div>
    </div>
    </div>
</div>
</div>
</div>

<?php include("./include/block-footer.php"); ?>
    </body>

Answer 1

Если вдруг кому интересно, вопрос решился так:

$(document).on( 'ready', function () {
        $(".fancybox").fancybox();
        $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  centerMode: true,
  focusOnSelect: true
});
});