[Resolved] How to add next slider button?

[Author]

Posts

[monikaP]

Hi,

On bottom of slider how to show next and prev button?

hidden link

best

[monikaP]

I use block editor to do slider.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

I'm afraid, the "Image Slider" block, doesn't support this feature of adding separate "next" and "previous" navigation links.

For a slider like this, you can switch to a third-party slider plugin, that offers more features. Following are a few articles that review some of the popular options:
hidden link
hidden link

regards,
Waqar

[monikaP]

Dear Waqar,

What if I use this option: hidden link ?
Can be done?

Best

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

The screenshot is from the classic views editor wizard.

It can be used to create a slider with navigation links, however, it works from images coming from multiple posts and not from a single post. For example, if you'd like to show the slider of featured images or custom field images coming from multiple posts of a post type.

For a slider of images coming from the custom field(s) of a single post, one alternative is to use the Bootstrap 4 library's carousel feature:
hidden link

Let me know if that can work and if you need further assistance in setting this up.

[monikaP]

Dear Waqar,

Yes please... solution with Bootstrap 4 library's carousel. Would you like access to the site?

Best regards
Krystian

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Yes, can you please share temporary admin login details, along with the link to the page, where you'd like to show this slider?

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for waiting.

I noticed that on your website, you've already added a slider using the Elementor builder.

If you'd still like to test out the Bootstrap 4 library's carousel, you can follow these steps:

1. You'll first register a custom shortcode, to generate the markup for the carousel:

add_shortcode('show_custom_Bootstrap_slider', 'show_custom_Bootstrap_slider_func');
function show_custom_Bootstrap_slider_func($atts) {

	$field = $atts['field'];

	$images = do_shortcode("[types field='".$field."' title='%%TITLE%%' alt='%%ALT%%' size='full' class='d-block' separator='###'][/types]");

	if (!empty($images)) {
		$images_arr = explode('###', $images);
		ob_start();
		?>
		<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
			<?php
				for ($i=0; $i < sizeof($images_arr) ; $i++) {
					if ($i==0) {
						$active = 'class="active"';
					} else {
						$active = '';
					}
					echo '<li data-target="#carouselExampleIndicators" data-slide-to="'.$i.'" '.$active.'></li>';
				}
			?>
			</ol>
			<div class="carousel-inner">
			<?php
				for ($i=0; $i < sizeof($images_arr) ; $i++) {
					if ($i==0) {
						$active = 'class="carousel-item active"';
					} else {
						$active = 'class="carousel-item"';
					}
					echo '<div '.$active.'>'.$images_arr[$i].'</div>';
				}
			?>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
			<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>
		</div>

		<?php
		return ob_get_clean();
	}
}

Note: The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through the active theme's "functions.php" file.

2. Next, in the template, where you'd like to show this carousel, you can add a text or shortcode widget and call this custom shortcode like this:

[show_custom_Bootstrap_slider field="image-field-slug"]

Note: Please replace 'image-field-slug' with the actual slug of your image custom field, that you'd like to get the images from.

I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/