How to re-slick with expandable slides - javascript

I have created a slick slider that contains expandable slides. A slide contains and image and a div with some text in it.
The div has a width of 0, and when clicking on the image the div expands. The slider fits 9 slides before arrows/dots are needed, i.e. slidesToShow is set to 9.
If I do not However, when the slide expands, the slides at the end are no longer visible and arrows are required.
I tried playing with a few different settings but nothing seems to work. I thought setPosition might do it, but no luck.
What is the best way to detect when the slides are no longer fully visible within the slider, and how would I get the arrows to appear in this situation and disappear when the slides are collapsed (i.e. they are all visible within the slider)?

Related

Slider revolution plugin briefly shows all slides on page load

I have a slight problem with slider revolution plugin, where on page load, I can see for half second captions for all slides. They disappear after that and then the first slides loads normally (first the dummy loader and then actual image with captions and animations). Is there a quick fix to get rid of this problem?
Thanks
Set a height on the containing div and put 'overflow-y:hidden'. What this will do is only show the first loaded slide, and the others that load won't be visible.
If you match the height of the containing div to the height of a slide, then it should only show the first slide.
When it scrolls (assuming that the slides are all the same size and the carousel doesn't resize on each slide), it should then show the next slide in the correct height.

JSSOR slider - using $Align on thumbnails slides on different direction

I am using the JSSOR slider to show 4 items like a gallery (as in the http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html example). Only difference is that I use $Lanes: 1 and $Cols: 3.
The idea is to show 1 item in the main area and 3 on the thumbnails area. It all works perfectly well.
However, I want these 3 "thumbnails" to be all the remaining except the one being shown in the main area. To do that, I set a value in $Align (for example, 100) but from a certain value on, the thumbnails stop moving bottom to up and start moving up to bottom. How do I keep the "direction" in which the thumbnails move? The indexes are all correct and the click takes the slider to the correct position but I really didnt want the thumbnails to move differently just by using the $Align.

Stellar.js responsiveness without resizing the window

Okay this is a rather complicated setup/question so I will try to explain it as clear as possible. Right now stellar parallax is working great on my site with no issues whatsoever. this was accomplished by setting the responsive property in stellar.js to true which makes it so that the background image follows the div when you resize the window. Because the issue before was that resizing the window was bad because stellar vertically aligns the background images in a certain way so if you resized the window the div in question might end up in an area where the background is repeating or in an empty spot(if you had no repeat on), it just wouldnt be aligned with the background image anymore. Responsiveness=true fixed this.
However here is the new issue. I have a section on my website where 3 divs are set to display: none by default. 3 buttons, respectively, toggle their display. Toggling their display makes their parent div much longer therefore pushing the rest of the content of the page further down. This pushes the stellar divs out of position with their background images again and i can see areas where the image repeats or are blank(if you have no repeat). However if you resize the window after you toggled the three hidden divs, the stellar divs will automatically fix itself and realign the images as a result of it picking up the responsiveness. I was wondering if there was anyway perhaps I could make toggling the hidden divs trigger this realignment without the user having to resize the window(he/she wouldnt know he/she had to anyway)?
Perhaps a way to refresh a specific part of the page(the stellar divs)? Or perhaps a function to resize the window by like a pixel or even 0 pixels just to trigger the responsiveness?
Thanks in advance, I hope everything makes sense.

hr behind div in mobile

I have code working on all desktop brosers, but in mobile it has a bug.
The lines are hr elements and the square in the middle is a div. The div has position: relative and fixed width and height. I don't use z order.
On mobile all I can do for now is display the background of the div element with certain color, and I can see its indeed occupying the space. I also see in this case, where I use background color, that the hr appears behind it.
Additional information which could be useful: The div in the middle is part of an horizontal ul element, which contains list images with items and also text. Also called content slider ;)
When I initialize the slider with some image slides in it, on mobile, the layout is always displayed correctly. Also when I'm viewing only content slides. But when I put only content slides from the beginning, this error appears.
I don't know what it is... tried getting this behaviour with desktop browser, to find the cause, but didn't success. I don't know why the hr goes there. There's no relation with the content in the slide. The position where the hr appears is somewhere in the middle, between the text...
Thanks in advance.
Without seeing any of your code, a "best guess" based on past experience is:
It looks like you might have floated content inside of your slider, and the slider itself is not "cleared".
If you have any floated content inside of the slider, make sure the outer slider div is cleared.

jquery, jcarousel full width with window area

I've got a jcarousel object on my page that is set to 960px wide and centered, I've got overflow visible on the .jcarousel-clip with it set to 100% width so it's full window width.
I essentially want the run off from the carousel to always be visible, just like the new bbc beta slider, so I've set "wrap: circular"
If i set the start slide to 2 (not really what I want to do), the slider visually looks how I want it to, if I then navigate left(prev), the slider no longer goes to the edge of the window, when I then click prev again it briefly flashes the slide and moves it across. same when you go next a few times, you eventually come to a gap at the right of the screen.
So I guess I need to know if...
a) on jcourousel init, can you have the last slide staged to the left and still have start slide as 1 and...
b) can you stage the slides to the left and right on animation finish rather than on animation start?
have a look at the js fiddle example to see what I mean... http://jsfiddle.net/stikoo/3T97L/7/
Thanks in advance :D

Categories