Is there a way to slide one big "slide" using swiper.js? - javascript

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.

Related

Whitespace if slick-carousel has variableWidth and dynamic container

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".

Swiper with non-sibling slides

I am using swiper as a slider for my mobile view. Basically, the divs that I would like to apply swiper-slide class are not siblings of each other.
Here's the sample fiddle to demonstrate my use-case: https://jsfiddle.net/2prcosmk/
Whenever I try to use swiper that way, the first slide is shown correctly but I can not perform actual sliding from first to any other slides (as its obvious in the demo fiddle when you try to move the slider). I wonder if its possible. I can not really re-organize my html as I have multiple cards in multiple columns so each of these card would become one slide and so would the entire header.
Can you provide some suggestion here or any pointer on the code sample I've put? Thanks!
Update: I tried nesting the swiper-* classes in https://jsfiddle.net/2prcosmk/2/ and it does create swipers but the nested swiper content are just not displayed. If I make inner swiper direction: 'horizontal', it creates vertical swiper inside horizontal swiper as expected but horizontal inside horizontal does not seem to work.
The nearest I could go was to use nested: true and direction: 'horizontal' in the inner swiper. Here's the fiddle: https://jsfiddle.net/2prcosmk/3/ . One problem probably would be the pagination setup so if anyone can answer how we can combine together the two paginations, that would be awesome but for now, this is good enough.

How to get the number of stacked slides in reveal.js

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.

how to made next code slider for new table

hiii everyone,
i want to make a slider for exercise1 and exercise2 in same html page if i select next then it will appear next exrcise after complete exercise as same as image slider it will not show two exrsice at same time only one will be display at a time and should wiork as slider for next exrecise please help me to develope this
my jsfiddle is :jsfiddle.net/hirenwebdp/Ky8fP/7/
In my jsfiddle you can see that there is two exercise in one html page but it no have slider both are appearing on same so i want to develope slider for exercises 1 and 2
please help me
You can use bxslider for this purpose. It's not just an image slider but also a content slider as well.
Here check the fiddle
Note that I have not implemented any validation. Like go to next slide only on completion of the first exercise etc. Hope you can achieve it on your own.
Include the bxslider js and css file and the plugin like this for eg.
$('.slider').bxSlider({
mode: 'horizontal',
auto: false
});
If you don't want infiniteLoop, you can set it to false too.
$('.slider').bxSlider({
mode: 'horizontal',
auto: false,
infiniteLoop:false
});

Jquery UI Accordion collapse before open

I have a simple Jquery UI accordion with 3 sections. All 3 sections are collapsed in the beginning. When I click on a section header, the section content should show (slide) up. The special thing is now that the section content divs are positioned absolutely over each other.
To make it look good I want that the current opened section toggles completely before the animation of showing the next section begins.
This is what I have made to toggle the section it right now:
$(function () {
$("#accordion").accordion({
create: function (event, ui) {
ui.oldPanel.slideToggle("slow");
},
collapsible: true,
active:false
});
});
You can see how it looks like on:
http://jsfiddle.net/kqMAR/
It appears that the toggle and show up animation start at the same time. But what I want is to toggle it completely before starting the next slide up.
New Answer :
Try this
http://jsfiddle.net/6QJJp/1/
This is what you exactly need
you will need to fix CSS according to you requirement.
$(function () {
$("#accordion").accordion({
animate:{duration:5000},
collapsible: true,
active:false
});
});
Use above function to understand what is happening actually, new section starts opening as soon as the old section starts closing that's why its giving an illusion of incomplete animation. for complete animation place the buttons one below another then you will be able to see proper animation. If you require horizontal arrangement then you can possibly use fading effect that also looks cool.

Categories