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".
Related
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.
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.
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.
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
});
There is a website in which there's a section which I'm trying to replicate within JSFiddle and play around with it.
One thing that I'm having trouble with is this:
These two small <- -> buttons are used to switch between testimonials. This switching is being done by jQuery Cycle Plugin.
The problem is that I can't get these buttons to work within JSFiddle.
I have imported the same jquery.cycle.all.2.74.pack.js file used on the original website, and have also added jQuery. So I don't know what else is missing.
My JSFiddle Replica: http://jsfiddle.net/ahmadka/FsSxd/
Original Website: http://bit.ly/16447fr (To avoid search engine indexing)
This is where these <- -> buttons are used on the original Website:
A couple of things were needed to get this functioning correctly. First of all, you were never calling cycle():
$('.scrollable4 .items').cycle({
timeout: 0,
next: '.next',
prev: '.prev',
fx: 'scrollRight',
easing: 'easeInOutBack'
})
Secondly, to mimic the effect you're looking for, you need the easing.js plugin (see external resource in jsfiddle linked below).
Finally, within your CSS, you can't float the elements, they need to be absolutely positioned and given a height of 100%.
#divleftcontent2 .scrollable4 .items {
position: absolute;
height: 100%;
}
There are other ways to fix the height issue but that is a different question.
I have updated the fiddle to show what I think is the final version you are looking for: http://jsfiddle.net/FsSxd/8/