Custom Sliders with Advanced Custom Fields & ACF Photo Gallery

<h2 style='text-align: center;'>Display ACF Photo Gallery field as a Carousel Slider</h2>
<?php 
// Get your images using "acf_photo_gallery" helper function; "acf_photo_gallery" query your database (gets your photo gallery images) and return them in an array format. This function requires 2 paramaters: 1. ACF_FIELD_NAME (the field name you set for your "slider"/"photo gallery"), 2. Post ID.
$images = acf_photo_gallery('slider_photo_gallery', $post->ID);

// In case the advanced custom fields photo gallery not showing in your frontend, uncomment this line of code to print out  $images array -- to check if we're getting something in our database.
// echo "<pre>";
// print_r($images);
// echo "</pre>";

// Check if the return array of "acf_photo_gallery" function has anything in it.
if( count($images) ) { ?>	
<div id="carousel-wrapper">
	<div id="carousel">
		<div id="carousel-content">
      <?php 
    	// Loop through array of images.
    	foreach($images as $image) {
    		// Get the following details for each image: id, title, caption, full image URL (full size image URL), thumbnail image URL (150px by 150px size image URL), image URL (link), target (open on same window or new tab), alt attribute, and class.
        $image_id = $image['id']; // The attachment id of the media
        $image_title = $image['title']; // The title
        $image_caption = $image['caption']; // The caption
        $image_full_url = $image['full_image_url']; // Full size image url
        // $image_full_url = acf_photo_gallery_resize_image($image_full_url, 262, 160); // Resized size image (262px by 160px) URL. If you don't want to use your full size image URL for your carousel slider, you can resize it using "acf_photo_gallery_resize_image" helper function. You may uncomment this line of code to set your preferred image width and height.
        $image_thumbnail_image_url = $image['thumbnail_image_url']; // Get the thumbnail size image url 150px by 150px
        $image_url = $image['url']; // Goto any link when clicked
        $image_target = $image['target']; // Open normal or new tab
        $image_alt = get_field('photo_gallery_alt', $image_id); // Get the alt which is a extra field (See below how to add extra fields)
        $image_class = get_field('photo_gallery_class', $image_id); // Get the class which is a extra field (See below how to add extra fields) ?>
        <!-- Insert each image (carousel slider image) into your HTML document with "img" tag. Set the "src" attribute value as "$image_full_url" (full size image URL). -->
		  	<div class="carousel-item">
		  		<img src="<?php echo $image_full_url?>">
		  	</div>
			<?php } ?>
			<!-- Add "preview" and "next" button. -->
		  <button id="prev">
			  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
					<path fill="none" d="M0 0h24v24H0V0z"></path>
					<path d="M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z"></path>      
				</svg>
			</button>
		  <button id="next">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
					<path fill="none" d="M0 0h24v24H0V0z"></path>
					<path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z"></path>
				</svg>
			</button>
		</div>
	</div>
</div>
<?php } else { ?> <p style='text-align: center;'>No images/photos found...</p>; <?php } ?>

/* __________ Carousel slider __________ */
#carousel-wrapper {
  width: 100%;
  max-width: 1400px;
  position: relative;
}

#carousel {
  overflow: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

#carousel::-webkit-scrollbar {
  height: 0;
}

#prev, #next {
  display: flex;
  justify-content: center;
  align-content: center;
  background: white;
  border: none;
  padding: 8px;
  border-radius: 50%;
  outline: 0;
  cursor: pointer;
  position: absolute;
}

#prev {
  top: 50%;
  left: 0;
  transform: translate(50%, -50%);
  display: none;
}

#next {
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
}

#carousel-content {
  display: grid;
  grid-gap: 16px;
  grid-auto-flow: column;
  margin: auto;
  box-sizing: border-box;
}

.carousel-item {
  /*width: 268px;*/
  width: calc((100vw / 4) - 12px);
  max-width: none !important;
  /*height: 250px;*/
  height: auto;
  background: green;
}

