swiper icon indicating copy to clipboard operation
swiper copied to clipboard

Swiper React: Mapping Swiper Slide Not Working When Reload

Open muhammadadamfirdaus opened this issue 4 years ago • 18 comments

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;
Screen Shot 2020-11-04 at 00 01 21 Screen Shot 2020-11-04 at 00 04 05 There's no extra properties like when Swiper worked (prev, active, next, etc).

Expected Behavior

Screen Shot 2020-11-04 at 00 07 41 Worked only when we change window, not first load.

Did I missing something? Thanks.

muhammadadamfirdaus avatar Nov 03 '20 17:11 muhammadadamfirdaus

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>
  )

hackers267 avatar Dec 01 '20 14:12 hackers267

@muhammadadamfirdaus still relevant?

vltansky avatar Jan 21 '21 22:01 vltansky

Same problem

GuiSelair avatar Feb 03 '21 20:02 GuiSelair

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

marioloncarek avatar Feb 17 '21 10:02 marioloncarek

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.

ankurpiparsania avatar May 08 '21 07:05 ankurpiparsania

Same problem

israelcena avatar Aug 14 '21 04:08 israelcena

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 .

Abdulrhman-AL-Samrrae avatar Sep 10 '21 11:09 Abdulrhman-AL-Samrrae

Same problem

apolaina-ineat avatar Sep 22 '21 17:09 apolaina-ineat

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

omarbakr2020 avatar Sep 26 '21 01:09 omarbakr2020

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.

stale[bot] avatar Apr 16 '22 05:04 stale[bot]

same problem

mitesh-200228 avatar Jun 06 '22 20:06 mitesh-200228

@OmarBakr2020 issue is still coming after adding observer values

mitesh-200228 avatar Jun 06 '22 20:06 mitesh-200228

@mitesh-200228 I haven't looked for another solution for this problem, Mine worked for me, but I'll try to look for another workaround for it

omarbakr2020 avatar Jun 06 '22 20:06 omarbakr2020

@mitesh-200228 my solution was to add observer={true} observeParents={true} pagination={true} attributes to <Swiper> tag

omarbakr2020 avatar Jun 06 '22 20:06 omarbakr2020

not working for me, but still thank you

mitesh-200228 avatar Jun 06 '22 20:06 mitesh-200228

Sorry for that!

omarbakr2020 avatar Jun 06 '22 20:06 omarbakr2020

please any one can help time west for us

Sadnan-2019 avatar Jun 22 '22 11:06 Sadnan-2019

I had the same problem. See if you have the same keys in swiper childrens.

MarcinFilipek avatar Jul 20 '22 06:07 MarcinFilipek

Same problem

dev-44 avatar Feb 17 '23 20:02 dev-44

same problem!

PouryaMontakhab avatar May 24 '23 11:05 PouryaMontakhab

Same problem

bistlight avatar Jun 08 '23 11:06 bistlight

Same problem

mayconmesquita avatar Jun 08 '23 21:06 mayconmesquita

this works for me ! thank you very much !

buithanhnhan76 avatar Sep 18 '23 04:09 buithanhnhan76

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

  • Clearly describe the issue including steps to reproduce when it is a bug.
  • Make sure you fill in the earliest version that you know has the issue.
  • Provide live link or JSFiddle/Codepen or website with issue

nolimits4web avatar Oct 24 '23 12:10 nolimits4web