Блог

У меня есть слайдер Swiper на веб-сайте react, когда я беру данные из локального файла json, все работает нормально. Мне пришлось брать данные из общедоступной папки, поэтому я использовал axios, но я больше не могу прокручивать слайдер. Я думаю, что это конфликт между Axios и плагином Swiper, но я понятия не имею, как его решить.

Спасибо! 🙂

Вот код со страницы:

 import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Loader from "../container/Loader";
import { Helmet } from "react-helmet";
import { Col } from "react-bootstrap";
import Cookies from "../components/cookies";
import LayoutDefault from "../container/LayoutDefault";
import HeaderProject from "../components/header/HeaderProject";
import ImageSlider from "../container/ImageSlider";


const ProjectPage = ({ match }) => {
    const { params: { projectId } } = match;

    const [projects, setProjects] = useState(null)

    useEffect(() => {
        var isCancelled = false;
        axios.get("./projects.json").then(
            (response) => !isCancelled ? setProjects(response.data) : console.log("is canceled")
        ).catch(
            (err) => console.log(err)
        )
    }, [])

    const goToPreviousPage = () => {
        if (window.history.length === 1) {
            window.location = "/"
        } else {
            window.history.back();
        }
    }

    return (
        <Loader>
            <Helmet>
                <title>TheBrandBar | {projects ? projects[projectId - 1].title : ""}</title>
            </Helmet>
            <Cookies />
            <LayoutDefault className="template-color-2 bg_color--4 project-page">
                <button onClick={goToPreviousPage} className="page-close" />
                <Col>
                    <HeaderProject
                        title={projects ? projects[projectId - 1].title : ""}
                        description={projects ? projects[projectId - 1].description : ""}
                    />
                </Col>
                <ImageSlider
                    index={projectId}
                    projects = {projects}
                />

            </LayoutDefault>
        </Loader>
    );
};

export default ProjectPage;
 

и компонент слайдера изображений

 import React, { useState } from 'react';
import { Col } from "react-bootstrap";
import SliderSwiper from "../components/swiper";


const ImageSlider = ({ index, projects }) => {

    const [swiper, updateSwiper] = useState(null);
    const settings = {
        slidesPerView: "auto",
        spaceBetween: 0,
        autoplay: false,
        mousewheel: true,
        loop: false,
        freeMode: true,
    };
    const goNext = () => {
        if (swiper !== null) {
            swiper.slideNext();
        }
    };
    // const goPrev = () => {
    //     if (swiper !== null) {
    //         swiper.slidePrev();
    //     }
    // };


    return (
        <div className="pt--10 pb-10">
            <SliderSwiper
                reference={updateSwiper}
                settings={settings}
            >
                {
                    projects ? projects[index - 1].images.map((image) => (
                        <div key={image} className="image-slide mt--15">
                            <img src={`${process.env.PUBLIC_URL}/projects/${index}/${image}`} alt="" />
                        </div>
                    )) : ""
                }
            </SliderSwiper>
            {/* <button onClick={goPrev} className="swipper-btn swiper-btn-prev">
                <i className="fa fa-angle-left" />
            </button> */}
            <Col>
                <div onClick={goNext} className="scroll-btn mt--25">
                    <span>SCROLL TO SEE MORE</span>
                    <span className="btn-arrow" />
                </div>
            </Col>
        </div>
    );
};

export default ImageSlider;