Hello, I really like this slider http://yootheme.com/demo/wordpress theme avanti , where the nav control the 2 panels, image change on the left and image on the right. But even looking the markup i don't understand how its done...
Hey Alex,
Currently I don't think this type slider is available in UIkit Core, that said if you inspect the page you can see that they have added few lines of jQuery, see the screenshot here. As you can see they are using the beforeshow.uk.slideshow event, which you can do too to build all sort of complex sliders.
UIkit is very well built and super easy to extend, this is a great example 😉
Have fun,
Thank you, I'm going to look at this
It doesn't work for me 🙁 I have tried to do the same code, but it doesn't work, perhaps there is more additional code to add...
Hey Alex,
Here is an example proof of concept you can add to your functions.php, I will let you move the JS in a js file and organise your code according to your need:
add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );
function example_enqueue_uikit_assets() {
beans_uikit_enqueue_components( array( 'slideshow' ), 'add-ons' );
}
add_action( 'wp_enqueue_scripts', 'example_enqueue_assets' );
function example_enqueue_assets() {
wp_add_inline_script(
'uikit',
"(function($){
$(document).ready( function() {
$('#example').on('beforeshow.uk.slideshow', function(e, next) {
$(this)
.find('[data-uk-slideshow]')
.not(next.closest('[data-uk-slideshow]')[0])
.data('slideshow')
.show(next.index());
});
});
})(jQuery);"
);
}
add_action( 'beans_main_prepend_markup', 'example_custom_slideshow' );
function example_custom_slideshow() {
$total = 10;
?>
<div id="example" class="uk-grid uk-grid-width-large-1-2 uk-grid-collapse" data-uk-grid-match>
<div>
<div class="uk-slidenav-position uk-panel-box uk-panel-box-secondary" data-uk-slideshow>
<ul class="uk-slideshow">
<?php for ( $i = 1 ; $i <= $total; $i++ ) : ?>
<li>
<h3>Slide left <?php echo (int) $i; ?></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudt.</p>
</li>
<?php endfor; ?>
</ul>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
<ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
<?php for ( $i = 0; $i < $total; $i++ ) : ?>
<li data-uk-slideshow-item="<?php echo (int) $i; ?>"><a href=""></a></li>
<?php endfor; ?>
</ul>
</div>
</div>
<div>
<div class="uk-panel-box uk-panel-box-primary" data-uk-slideshow>
<ul class="uk-slideshow">
<?php for ( $i = 1 ; $i <= $total; $i++ ) : ?>
<li>
<h3>Slide right <?php echo (int) $i; ?></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudt.</p>
</li>
<?php endfor; ?>
</ul>
</div>
</div>
</div>
<?php
}You will see that slider right also change when navigating slider left.
Have fun,
Thank you so much, i am going to test that as soon as i have a moment !
It works, i have put the js in my theme.js file, and apply it to my slider 🙂 Thank you again, this type of slider is really nice and usefull !
I realize that if i put the js in my theme.js (it is corectly enqueued) file it doesn't work, so does it need to be inline ? and why ?
Sorry, it's just me who made a mistake enqueing my js file 🙁