Hi,
On bottom of slider how to show next and prev button?
hidden link
best
I use block editor to do slider.
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
Dear Waqar,
What if I use this option: hidden link ?
Can be done?
Best
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.
Dear Waqar,
Yes please... solution with Bootstrap 4 library's carousel. Would you like access to the site?
Best regards
Krystian
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.
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/
