We Keep Coding

foundation 6 orbit start autoplay on element click

I don't seem to find the controls for this, like for instance with reveal modals, where I can give any element the data-reveal.
What I'm trying to achieve is loading the page without autoplay, then setting the play of orbit on a button.
So far I tried to trick it using data-autoplay=true/false and data-timer-delay= really high/ 2000
$('#startOrbit').click(function(){
$('.orbit').attr('data-timer-delay',2000);
});
so the attr goes in but the orbit does not start...
what combinations of options can I use?
thanks

I've created a codepen example (link) with an orbit sample slider and the functionality that you want to achieve.
$(document).ready(function() {
var elem = new Foundation.Orbit($('.orbit'), {'autoPlay': false});
$('#startOrbit').on('click', function() {
elem.options.autoPlay = true;
elem.options.timerDelay = 2000;
$('.orbit').foundation('geoSync');
});
});
Firstly, i initialize the orbit slider with the auto play option set to false.
Then i attach a click event listener on the button element with the #startOrbit id, change the two options and finally call the geoSync method that sets a timer object on the orbit and starts the counter for the next slide.

Refreshing Owl Carousel 2

I have 3 divs that activate slide toggle when I click on them. And inside every div there is owl carousel slider.
If I trigger one div the slider shows, but when I click other div slider doesn't show unless I resize the window.
How can I trigger refresh on slide toggle for the slider in every div?
I tried with this on slide toggle but it doesn't work:
$('.owl-slider').trigger('refresh.owl.carousel');

You trigger with a class. You can try with a variable:
var $owl = $('.owl-carousel').owlCarousel({
items: 1,
loop:true
});
$owl.trigger('refresh.owl.carousel');

if .trigger('refresh.owl.carousel'); didn't work with you, you can use
window.dispatchEvent(new Event('resize'));
which will make the carousel refresh automatically.

I want to set new html content for my carousel and the above answers did not worked for me
so I solved my problem with another way
first, define a function to start owlCarousel and run that function
let myCarousel; //a variable thats hold owlCarousel object
function myCarouselStart() {
myCarousel = $('#my-carousel.owl-carousel').owlCarousel(setting);
}
$(document).ready(() => {
myCarouselStart(); // run owl carousel for first time
});
then when you want to refresh the carousel use the below code
myCarousel.trigger("destroy.owl.carousel");
$("#my-carousel").html(newHtmlContent);
myCarouselStart();

Randomize slides in reveal.js

I have a reveal.js presentation with approximately 300 slides. The purpose of this presentation is to cycle slides in "kiosk mode" on a monitor behind a conference booth.
To create a "kiosk mode" I've got:
Reveal.initialize({
controls: false, // hide the control arrows
progress: false, // hide the progress bar
history: false, // don't add each slide to browser history
loop: true, // loop back to the beginning after last slide
transition: fade, // fade between slides
autoSlide: 5000, // advance automatically after 5000 ms
});
This works very well, but I'd like to randomize the slides. The slides are currently just a list of 300 <section> tags in the index document - they aren't being pulled from anywhere external. Currently random: true isn't a configuration option in reveal.js.
The display order of fragments can be controlled with data-fragment-index. Is it possible to do something like that with sections? Is there a way to trick reveal.js into randomizing my slides?
My preference would be to shuffle them each time around - that is, to show slides 1-300 in random order, and then shuffle them, and show 1-300 again in a different random order. I would also be happy with just jumping to a random slide for each transition, though.

