/**
* Outputs the jQuery required for the slider
* @return null
*/
public function js()
{
if (!scoutwp_display_slider()) {
return;
}
?>
<script>
$(function() {
$('.sp-slider-container').unslider({
speed: <?php
echo intval(get_theme_mod('slider_speed', 0.5) * 1000);
?>
, // The speed to animate each slide (in milliseconds)
delay: <?php
echo intval(get_theme_mod('slider_delay', 5) * 1000);
?>
, // The delay between slide animations (in milliseconds)
keys: false, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: true // Support responsive design. May break non-responsive designs
});
});
</script>
<?php
}
/**
* Adds CSS for header fall back when slider is not displayed or design is below reponsive layout change point.
* @param string $fallback When fallback should be used. 'responsive' or 'all'
* @return null
*/
private function slider()
{
if (scoutwp_display_slider()) {
// slider is visible - use fallback for narrow screens
// background colour allows any semi-transparent gradients to still be visible
$color = get_theme_mod('header_fallback', $this->purple);
if (get_theme_mod('header_fallback_gradient', 0) == 1) {
echo "@media screen and (max-width: 860px) { body > header { background-color: {$color} !important; } }\n";
} else {
echo "@media screen and (max-width: 860px) { body > header { background: {$color} !important; } }\n";
}
} else {
// slider not visible - use fallback for all
$this->add_color('header_fallback', 'body > header', $this->purple, 'background');
// remove all gradients and apply a new one
$this->gradients = array();
// but only if we are set to do so
if (get_theme_mod('header_fallback_gradient', 0) == 1) {
$this->header_gradient('body > header', 'header_gradient', 'header_primary', 'header_secondary', 'none', $this->purple, $this->purple, 'background-image');
}
}
}
