diff --git a/src/blocks/carousel/create-swiper.js b/src/blocks/carousel/create-swiper.js
index 325a7e74a..56b4fb399 100644
--- a/src/blocks/carousel/create-swiper.js
+++ b/src/blocks/carousel/create-swiper.js
@@ -98,17 +98,18 @@ export default function createSwiper( els, config = {} ) {
 		touchStartPreventDefault: false,
 		on: {
 			init() {
-				forEachNode( this.wrapperEl.querySelectorAll( '.swiper-slide' ), slide =>
+				forEachNode( swiper.wrapperEl.querySelectorAll( '.swiper-slide' ), ( slide ) =>
 					deactivateSlide( slide )
 				);
 
-				activateSlide( this.slides[ this.activeIndex ] ); // Set-up our active slide.
+				const maybeActiveSlide = swiper.slides[ swiper.activeIndex ];
+				maybeActiveSlide && activateSlide( maybeActiveSlide ); // Set-up our active slide.
 			},
 
 			slideChange() {
-				const currentSlide = this.slides[ this.activeIndex ];
+				const currentSlide = swiper.slides[ swiper.activeIndex ];
 
-				deactivateSlide( this.slides[ this.previousIndex ] );
+				deactivateSlide( swiper.slides[ swiper.previousIndex ] );
 
 				activateSlide( currentSlide );
 
@@ -116,7 +117,7 @@ export default function createSwiper( els, config = {} ) {
 				 * If we're autoplaying, don't announce the slide change, as that would
 				 * be supremely annoying.
 				 */
-				if ( ! this.autoplay.running ) {
+				if ( ! swiper.autoplay.running ) {
 					// Announce the contents of the slide.
 					const currentImage = currentSlide.querySelector( 'img' );
 					const alt = currentImage ? currentImage.alt : false;
@@ -124,8 +125,8 @@ export default function createSwiper( els, config = {} ) {
 					const slideInfo = sprintf(
 						/* translators: current slide number and the total number of slides */
 						__( 'Slide %s of %s', 'newspack-blocks' ),
-						this.realIndex + 1,
-						this.pagination.bullets.length
+						swiper.realIndex + 1,
+						swiper.pagination.bullets.length
 					);
 
 					speak(
diff --git a/src/blocks/carousel/edit.js b/src/blocks/carousel/edit.js
index 274f4766e..5cfe89acc 100644
--- a/src/blocks/carousel/edit.js
+++ b/src/blocks/carousel/edit.js
@@ -190,7 +190,7 @@ class Edit extends Component {
 								ref={ this.paginationRef }
 							/>
 						</Fragment>
-					) }
+					) || (<div className="swiper-wrapper"></div> ) }
 				</div>
 				<InspectorControls>
 					<PanelBody title={ __( 'Display Settings' ) } initialOpen={ true }>
diff --git a/src/blocks/carousel/view.js b/src/blocks/carousel/view.js
index f5d7e609d..7fd37e27a 100644
--- a/src/blocks/carousel/view.js
+++ b/src/blocks/carousel/view.js
@@ -14,11 +14,13 @@ if ( typeof window !== 'undefined' ) {
 		const blocksArray = Array.from(
 			document.querySelectorAll( '.wp-block-newspack-blocks-carousel' )
 		);
-		blocksArray.forEach( block => {
+		blocksArray.forEach( ( block ) => {
 			createSwiper(
 				{
 					block,
-					container: block.querySelector( '.swiper-container' ),
+					container: block.classList.contains('swiper-container')
+					  ? block
+					  : block.querySelector( '.swiper-container' ),
 					prev: block.querySelector( '.swiper-button-prev' ),
 					next: block.querySelector( '.swiper-button-next' ),
 					pagination: block.querySelector( '.swiper-pagination-bullets' ),