.carousel-item p {
	display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

add_action('wp_footer', 'script_carousel_slider');
function script_carousel_slider() {
	global $post;

	if( is_page() || is_single() ) {
    if (get_post_type( $post->ID ) === "book") { // Validate post type -- we only want to include this JavaScript code in our custom post "Book". Uncomment this line of code if you want to include this JavaScript code in all of your posts/pages.
  	?>
			<script type="text/javascript">
				const gap = 16;

				const carousel = document.getElementById("carousel"),
				  content = document.getElementById("carousel-content"),
				  next = document.getElementById("next"),
				  prev = document.getElementById("prev");

				next.addEventListener("click", e => {
				  carousel.scrollBy(width + gap, 0);
				  if (carousel.scrollWidth !== 0) {
				    prev.style.display = "flex";
				  }
				  if (content.scrollWidth - width - gap <= carousel.scrollLeft + width) {
				    next.style.display = "none";
				  }
				});

				prev.addEventListener("click", e => {
				  carousel.scrollBy(-(width + gap), 0);
				  if (carousel.scrollLeft - width - gap <= 0) {
				    prev.style.display = "none";
				  }
				  if (!content.scrollWidth - width - gap <= carousel.scrollLeft + width) {
				    next.style.display = "flex";
				  }
				});

				let width = carousel.offsetWidth;
				window.addEventListener("resize", e => (width = carousel.offsetWidth));
			</script>
  	<?php
    }
  }
}

// ---------- Shortcode carousel slider
// On WordPress initialization, we'll register our shortcode [carouselslider] using WP "add_shortcode" built-in function.
add_action( 'init', 'register_shortcodes' );
function register_shortcodes() {
	add_shortcode( 'carouselslider', 'shortcode_carousel_slider' );
}

// Create your shortcode callback function
function shortcode_carousel_slider( $atts ) {
	global $post;

	$images = acf_photo_gallery('slider_photo_gallery', $post->ID);

	if( count($images) ) {
		$carousel_slider .= '<div id="carousel-wrapper">';
	  $carousel_slider .= 	'<div id="carousel">';
		$carousel_slider .= 		'<div id="carousel-content">';
	      
  	foreach($images as $image) {
      $image_id = $image['id'];
      $image_title = $image['title'];
      $image_caption = $image['caption'];
      $image_full_url = $image['full_image_url'];
      $image_thumbnail_image_url = $image['thumbnail_image_url'];
      $image_url = $image['url'];
      $image_target = $image['target'];
      $image_alt = get_field('photo_gallery_alt', $image_id);
      $image_class = get_field('photo_gallery_class', $image_id);

	  	$carousel_slider .= 		'<div class="carousel-item">';
	  	$carousel_slider .= 			'<img src="' . $image_full_url . '">';
	  	$carousel_slider .= 		'</div>';
		}
			  
	  $carousel_slider .= 			'<button id="prev">';
		$carousel_slider .= 			  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">';
		$carousel_slider .= 					'<path fill="none" d="M0 0h24v24H0V0z"></path>';
		$carousel_slider .= 					'<path d="M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z"></path>';      
		$carousel_slider .= 				'</svg>';
		$carousel_slider .= 			'</button>';
	  $carousel_slider .= 			'<button id="next">';
		$carousel_slider .= 				'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">';
		$carousel_slider .= 					'<path fill="none" d="M0 0h24v24H0V0z"></path>';
		$carousel_slider .= 					'<path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z"></path>';
		$carousel_slider .= 				'</svg>';
		$carousel_slider .= 			'</button>';
  	$carousel_slider .= 		'</div>';
  	$carousel_slider .= 	'</div>';
		$carousel_slider .= '</div>';

		return $carousel_slider;
	}

	return '<p style="text-align: center;">No images/photos found...</p>';
}

<h2 style='text-align: center;'>Display ACF Photo Gallery field as a Fullwidth Slider</h2>
<?php 
$images = acf_photo_gallery('slider_photo_gallery', $post->ID);

if( count($images) ) { ?>	
<div class="slideshow-container">
  <?php 
	foreach($images as $image) {
    $image_id = $image['id'];
    $image_title = $image['title'];
    $image_caption = $image['caption'];
    $image_full_url = $image['full_image_url'];
    // $image_full_url = acf_photo_gallery_resize_image($image_full_url, 262, 160);
    $image_thumbnail_image_url = $image['thumbnail_image_url'];
    $image_url = $image['url'];
    $image_target = $image['target'];
    $image_alt = get_field('photo_gallery_alt', $image_id);
    $image_class = get_field('photo_gallery_class', $image_id); ?>
		<div class="mySlides fade">
		  <img src="<?php echo $image_full_url?>" style="width:100%">
		  <div class="text"><?php echo $image_caption ?></div>
		</div>
	<?php } ?>
	<a class="prev" onclick="plusSlides(-1)">❮</a>
	<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<?php } else { ?> <p style='text-align: center;'>No images/photos found...</p>; <?php } ?>

/* __________ Fullwidth slider __________ */
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  /*max-width: 1000px;*/
	max-width: 100% !important;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

add_action('wp_footer', 'script_fullwidth_slider');
function script_fullwidth_slider() {
	global $post;

	if( is_page() || is_single() ) {
    if (get_post_type( $post->ID ) === "book") { // Validate post type -- we only want to include this JavaScript code in our custom post "Book". Uncomment this line of code if you want to include this JavaScript code in all of your posts/pages.
  	?>
			<script type="text/javascript">
				var slideIndex = 1;
				showSlides(slideIndex);

				function plusSlides(n) {
				  showSlides(slideIndex += n);
				}

				function currentSlide(n) {
				  showSlides(slideIndex = n);
				}

				function showSlides(n) {
				  var i;
				  var slides = document.getElementsByClassName("mySlides");
				  var dots = document.getElementsByClassName("dot");
				  if (n > slides.length) {slideIndex = 1}    
				  if (n < 1) {slideIndex = slides.length}
				  for (i = 0; i < slides.length; i++) {
				      slides[i].style.display = "none";  
				  }
				  for (i = 0; i < dots.length; i++) {
				      dots[i].className = dots[i].className.replace(" active", "");
				  }
				  slides[slideIndex-1].style.display = "block";  
				  dots[slideIndex-1].className += " active";
				}
			</script>
  	<?php
    }
  }
}

// ---------- Shortcode fullwidth slider
// On WordPress initialization, we'll register our shortcode [fullwidthslider] using WP "add_shortcode" built-in function.
add_action( 'init', 'register_shortcodes_1' );
function register_shortcodes_1() {
	add_shortcode( 'fullwidthslider', 'shortcode_fullwidth_slider' );
}

// Create your shortcode callback function
function shortcode_fullwidth_slider( $atts ) {
	global $post;

	$images = acf_photo_gallery('slider_photo_gallery', $post->ID);

	if( count($images) ) {
		$fullwidth_slider .= '<div class="slideshow-container">';
  	
  	foreach($images as $image) {
      $image_id = $image['id'];
      $image_title = $image['title'];
      $image_caption = $image['caption'];
      $image_full_url = $image['full_image_url'];
      // $image_full_url = acf_photo_gallery_resize_image($image_full_url, 262, 160);
      $image_thumbnail_image_url = $image['thumbnail_image_url'];
      $image_url = $image['url'];
      $image_target = $image['target'];
      $image_alt = get_field('photo_gallery_alt', $image_id);
      $image_class = get_field('photo_gallery_class', $image_id);

			$fullwidth_slider .= '<div class="mySlides fade">';
			$fullwidth_slider .=   '<img src="' . $image_full_url . '" style="width:100%">';
			$fullwidth_slider .=   '<div class="text"><?php echo $image_caption ?></div>';
			$fullwidth_slider .= '</div>';
		}

		$fullwidth_slider .= 	'<a class="prev" onclick="plusSlides(-1)">❮</a>';
		$fullwidth_slider .= 	'<a class="next" onclick="plusSlides(1)">❯</a>';
		$fullwidth_slider .= '</div>';

		return $fullwidth_slider;
	}

	return '<p style="text-align: center;">No images/photos found...</p>';
}

<h2 style='text-align: center;'>Display ACF Photo Gallery field as an Image Gallery</h2>
<?php 
$images = acf_photo_gallery('slider_photo_gallery', $post->ID);

if( count($images) ) { ?>	
<div class="container">
  <?php 
	foreach($images as $image) {
    $image_id = $image['id'];
    $image_title = $image['title'];
    $image_caption = $image['caption'];
    $image_full_url = $image['full_image_url'];
    // $image_full_url = acf_photo_gallery_resize_image($image_full_url, 262, 160);
    $image_thumbnail_image_url = $image['thumbnail_image_url'];
    $image_url = $image['url'];
    $image_target = $image['target'];
    $image_alt = get_field('photo_gallery_alt', $image_id);
    $image_class = get_field('photo_gallery_class', $image_id); ?>
		<div class="galleryItem">
			<a href="<?php echo $image_full_url ?>"><img src="<?php echo $image_full_url ?>" alt="" /></a> <!-- Put the "img" (image) tag inside the "a" (anchor) tag ("href" attribute value should be your full image URL) to make a lightbox effect for your ACF gallery. -->
		</div>
	<?php } ?>
</div>
<br>
<?php } else { ?> <p style='text-align: center;'>No images/photos found...</p>; <?php } ?>

/* __________ Image Gallery __________ */
.container {
  width: 100%;
  max-width: 1200px !important;
}

.galleryItem {
	color: #797478;
	font: 10px/1.5 Verdana, Helvetica, sans-serif;
	float: left;
}

.galleryItem h3 {
	text-transform: uppercase;
}

.galleryItem img {
	max-width: 100%;
  -moz-border-radius: 5px;
  width: calc(100vw / 3);
  padding: 10px;
}

// ---------- Shortcode image gallery
// On WordPress initialization, we'll register our shortcode [imagegallery] using WP "add_shortcode" built-in function.
add_action( 'init', 'register_shortcodes_2' );
function register_shortcodes_2() {
	add_shortcode( 'imagegallery', 'shortcode_imagegallery_slider' );
}

// Create your shortcode callback function
function shortcode_imagegallery_slider( $atts ) {
	global $post;

	$images = acf_photo_gallery('slider_photo_gallery', $post->ID);

	if( count($images) ) {
		$image_gallery .= '<div class="container">';

  	foreach($images as $image) {
      $image_id = $image['id'];
      $image_title = $image['title'];
      $image_caption = $image['caption'];
      $image_full_url = $image['full_image_url'];
      // $image_full_url = acf_photo_gallery_resize_image($image_full_url, 262, 160);
      $image_thumbnail_image_url = $image['thumbnail_image_url'];
      $image_url = $image['url'];
      $image_target = $image['target'];
      $image_alt = get_field('photo_gallery_alt', $image_id);
      $image_class = get_field('photo_gallery_class', $image_id);

			$image_gallery .= '<div class="galleryItem">';
			$image_gallery .= 	'<a href="' . $image_full_url . '"><img src="' . $image_full_url . '" alt="" /></a>'; // Put the "img" (image) tag inside the "a" (anchor) tag ("href" attribute value should be your full image URL) to make a lightbox effect for your ACF gallery.
			$image_gallery .= '</div>';
		}

		$image_gallery .= '</div>';

		return $image_gallery;
	}

	return '<p style="text-align: center;">No images/photos found...</p>';
}