Image Slider

ℹ️
Beta Feature
The feature described here will be available starting with SureCart version 3.0. If you'd like to try this feature before the official release, you can install the beta version by visiting the SureCart plugin page on WordPress.org. In the Advanced Options section, select the latest version labeled "SureCart V3.0-Beta" from the Development Version dropdown, and click "Download."

Styles

These styles are needed in order to use the image slider:

wp_enqueue_style('surecart-image-slider');

Scripts

The following script is required in order to use the image slider:

Basic Slider Markup

<div
	class="sc-image-slider"
	data-wp-interactive='{ "namespace": "surecart/image-slider" }'
	data-wp-init="actions.init" /** Initialize the slider on load **/
    <?php
        echo wp_kses_data(
            wp_interactivity_data_wp_context(
                [
                    /** Pass swiper options here. See swiper docs for details.  **/
                    'sliderOptions' => [
                        'autoHeight' => true,
                    ]
										'thumbSliderOptions' => [
                    	'slidesPerView' => 5,
                      'slidesPerGroup' => 5
                    ]
                ]
            )
        );
    ?>
>
    <!-- Slider -->
    <div class="swiper">
      <div class="swiper-wrapper">
      	<div class="swiper-slide"><img src=""/></div>
      	<div class="swiper-slide"><img src=""/></div>
      </div>
      
      <!-- Navigation -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
</div>

Lazy Loading

Lazy loading images requires a loading="lazy" property on the image. Since you likely only want to lazy load non-visible images, you typically only want this to appear on images that are not the first image.

<div
    class="sc-image-slider"
    data-wp-interactive='{ "namespace": "surecart/image-slider" }'
    data-wp-init="actions.init"
>
  <div class="swiper">
    <div class="swiper-wrapper">
  
        <!-- Loop starts for each image -->
        <?php foreach ($images as $image_index => $image): ?>
            <div class="swiper-slide">
              <img 
                src="<?php echo esc_url($thumbnail['src']); ?>"
                loading="<?php echo esc_attr($image_index > 0 ? 'lazy' : 'eager'); ?>"
              />>
            </div>
        <?php endforeach; ?>
        <!-- Loop ends -->
          
    </div>
          
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

Adding Thumbnail Navigation

The thumbnail slider, optional and displayed if enabled, allows users to navigate through the main slider images using thumbnails. Each thumbnail is a clickable button containing an img tag, facilitating navigation to the corresponding main image.

To add a thumbnail navigation add a sc-image-slider__thumbs wrapper around an additional swiper class. These both must be contained inside the sc-image-slider div.

You will also want to specify the number of thumbnails by using the sc-has-x-thumbnails. For example, if you want 6 thumbnails per page, you will want to use the class sc-has-6-thumbnails.

<div class="sc-image-slider"
    data-wp-interactive='{ "namespace": "surecart/image-slider" }'
    data-wp-init="actions.init">
  
  <!-- Main Wwiper ->
  <div class="swiper"></div>
  
  
  <!-- Thumbnail navigation ->
  <div class="sc-image-slider__thumbs">
  
  		<!-- Previous Page Navigation ->
      <div class="sc-image-slider--is-prev" tabindex="-1" role="button">
          <?php echo wp_kses(SureCart::svg()->get('chevron-left'), sc_allowed_svg_html()); ?>
      </div>

  		<!-- The slider ->
      <div class="swiper">
          <div class="swiper-wrapper sc-has-6-thumbs">
              <!-- Loop starts for each thumbnail -->
              <?php foreach ($thumbnails as $thumb_index => $thumbnail): ?>
                  <div class="swiper-slide">
                      <img
                          src="<?php echo esc_url($thumbnail['src']); ?>"
                          alt="<?php echo esc_attr($thumbnail['alt']); ?>"
                          title="<?php echo esc_attr($thumbnail['title']); ?>"
                      />
                  </div>
              <?php endforeach; ?>
              <!-- Loop ends -->
          </div>
      </div>
                
			<!-- Next Page Navigation ->     
      <div class="sc-image-slider-button__next" tabindex="-1" role="button">
          <?php echo wp_kses(SureCart::svg()->get('chevron-right'), sc_allowed_svg_html()); ?>
      </div>
  </div>
</div>

Full Example

<?php

$attributes = array(
	'thumbnails_per_page' => 5,
	'auto_height'         => false,
	'height'              => '500px',
	'has_thumbnails'      => true,
);

$product    = \SureCart\Models\Product::with( array( 'image', 'prices', 'product_medias', 'variant_options', 'variants', 'product_media.media', 'product_collections' ) )->find( 'b29dd028-b331-4ac9-896b-537ff39e8fc2' );
$images     = $product->getDisplayImages( $content_width ?? 1170 );
$thumbnails = $product->getDisplayImages( 240, array( 90, 120, 240 ) );
?>

