Hi Dee,
Thank you for contacting us.
Nigel is away until early next week, but I'll be happy to assist with this question.
To include that custom slider in your view, you can follow these steps:
1. Create a new view or open an existing one for editing and set it to show posts from where you'd like to get the slider's data. Please also make sure that "No pagination" option is set under "Pagination and Sliders Settings" section.
2. In the view's "CSS editor" tab under the "Loop editor" section, copy all CSS code from the "CSS" tab on that snippet's page.
( screenshot: hidden link )
3. Similarly, in the "JS editor" tab right below it, copy the code from the "JS" tab.
4. Next, you'll need a custom shortcode that will generate the pagination HTML for the slider, based on the number of results found in the view.
For this, you can add the following PHP code, in your active child theme's "functions.php" file:
add_shortcode('show_custom_slider_pagination', 'show_custom_slider_pagination_fn');
function show_custom_slider_pagination_fn($atts) {
$count = $atts['count'];
if ($count >= 1 )
{
ob_start();
echo '<!-- Indicators -->';
echo '<ol class="carousel-indicators">';
for ($i=0; $i < $count ; $i++)
{
if ($i == 0)
{
$active = 'class="active"';
}
else
{
$active = '';
}
echo '<li data-target="#mogo-slider" data-slide-to="'.$i.'" '.$active.'>';
echo '<div class="indicator-inner">';
echo '<span class="number">0'.($i + 1).'</span>';
echo '<span class="text text-uppercase">Intro</span>';
echo '</div>';
echo '</li>';
}
}
echo '</ol>';
return ob_get_clean();
}
Note: You can replace the text "Intro" with actual value from the custom field that you'd like to show here.
( screenshot: hidden link )
Once this code has been added, you'll be able to use this shortcode to show the slider's pagination like this:
[show_custom_slider_pagination count="[wpv-found-count]"]
5. To show the loop and HTML in the view's "Loop editor" section, you can replace the existing code with the following:
[wpv-layout-start]
[wpv-items-found]
<!-- Slider start -->
<div class="slider">
<div class="slider-wrap">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="mogo-slider" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner text-center" role="listbox">
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-item index=1]
<div class="item active">
[wpv-post-body view_template="slug-of-content-template"]
</div>
[wpv-item index=other]
<div class="item">
[wpv-post-body view_template="slug-of-content-template"]
</div>
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[show_custom_slider_pagination count="[wpv-found-count]"]
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of slider -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
Note: the shortcode for the pagination is already included at the correct place and you'll only need to update all instances of "slug-of-content-template" to match the slug of your view's content template.
6. In the view's content template section you can include the code for each slider item like this:
<div class="slider-content">
<p class="slider-caption">
Creative Template
</p>
<h3 class="slider-titile text-uppercase">
Welcome <br> to mogo
</h3>
<span class="verticle-bar"></span>
<div class="btn-action">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
Note: In this example, I've used hardcoded values, but you can replace them with dynamic custom field values, accordingly.
Important note: If the Bootstrap's CSS and JS file is not being included on the website, by your theme or by Toolset, you'll also need to include the following lines to load them above the comment line "<!-- Slider start -->", in step 5.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
I hope this helps and let me know if you have any questions around any of these steps.
regards,
Waqar
