I'm working on a custom jQuery plugin to convert a Bootstrap grid into a carousel for mobile devices. For example, let's say I want to display a group of div's as a regular grid for viewports over 1000px wide, and then transform those div's into a carousel for viewports under that. This is the interface:
$(".row").gridCarousel({
threshold: "1000px", // Grid / Carousel threshold (viewport max-width)
indicators: true, // Insert carousel indicators?
controls: true, // Insert carousel controls?
carousel: {interval: false}, // Configuration object passed to Bootstrap's carousel
});
So far, so good. The issue I'm running into is that the carousel "active" indicator is not being cycled after crossing the viewport-width threshold for a second time.
Steps:
Start with a desktop viewport, see the content as a grid.
Switch to a narrow viewport, and the content is transformed into a carousel. Indicators work fine.
Switch back to a wide viewport. Content is displayed as a grid again.
Switch to a narrow viewport again, the content is transformed into a carousel, but the "active" indicator is not moving. You can still click on the indicators and you'll be taken to the correct slide, but the "active" class is not being updated.
I've setup a demo for the plugin. It contains the complete source of the plugin and then a call to it at the end. You can resize the CodePen viewport to see the effect and reproduce the problem.
Related
I have a vertical swiper slider which on mobile(only) takes almost full height on devices with smaller heights.
What I want to achieve is to allow user to scroll past the slider once they reach the end slide and still scroll further down.
I have set a codesandbox which explains my problem.
Link : https://codesandbox.io/s/swiper-vertical-forked-18ftz?fontsize=14&hidenavigation=1&theme=dark
You can find a red area under the slider which becomes inaccessible on mobile phones when the height of the slide becomes > mobile viewport.
What I have found until now ?
I found a property name which does exactly this touchReleaseOnEdges. According to the documentation if the value of touchReleaseOnEdges is set to o true then it ...
Enable to release touch events on slider edge position (beginning,
end) to allow for further page scrolling
But I am unable to make use of it to solve my problem.
How can I make this work ?
My jquery draggable is working fine in a plane html page (where reveal.js is not present).
In my reveal js presentation I use embed=true [means I didn't use the full page for each slide. I used only a part of the full page for each slide].
Inside any Reveal js slide the draggable item is not moving with the cursor. It's only accurate when the cursor and draggable item is in it's beginning position. But when I pick draggable item and move cursor, the draggable item moves far from cursor.
Finally I found the bug after three days of panic. The jQuery draggable is fetching problem inside auto scaled elements. And the Reveal.js slides are auto scaled by default. I just put the bellow code inside Reveal.initialize. This solved my problem.
minScale: 1,
maxScale: 1,
By the way, after solving the draggable issue, now all my slides contents changed their sizes and positions. Now I need to fix them.
Happy coding :)
I have slick slider with adaptiveHeight attribute set to false. So, if i have small image in slick container first slide - it will be centered vertically, and left areas will be filled with background color (like in this image).
How can i calculate slick slider area height before slick is loaded to prevent 'jumping' on load? Do anyone know, how slick calculates image height and width in slick container? Any ideas?
You could wrap slick with a plugin like ImagesLoaded to ensure your images have a height before initialising Slick. If you don't want the flash of unstyled images this will create, you'll need to apply some styles to hide them initially (e.g. position them absolutely off the left side of the screen) and then remove these styles when your images are loaded, something like:
$('#slider').imagesLoaded( function() {
// remove your hiding class
// initialise slick
});
In the example, video slider is using bullet navigation, I have tried copying Thumbnail navigation codes from 'image-slider-2' in the example folder to the video slider file, but I encountered several problems:
I get an error message saying 'thumbnavigator' container height is not set, I have to manually set its height. But what I don't understand is in the example file, it is not required to set the height of thumbnavigator container, why?
After I set the height, the videos are working. However, the thumbenail images are not showing, leaving a blank navigation bar.
Is it possible to set thumbnail navigation for the video slider?
Besides, an off-topic question: Can transition effects be applied to video slider?
The video slider is a normal slider which contains a video element in each slide.
Actually, you can place everything you like in any slide.
So, the video slider is fully customizable as well.
Reference:
http://www.jssor.com/development/slider-with-thumbnail-navigator-jquery.html
http://www.jssor.com/development/slider-with-caption-jquery.html
I need some help using this jQuery Carousel: http://coolcarousels.frebsite.nl/c/50/
On the page is a draggable image slider, however my wish is for when the drag has stopped (i.e. the user has lifted their finger of the left click), the slider doesn't snap to an image (the slider stays put at its current location).
i suggest
Swiper, if you use it in 'Free' mode then you can get the effect your after