我怎樣才能轉換 Jquery 光滑的 slider 代碼來反應 js

Question

我正在嘗試將 html css 和 jquery 文件轉換為 React 項目。 問題是 jquery 在我的 React 項目上不起作用。 基本上，我想在我的 React 項目上使用 slider，但問題是 jquery 在我的 React 項目上不起作用。 如果可能，我怎樣才能修復它 我想通過 js 修復它或做出反應 88273138421388 88273138421388？

我已經將 jquery 和 slick 文件定義到 react public HTML 文件中

    <link rel="stylesheet" href="assets/css/slick.min.css" />

    <script src="assets/js/jquery-2.2.4.min.js"></script>
    <script src="assets/js/slick.min.js"></script>
    <script src="assets/js/scripts.js"></script>

Script.js 這里很漂亮 slider jquery

(function ($) {
  "use strict";
  $(window).on("load", function () {
    /* ----------------- SLIDER HOME ONE ---------------- */
    if ($(".main-slider")[0]) {
      $(".main-slider").slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        arrows: true,
        speed: 1000,
        fade: true,
        cssEase: "ease-in-out",
        cssEase: "cubic-bezier(0.7, 0, 0.3, 1)",
        touchThreshold: 100,
        nextArrow:
          '<span class="slick-arrow-next"><i class="fa fa-angle-down" aria-hidden="true"></i></span>',
        prevArrow:
          '<span class="slick-arrow-prev"><i class="fa fa-angle-up" aria-hidden="true"></i></span>',
        appendArrows: $(".main-slide-navigation"),
        appendDots: $(".main-slide-navigation"),
        // autoplay: true,
        // autoplaySpeed: 4500,
        responsive: [
          {
            breakpoint: 768,
            settings: {
              dots: false,
              arrows: false,
            },
          },
        ],
      });
    }
  });
})(jQuery);

slider JSX代碼：

export default function MainSlider() {
  return (
    <div>
      <section className="s-main-slider">
        <div className="main-slide-navigation"></div>
        <div className="main-slider">
          <div className="main-slide">
            <div
              className="main-slide-bg"
              style={{
                backgroundImage:
                  "https://html.rovadex.com/html-creto/assets/img/bg-slider-2.svg",
              }}
            ></div>
            <div className="container">
              <div className="main-slide-info">
                <h2 className="title">best bikes for you</h2>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore.
                </p>
                <a href="single-shop.html" className="btn">
                  <span>buy now</span>
                </a>
              </div>
              <div className="slide-img-cover">
                <a href="single-shop.html" className="lable-bike">
                  <div className="lable-bike-img">
                    <img src="assets/img/bike-info-slide.jpg" alt="img" />
                  </div>
                  <div className="lable-bike-item">
                    <div className="model">model SX-200</div>
                    <div className="price">$1399</div>
                  </div>
                </a>
                <img
                  src="https://html.rovadex.com/html-creto/assets/img/img-slider.png"
                  alt="img"
                  className="slide-img"
                />
              </div>
            </div>
          </div>
  
        </div>
      </section>
    </div>
  );
}

Answer 1

npm 我反應靈敏

例子：

import React from "react";
import Slider from "react-slick";

export default function SimpleSlider() {
  // add your jquery
  var settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <Slider {...settings}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
      <div>
        <h3>4</h3>
      </div>
      <div>
        <h3>5</h3>
      </div>
      <div>
        <h3>6</h3>
      </div>
    </Slider>
  );
}