Slider revolution plugin briefly shows all slides on page load - javascript

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.

Related

Buttons position gets change in custom slider in Angular

I have this custom slider
Working Link :
https://stackblitz.com/edit/angular-ivy-rwuxjd?file=src%2Fapp%2Fapp.component.html
Slider is working but Next and previous buttons are not at proper location when we slide it to next or previous slides, Every slide will have different contents and slide height will also change, but issue is when i slide to next or previous then Next and Previous buttons location should be managed automatically but presently when we click on next next while slides are being translated the button moves to top most position. I don't want to fix the button position, It should be managed according to the content height.
Any solution is highly appreciated. Thanks
You need to add some CSS rules for that. Try put a container div around the buttons and the image slider and give it a min-height.
Not perfect but will put you in the right direction.
https://stackblitz.com/edit/angular-ivy-airvm5?file=src/app/app.component.css

How to re-slick with expandable slides

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)?

Prevent playing of animation in different divs(having same animation effect) loading at different screen sizes

I have a landing page that uses three divs. Out of three only one div is set to display at any specific screen size. Each div loads at a specific screen size using media queries.
Div1 ---> upto 800px width
Div2 ---> Between 801px to 1400px width
Div3 ---> Above 1400px width
Every time the page load the background image in my div change from a black and white image to a color image using the CSS filters
The problem arises when I resize my windows. For example, on resizing my window to a smaller screen size/window size; Div2 becomes set to display:none and Div1 is now visible. As a result since the div is loaded, it loads the black and white to color CSS filter effect once again. However this effect is only supposed to play once during page load and not when the browser is resized or if my ipad is rotated(the screen width increases).
Can anyone suggest me a solutions for this. I was thinking of preventing any animations play after a certain specified time (the time that it takes the background animation to play from page load). Can anyone guide me to how this can be done or help with a better solution
One way to do it could be adding a CSS class .animate on parent element and remove that class once CSS filter transition ended. It could be done via transitionend event. More about it here: https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/
Then, in your CSS you could create CSS filter effect on .animate .div1 {...} selector only.

Add captions and slides dynamically in jssor and show full size image in overlay by onclick

I am using the simple jssor slideshow with thumbnails.
In my page I am getting image captions and urls in a javascript array on page load. To use in jssor I gave the images and thumbnails an id and added src to each of them in javascript as follows:
document.getElementById("image1").src = "img/photography/002.jpg";
document.getElementById("thumb1").src = "img/photography/thumb-002.jpg";
On doing this the slides do load correctly in the correct areas but the green loading sign of slideshow remains active and the slides appear to be in the background. However when I give the urls directly in the img tags and not through javascript file it loads correctly without showing the green loading image.
Please provide a solution to this issue.
Furthermore If my slides are less than ten how to remove the extra thumbnail images borders from appearing and how to add more image and thumbnail elements dynamically in jssor using javascript if number of images exceeds that number.
Secondly how to similarly add captions in the jssor slideshow using javascript. Also I need javascript and css code for jssor to display image full size in an overlay on click.
Since I am not using the jQuery version but javascript I would like the solutions in javascript.
Re: loading issue.
Please assign image src before initialization of jssor slider. See
document.getElementById("image1").src = "img/photography/002.jpg";
document.getElementById("thumb1").src = "img/photography/thumb-002.jpg";
var jssor_slider1 = new $JssorSlider$(...;
Re: dynamically remove/add slide
Please add new slide element to 'slides' container or remove unused slide from 'slides' container.
Re: add captions to slide
document.getElementById("slide0").appendChild(...
Re: display image full size in overlay
function DisplayFullSizeImage(slideIndex) {
//do something to display full size image
}
jssor_slider1.$On($JssorSlider$.$EVT_CLICK, DisplayFullSizeImage);
Btw, there is a better way to populate html code for your slider dynamically.
Reference:
Jssor - how to add slides dynamically?
Jssor for jssor slider user is it possible to make a jssor slider with dynamic images

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