how to create dynamicBullet Pagination with react and framerMotion

Anthony Michael answered on October 27, 2024 Popularity 1/10 Helpfulness 1/10

answer how to create dynamicBullet Pagination with react and framerMotion

related check failed: . : Permission denied (13)

how to create dynamicBullet Pagination with react and framerMotion

Comment

 <div className=" relative takia-padding py-10 space-y-3 pt-2 lg:hidden">
        <div className="h-[220px]  rounded-lg w-full  relative ">
          <Swiper
            spaceBetween={30}
            grabCursor={true}
            pagination={{
              dynamicBullets: true,
            }}
            loop={true}
            autoplay={{
              delay: 3000,
              disableOnInteraction: false,
            }}
            className="!absolute w-full rounded-md mySwiper inset-0"
            watchSlidesProgress={true}
            modules={[EffectCreative, Pagination, Autoplay]}
            slidesPerView={1}
            onSlideChange={(swiper) => setCurrentSlide(swiper.realIndex)}
            onSwiper={setSwiperInstance}
            // onSwiper={(swiper) => handleSlide(swiper)}
          >
            {cards.map((card, index) => (
              <SwiperSlide key={index} className="bg-red-500 ">
                {card}
              </SwiperSlide>
            ))}
            <div id="containerForBullets"></div>
          </Swiper>
        </div>
        <div className="min-w-full flex justify-center items-center">
          <div className="flex space-x-2">
            {swiperInstance?.pagination?.bullets?.map((bullet: any, index) => {
              const isActive = index === currentSlide;
              const isNext = index > currentSlide;
              const isPrev = index < currentSlide;

              // Adjusted scale calculation for more noticeable differences
              let scale;
              if (isActive) {
                scale = 1.5; // Active bullet is largest
              } else if (isNext) {
                scale = 1 - (index - currentSlide) * 0.2; // Increase decrement for next bullets
              } else if (isPrev) {
                scale = 1 - (currentSlide - index) * 0.2; // Increase decrement for previous bullets
              } else {
                scale = 1; // Default scale for bullets not in view
              }

              return (
                <motion.div
                  key={index}
                  className={`size-2 rounded-full ${
                    isActive ? 'bg-black' : 'bg-gray-500'
                  }`}
                  initial={{ scale: 1 }}
                  animate={{ scale, opacity: isActive ? 1 : 0.5 }}
                  transition={{ type: 'spring', stiffness: 300, damping: 15 }}
                ></motion.div>
              );
            })}
          </div>
        </div>
      </div>

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: framer-motion javascript pagination

Link to this answer
Share Copy Link

Contributed on Oct 28 2024

Anthony Michael

0 Answers Avg Quality 2/10

Closely Related Answers

check failed: . : Permission denied (13)

Comment

# linux app armor is restricting the usage of the 
# respective service by *unprivileged_users*
# run the following to disable it. (shouldn't be recommended 
# but some cross platform apps require it). In my case, it was 
# unityhub. (for Unity Game Engine)

sudo sysctl -w kernel.apparmor_restrict_unprivileged_userns=0

Popularity 1/10 Helpfulness 1/10 Language shell

Source: Grepper

Tags: permission-denied shell

Link to this answer
Share Copy Link

Contributed on Oct 27 2024

ycomb1nator

0 Answers Avg Quality 2/10

how to create dynamicBullet Pagination with react and framerMotion

Contents

More Related Answers

how to create dynamicBullet Pagination with react and framerMotion

Closely Related Answers

check failed: . : Permission denied (13)

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.