Swiper React: Mapping Swiper Slide Not Working When Reload

muhammadadamfirdaus commented 4 years ago

This is a (multiple allowed):

[x] bug
[ ] enhancement
[ ] feature-discussion (RFC)
Swiper Version: 6.3.5.
Platform/Target and Browser Versions: MacOS, Chrome 86.0.4240.111.

What you did

Hello, when this code load for the first time, Swiper seems doesn't init, must be changed to the other view on developer tools in order to works.

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination, EffectCoverflow } from 'swiper';

import 'swiper/swiper-bundle.css';

function HomeSlider(){
  SwiperCore.use([Navigation, Pagination, EffectCoverflow]);

  useEffect(() => {
    HomeHeadlineImages();
  }, []);

  const [movies, setMovies] = useState([]);

  const HomeHeadlineImages = async () => {
    const weeklyMovies = await `fetch('https://api.themoviedb.org/3/trending/movie/week?api_key=xxxxxxx');`
    const weeklyRecommendation = await weeklyMovies.json();
    // console.log(weeklyRecommendation.results);
    setMovies(weeklyRecommendation.results);
  }

  const slides = [];
  movies.slice(0,5).map(movie => (
    slides.push(
      <SwiperSlide key={movie.id}>
        <img src={`https://image.tmdb.org/t/p/w500/${movie.backdrop_path}`} alt=""/>
      </SwiperSlide>
    )
  ));

  return (
    <div>
      <div className="headline-home">
        <Swiper id="headline" navigation pagination effect="coverflow">
          {slides}
        </Swiper>
      </div>
    </div>
  )
}

export default HomeSlider;

There's no extra properties like when Swiper worked (prev, active, next, etc).

Expected Behavior

Worked only when we change window, not first load.

Did I missing something? Thanks.

hackers267 commented 3 years ago

Make sure that when you get the new slides datas you can init a new Swiper. For example:

return (
    <div>
      <div className="headline-home">
        {
         slieds.length ? (
         <Swiper id="headline" navigation pagination effect="coverflow">
          {slides}
        </Swiper>
         ) : null
        }
      </div>
    </div>
  )

vltansky commented 3 years ago

@muhammadadamfirdaus still relevant?

GuiSelair commented 3 years ago

Same problem

marioloncarek commented 3 years ago

Havin the same problem, did anyone managed to fix it? @muhammadadamfirdaus @vltansky @GuiSelair

ankurpiparsania commented 3 years ago

We are still seeing this problem. Did you manage to find a solution @muhammadadamfirdaus ?

Quick Update: i was seeing this issue with use of virtual module. after removing it issue seems to have vanished for time being. will further explore and revert if i find out more on this issue.

israelcena commented 3 years ago

Same problem

Abdulrhman-AL-Samrrae commented 3 years ago

same problem here , the dom tree for the swiper remove all the controls , some time it work like overflow-x scroll and no else work only if reload the page some time it work some time still the same .

apolaina-ineat commented 3 years ago

Same problem

omarbakr2020 commented 3 years ago

Guys, There's the solution. You should add observer = {true} observerParents={true} to the parameters to <Swiper> and this should solve the issue.

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.