live wire with swiper

Hi , i using swiper and already installed with my template and everything works correctly , but when i using live-wire i faced problems like the boxes scale up and the style destroyed , so i separated the livewire and the swiper container , but also when i scroll all slides gone until next refresh , i tried ti use wire:ignore but not works

#LIVE WIRE COMPONENT 

<div class="swiper-wrapper" wire:poll.4000ms >
@forelse($reviews as $review)
    <div wire:key="{{$review->id}}" class="swiper-slide" >

        <!-- Testimonial Item Start -->
        <div class="testimonial-item bg-white">
            <div class="testimonial-quote-icon">
         
            </div>
            <div class="testimonial-main-content">
                <div class="testimonial-caption">
                    <h3 class="testimonial-caption__title">{{$review->title}}</h3>
                    <p>
                        {{$review->message}}
                    </p>
                </div>
                <div class="testimonial-info">
                    <div class="testimonial-info__image">
                        <img src="{{$review->customer->avatar()}}" alt="Avatar" width="60" height="60">
                    </div>
                    <div class="testimonial-info__caption">
                        <h5 class="testimonial-info__name">{{$review->customer->fullName}}</h5>
                        <p class="testimonial-info__designation">/ @lang('customer')</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Testimonial Item End -->

    </div>
@empty

@endforelse
</div>

#SWIPER COMPONENT 
  <!-- Testimonial Start -->
        <div class="testimonial-active-02" >
            <div class="swiper">


                   <livewire:review  />


            </div>
        </div>
        <!-- Testimonial End -->

#LIVE WIRE CLASSES 
class Review extends Component
{
    public $applyAnimation = false;
    public function render()
    {

        $reviews = ReviewModel::withoutTrashed()->with('customer')->get();
        return view('livewire.review', compact('reviews'));


    }

    public function getApplyAnimation()
    {
        $this->applyAnimation = true;
    }
}

MahmoudAdelAli

2 years ago

Level 5

You discovered something important here when the page started the swiper class it's like

<div wire:key="70" class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="19" role="group" aria-label="20 / 21" style="width: 330px; margin-left: 30px;">

but after the live wire refresh it's like

<div wire:key="71" class="swiper-slide">

MahmoudAdelAli

2 years ago

Level 5

now i tried to fetch a event on refresh

    <script>
        document.addEventListener('livewire:init', () => {


            Livewire.on('refresh', (event) => {

                const swiper = new Swiper('.swiper-wrapper', {
                    slidesPerView: 3,
                    spaceBetween: 30,
                    speed: 1000,
                    loop: true,
                    pagination: {
                        el: ".testimonial-active-02 .swiper-pagination",
                        clickable: true,
                    },
                    breakpoints: {
                        0: {
                            slidesPerView: 1,
                        },
                        768: {
                            slidesPerView: 2,
                        },
                        1200: {
                            slidesPerView: 4,
                        }
                    }

                });
            //     update swiper
                swiper.update();
            });
        });



    </script>

#class
 public function render()
    {
        $this->dispatch('refresh');
        $reviews = ReviewModel::withoutTrashed()->with('customer')->get();
        return view('livewire.review', compact('reviews'));


    }

but still not works correctly imagine you scroll the reviews and the cards dancing when you scroll an refreshed

Babaiev Ihor

1 year ago

Level 1

@MahmoudAdelAli timeout help in my case

<script>
    document.addEventListener('livewire:init', function () {
        Livewire.on('{{ \App\Enums\LivewireEvent::PRODUCT_RANGE_SET_CATEGORY->value }}', () => {
            setTimeout(() => {
                const swiperElement = document.querySelector('.list-product-range');
                if (swiperElement) {
                    new Swiper(swiperElement, {
                        loop: false,
                        slidesPerView: 1,
                        spaceBetween: 16,
                        speed: 1000,
                        navigation: {
                            nextEl: '.button-next',
                            prevEl: '.button-prev',
                        },
                        scrollbar: {
                            el: '.swiper-scrollbar',
                            draggable: true,
                        },
                        breakpoints: {
                            992: {
                                slidesPerView: 4,
                            },
                            480: {
                                slidesPerView: 2,
                            }
                        }
                    });
                }
            }, 100);
        });
    });
</script>

1 like

Please or to participate in this conversation.