While Reveal itself does not have this functionality built in, it does let you set up event hooks to do actions when all the slides are loaded, this means JQUERY TO THE RESCUE!
You can combine Reveal's "All slides are ready" event with simple javascript to reorder all the sections, here's a simple PoC:
First import jQuery, I did this by adding it directly above the import for js/reveal.min.js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Then, set up an event listener:
Reveal.addEventListener('ready', function(event) {
// Declare a function to randomize a jQuery list of elements
// see http://stackoverflow.com/a/11766418/472021 for details
$.fn.randomize = function(selector){
(selector ? this.find(selector) : this).parent().each(function(){
$(this).children(selector).sort(function(){
return Math.random() - 0.5;
}).detach().appendTo(this);
});
return this;
};
// call our new method on all sections inside of the main slides element.
$(".slides > section").randomize();
});
I put this right after declaring my Reveal settings and dependencies, but I'm pretty sure you can put it anywhere.
What this does is waits for all javascript, css, etc to load, manually reorders the slides in the DOM, then lets Reveal start off doing its thing. You should be able to combine this with all your other reveal settings since it's not doing anything disruptive to reveal itself.
Regarding the "shuffling them each time around" portion, the easiest way to do this would be to use another event listener, slidechanged. You could use this listener to check if the last slide has just been transitioned to, after which the next time slidechanged is called you could simply refresh the page.
You can do this with something like:
var wasLastPageHit = false;
Reveal.addEventListener('slidechanged', function(event) {
if (wasLastPageHit) {
window.location.reload();
}
if($(event.currentSlide).is(":last-child")) {
// The newly opened slide is the last one, set up a marker
// so the next time this method is called we can refresh.
wasLastPageHit = true;
}
});

As of reveal.js 3.3.0 there is now a built in helper function for randomizing slide order.
If you want the slide order to be random from the start use the shuffle config option:
Reveal.initialize({ shuffle: true });
If you want to manually tell reveal.js when to shuffle there's an API method:
Reveal.shuffle();
To shuffle the presentation after each finished loop you'll need to monitor slide changes to detect when we circle back to the first slide.
Reveal.addEventListener( 'slidechanged', function( event ) {
if( Reveal.isFirstSlide() ) {
// Randomize the order again
Reveal.shuffle();
// Navigate to the first slide according to the new order
Reveal.slide( 0, 0 );
}
} );

Slider with dynamic content is not working

I'm using Bxslider to display my images and it is working fine for the predefined images.But now, I want to get the images dynamically from the URL.
I used code like:
$('.bxslider').bxSlider({
onSlideNext : function($slideElement, oldIndex, newIndex){
$.get(myUrl,'',function(response){
$('.bxslider').html(response);
});
}
});
and it is appending the images to the slider, but the slider doesn't include those images.I also tried with reload like
var slider = $('.bxslider').bxSlider({
onSlideNext : function($slideElement, oldIndex, newIndex){
//do your ajax here, for example:
$.get(site_url + 'content/content/test','',function(response){
$('.bxslider').append(response);
slider.reloadSlider();
});
}
});
but still working.Can anyone suggest me any solution?

The slider loads slides during initialization. If reloadSlider() was not used then the slider does not know that there is a new slide was added. Also there is a newIndex property that sets the next slide.
newIndex: element index of the destination slide (after the
transition)
So when you click on Next at the end of the slideshow then newIndex=0 and even you will use reloadSlider() you will go to the slide #0. The only way here is to use goToSlide()
slider.reloadSlider();
slider.goToSlide(oldIndex+1);
Demo: http://jsfiddle.net/Gg2Sk/
Generally speaking, the idea to reload a slider on every new slide is not good at all. You might consider to load initially all slides but do not load images until they are not visible.

bxslider wont stop

I am having an issue where the slider will not stop auto play when I click a link on my navigation menu. I start the slider via:
$('.bxslider1').bxSlider({auto: true,autoControls: true});
It auto plays and works, but if I try to stop the slider by creating an onclick function or .click() jQuery like:
$(".nav-portfolio").click(function() {
slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
It seems to do something for a split second and then start again. The reason I need to stop the slider is, I am using jQuery waypoints for anchor links to scroll smooth horizontally, and the panels start moving back and fourth by 1 or 2 pixels and its really annoying for the user.
Any help would be appreciated.

Try modifying your code to be:
$(".nav-portfolio").click(function() {
$('.bxslider1').stopAuto();
});
You were previously using the example from the bxSlider webpage which assumes you haven't already initialized the bxSlider. Since you previously initialized it perhaps the second initialization isn't handled gracefully.

Try adding var keyword before the slider declaration.
$(".nav-portfolio").click(function() {
var slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});