Images in Swiper not working in Popup

Questions
1

Hello,

I am trying to get the images in the swiper to load in a popup in my page. The popup is opened when I click a link on a virtual list.

<div class="popup my-popup">
			
	<div class="page">
		
		<div class="navbar">
			<div class="navbar-bg"></div>
			<div class="navbar-inner">
				<div class="title"></div>
				<div class="right"><a href="#" class="link popup-close" id="my-popup-close-link">X</a></div>
			</div>
		</div>
		
		<div class="page-content">
								
			<div class="card data-table">
				<div data-pagination="{'el': '.swiper-pagination', 'hideOnClick': true}" class="swiper-container swiper-init listings-swiper">
					<div class="swiper-pagination"></div>
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img data-src="https://cdn.framework7.io/placeholder/people-1000x600-6.jpg" class="lazy">
						</div>
						<div class="swiper-slide">
							<img data-src="https://cdn.framework7.io/placeholder/people-1000x600-6.jpg" class="lazy">
						</div>
						<div class="swiper-slide">
							<img data-src="https://cdn.framework7.io/placeholder/people-1000x600-6.jpg" class="lazy">
						</div>
						<div class="swiper-slide">
							<img data-src="https://cdn.framework7.io/placeholder/people-1000x600-6.jpg" class="lazy">
						</div>
						<div class="swiper-slide">
							<img data-src="https://cdn.framework7.io/placeholder/people-1000x600-6.jpg" class="lazy">
						</div>
					</div>
				</div>
			</div>
								
			<div class="block">
										

			
			</div>
		
		</div>
	</div>

</div>

I try to initialize it once the popup opens on Virtual List click event … Nothing …

pageAfterIn: function() {
		
	var self = this;
												
	$('.my_listings').on('click', 'li', function () {
			
		swiper = app.swiper.create('.listings-swiper', {
			speed: 400,
			spaceBetween: 100
		});
	
	});
				
},

I know I should initialize the Swiper but I don’t know where exactly I should do that.

Any pointers will be appreciated.

Thanks

2

You need to bind afterIn to <div class="page"> manually

or

use popupOpen instead of pageAfterIn

or

change <div class="page">...</div> to <div class="view view-init><div class="page">...</div></div>

1 Like
3

@shastox I need more assistance. For example, how can I use

popupOpen instead of pageAfterIn

4

It seems the issue of images not displaying was the wrong class I was using. I changed from

class="lazy"

to

 class="swiper-lazy"

I also proceeded and added the data- attribute

data-lazy='{"enabled": true}'

All is well now.