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.
Related
I want to truncate the text of the Bootstrap carousel .carousel-caption element. I am using shave.js to truncate the text. However, the truncating only works on the first .carousel-caption element.
I`ve created a jsfiddle to demonstrate my problem: jsfiddle
When I remove the CSS class carousel-inner from the carousel, the truncating works perfectly on booth .carousel-caption elements.
I am not pretty sure about the issue, but I think it's due to the dynamic behavior of the carousel so the shave code will only work on the first caption because it's visible and its height is set so your code should also be dynamic to call the shave funcion for each slide.
An idea is to use the event provided by the carousel component and call the shave function there.
$('#carousel-example-generic').on('slid.bs.carousel', function () {
$(".carousel-caption").shave(70);
})
slid.bs.carousel : This event is fired when the carousel has completed
its slide transition. ref
Full code : https://jsfiddle.net/dpnpo4o7/2/
I used the jQuery version of the plugin in the code above but it works the same with the JS version:
$('#carousel-example-generic').on('slid.bs.carousel', function () {
shave(".carousel-caption", 70);
})
Full code : https://jsfiddle.net/dpnpo4o7/3/
I went through the fiddle. And shave must be finding those second captions but since it is invisible at that moment, it is failing to do that.
Solution: You might want to capture the prev and next events and then try your code.
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.
I am trying to create something similar to this effect, where you can click on the hamburger icon and a menu slides out:
http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/
I don't need the hover event, just the click.
My problem is that in the above example, there is already space allocated for the menu to live. In my situation, I need my main content to shrink to make room for the menu. So, using Bootstrap, I am switching my main content from the "col-md-12" class to the "col-md-11" class, so that my menu with the "col-md-1" class can fit:
$('#toggle').mousedown(function () {
$('#mainMenu').toggleClass('col-md-1');
$('#mainMenu').toggleClass('zero');
$('#mainContent').toggleClass('col-md-12');
$('#mainContent').toggleClass('col-md-11');
});
I have attempted something here:
http://jsfiddle.net/955RV/
But it's not quite right. The negative margin trick is because I'm not sure how else to bring in the menu from the left. I also am not happy with the right side of the content shrinking in animation before the menu appears and would prefer it to happen simultaneously. My guess is that they are technically happening simultaneously, but that the margin animation takes longer to complete than the width animation.
Any help would be appreciated. Let me know if I can help clarify anything.
This looks like a great place to start:
http://tympanus.net/Blueprints/SlidePushMenus/
Notice the difference between the "push" and "slide" type menus. I was looking for "push."
Code explained here:
http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
I have created a web page which uses the jQuery Tools' Scrollable component, and the page is based on the minimal setup demo. As in this demo my page also uses scrollable items with room for five thumbnail images, but when my page loads for the first time I want only a single scrollable item containing only three thumbnail images, with the remaining two image slots empty. I assumed that I could simply replace the three scrollable item divs from the demo with a single scrollable item div and everything would look fine, however when I do that I end up seeing inoperable left/previous and right/next icons, even though there are no previous or next scrollable items to scroll to.
I have an example of what I'm trying to do on the jsfiddle site here. It's essentially the above referenced demo with the non-applicable scrollable item divs and child imgs commented out.
How can I initialize the scrollable such that I only have a single scrollable item on the page without having the non-applicable left/previous and right/next icons appear?
Thanks in advance for your help, suggestions, etc.
best I can come up with is
if($(".scrollable .items div").length < 2) $("a.browse").hide();
after the initialization.
I wanted the browse buttons to be hidden by default, then only display them if needed.
In the css, default the a.browse to visibility: hidden
Then in the initialization:
$(".scrollable").scrollable().each( function() {
var scroller = $(this).data("scrollable");
scroller.getNaviButtons().css('visibility', 'visible');
if (scroller.getSize() <= 1) {
scroller.getNaviButtons().addClass('disabled');
}
});
This seems a bit hacky, but avoids temporarily displaying the browse buttons if they are not going to be seen.