<div
	class="sc-image-slider"
	data-wp-interactive='{ "namespace": "surecart/image-slider" }'
	data-wp-init="actions.init"
	<?php
	echo wp_interactivity_data_wp_context(
		array(
			'sliderOptions'      => [
				'autoHeight' => ! empty( $attributes['auto_height'] ),
			],
			'thumbSliderOptions' => [
				'slidesPerView'  => $attributes['thumbnails_per_page'] ?? 5,
				'slidesPerGroup' => $attributes['thumbnails_per_page'] ?? 5,
				'breakpoints'    => [
					320 => [
						'slidesPerView'  => $attributes['thumbnails_per_page'] ?? 5,
						'slidesPerGroup' => $attributes['thumbnails_per_page'] ?? 5,
					],
				],
			],
		)
	);
	?>
>
	<div class="swiper">
		<div class="swiper-wrapper">
			<?php foreach ( $images as $index => $image ) : ?>
				<div class="swiper-slide" data-wp-key="<?php echo esc_attr( $image['id'] ); ?>">
					<img
						src="<?php echo esc_url( $image['src'] ); ?>"
						alt="<?php echo esc_attr( $image['alt'] ); ?>"
						srcset="<?php echo esc_attr( $image['srcset'] ?? '' ); ?>"
						width="<?php echo esc_attr( $image['width'] ); ?>"
						height="<?php echo esc_attr( $image['height'] ); ?>"
						title="<?php echo esc_attr( $image['title'] ); ?>"
						loading="<?php echo esc_attr( $index > 0 ? 'lazy' : 'eager' ); ?>"
						style="height: <?php echo esc_attr( ! empty( $attributes['auto_height'] ) ? 'auto' : ( esc_attr( $attributes['height'] ?? 'auto' ) ) ); ?>"
					/>

					<?php if ( $index > 0 ) : ?>
						<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
					<?php endif; ?>
				</div>
			<?php endforeach; ?>
		</div>

		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>

	<?php if ( $attributes['has_thumbnails'] ) { ?>
		<div class="sc-image-slider__thumbs">
			<div class="sc-image-slider-button__prev" tabindex="-1" role="button">
				<?php echo wp_kses( SureCart::svg()->get( 'chevron-left' ), sc_allowed_svg_html() ); ?>
			</div>

			<div class="swiper">
				<div class="swiper-wrapper <?php echo esc_attr( 'sc-has-' . $attributes['thumbnails_per_page'] . '-thumbs' ); ?>">
					<?php foreach ( $thumbnails as $thumb_index => $thumbnail ) : ?>
						<div
							class="swiper-slide"
							data-wp-key="<?php echo esc_attr( $thumbnail['id'] ); ?>"
							<?php echo wp_kses_data( wp_interactivity_data_wp_context( array( 'slideIndex' => (int) $thumb_index ) ) ); ?>
						>
							<img
								src="<?php echo esc_url( $thumbnail['src'] ); ?>"
								alt="<?php echo esc_attr( $image['alt'] ); ?>"
								title="<?php echo esc_attr( $thumbnail['title'] ); ?>"
								srcset="<?php echo esc_attr( $thumbnail['srcset'] ); ?>"
								width="<?php echo esc_attr( $thumbnail['width'] ); ?>"
								height="<?php echo esc_attr( $thumbnail['height'] ); ?>"
								loading="<?php echo esc_attr( $thumb_index > $attributes['thumbnails_per_page'] ? 'lazy' : 'eager' ); ?>"
							/>

							<?php if ( $thumb_index > $attributes['thumbnails_per_page'] ) : ?>
								<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
							<?php endif; ?>
						</div>
					<?php endforeach; ?>
				</div>
			</div>

			<div class="sc-image-slider-button__next" tabindex="-1" role="button">
				<?php echo wp_kses( SureCart::svg()->get( 'chevron-right' ), sc_allowed_svg_html() ); ?>
			</div>
		</div>
	<?php } ?>
</div>

Attributes

Attribute	Type	Description
`thumbnails_per_page`	`integer`	The number of thumbnails displayed simultaneously in the slider.
`auto_height`	`boolean`	Adjusts the slide's height to fit the image height. Set to `false` to manually set image height.
`height`	`string`	The fixed height of the image slide is applicable when `auto_height` is `false`.
`has_thumbnails`	`boolean`	Indicates whether the slider includes thumbnails for navigation.
`images`	`Image[]`	The images to be displayed on the slider.
`thumbnails`	`Image[]`	The thumbnail images to be displayed on the slider. The images should take the data format of

Data Types

Image

An associative array representing an image, containing metadata and display attributes.

Field	Type	Description
`src`	`string`	The URL of the image.
`alt`	`string`	Alternative text for the image, used for accessibility.
`title`	`string`	The title of the image typically displayed as a tooltip.
`width`	`integer`	The width of the image in pixels.
`height`	`integer`	The height of the image in pixels.
`srcset`	`integer[]`	An array of integer values indicating different sizes of the image, is used for responsive designs.

Example:

$image = [
    'src' => 'path/to/image.jpg',
    'alt' => 'An example image',
    'title' => 'Example Image Title',
    'width' => 600,
    'height' => 400,
    'srcset' => [600, 1200, 1800] // Sizes in pixels
];

ℹ️Beta Feature

Styles

Scripts

Basic Slider Markup

Lazy Loading

Adding Thumbnail Navigation

Full Example

Attributes

Data Types

Image

ℹ️
Beta Feature