I'm trying to make a remote to a reveal.js presentation using socket.io.
I want to get the number of slides so I'll be able to change the current slide on the screen.
My problem is that I don't know how to get the stacked slides, I do know how to get the normal one (Reveal.getState()) but I don't know if it returns the stacked slides and how.
Thank you for your time.
Found the solution,
It turns out that Reveal.getState() returns an object with the following properties:
{ indexf: undefined, indexh: 0, indexv: 0, overview: false, paused: false, _proto_: Object }
I had to change the indexh value to change the horizontal slides and the indexv value to change the vertical slides.
NOTE:
For those who might use this when adding to the indexv it goes to the slide below and when subtracting it goes to the slide above.
Related
My problem is to place swiperjs slides on a circle.
Everything I've been able to achieve so far can be seen here: https://codesandbox.io/s/swiper-effect-creative-forked-vvyl73?file=/index.html
The problem is that the company logo should be placed between the two central slides, and the slides should ride around it. Should by smth like this:
Maybe someone has dealt with this problem and knows how to solve it?
Or maybe there is an alternative plugin that simplifies this task?
So, had to create a new effect for the Swiper, a duplicate of "creative".
In this effect use the variable "progress", which shows where the slide is at the moment. 0 is the center, 1 is the first element, -1 is minus the first element. If progress < 0, you subtract 0.5, and if it is greater than 0, you add 0.5.Thus an empty space is formed just in the center.
I need to make slick slider where next slider from right is cropped by half, but not from the left side. I did it with set up slidesToShow: 1.5, like in the screen below.
But also I need to make that if it's the last slide, then the previous slide should cropped by half and after the last slide there is not empty space, like in the screen below.
And if I swipe back it should be like in the first screen, cropped by the right side only.
How can I achieve this? I was looking for examples but didn't find much.
Just add folowing css
div.slick-list{
padding:0 50px 0 0;
}
I have variable number of cards and also the container is of dynamic dimensions.
So I set variableWidth: true and as per requirement infinite: false
What I have is below issue where I have to solve.
I want the first and last slide to stick to edges.
I am using Jquery Slick Carousel
JS Fiddle to quickly check the issue
https://jsfiddle.net/34mjkz38/
Check the code at this merge request, it worked for me.
https://github.com/kenwheeler/slick/pull/2635
He adds a new option called "outerEdgeLimit".
I'm trying to find a way to slide my data within a container without having to use the default horizotal scrollbar.
So I tried using swiper.js. It works - kind of, but the problem is that I can't freely slide it back and forth without the "slide" automatically sliding back.
I made a fiddle here to test.
Here is the JS code I'm using:
var swiper = new Swiper('.swiper-container', {
freeMode: true,
freeModeSticky: false,
grabCursor: true
});
Is it possible using swipe.js to freely moving the content back and fort?
If no, is there a better way to do this?
It's because you only have one slide with the table. I edited your fiddle to add a <div class="swiper-slide"></div> before the table slide and it stopped resetting back to the start.
In my simple javascript slide show I just want it to cycle through (at max of 5) divs that auto populate from a database. It populates and starts doing the slide show fine, but once it is suppose to loop it goes to a "blank" slide, then to the last one again and the it start cycling normally forever.
With this example I have to look at and play with it I am using two divs.
It can be viewed here: www.codekrewe.com/fbla
and the javascript code is here:
$(function() {
$('#dateHolder .featureHolder:gt(0)').hide();
setInterval(function() {
$('#dateHolder .featureHolder:first').fadeOut(1000)
.next('.featureHolder').fadeIn(1000)
.end().appendTo('#dateHolder');
}, 3000);
});
EDIT: I changed the JavaScript, the JS in the code block above is what I have now. However, I get the same problem.
Now with three divs in the slideshow you can see it is just the first slide that gets blanked out on the second loop through.
Well I found the fix for this, not quite sure why it had such an effect.
After all of the divs were called, a little <h1> was made to say featured divs in the holding box. Well that was getting pushed up with each slide changing, and once it reached the top it caused a blank slide.
So moving the <h1> to the top before the divs were called, fixed the blank slide issue.