I am using the swiper js: https://idangero.us/swiper/api/ but the problem is
when used the initial loading shows the single carousel item first then remaining items starts showing up. Which behaves like a glitch.
Making is clearer. If i load the website i will only see the first item in the carousel (in the red box) then it will change to layout like in the image with 4 items.
I could find that if i set max-width:25%; that will fix the issue for this case. But if there are 2 items in the carousel per view that css code will fix the width 25%.
Is there any way to fix it? Please help
Change the point of the initialization function call to the point at which all images were downloaded.
$( window ).load(function() {
var mySwiper = new Swiper ('.swiper-container', {
// ...
})
});
Related
I have a master details component who load a content from a local JSON and change JSON object and Url on buttons click (next/prev) via pipe in Anguar 7. Also I use ngx-slick carousel. On init page loading image isn`t show (you can see just a slider dots like on screenshot below), when go to next page and than on previous one via buttons image show normally. This is only happens when set adaptiveHeight option to true in the carousel setting otherwise everything is great.
But I need that option set to true, because images not have same size.
Slider Issue preview - just show a blue dot
Slick list div preview here - div with slick-list class have a height of 1px in inline style.
After Google / StackOverflow research I found that is might because image loading before slider. I try different ways to solve this but unfortunately with no success. :(
Component Url:
https://github.com/markostalma/markostalma-dev/blob/master/src/app/work/work-single/work-single.component.ts
Pipe Url:
https://github.com/markostalma/markostalma-dev/blob/master/src/app/pipes/master-details.pipe.ts
One of site url to see issue:
https://www.markostalma.ninja/selected-work/gizmosphere-infographic
Thanks in advance!
Bug Fixed! This is solution for now.
// Fix slider adaptive height bug on init
slickInit(slideEvent) {
slideEvent.slick.$slider.find('img').first().on('load', () => {
let height = $('.slickImg-item').height();
$('.slick-list').height(height);
console.log("Slider Init");
});
I am using bootstrap carousel but I need a very simple thing to be done. My carousel is placed in the bottom of the page and I want to stick to the 1st slide of the carousel until the user reaches this section. As soon as the user will reach the section,the carousel will start playing. I do not know how to achieve this. Please help me with ideas.
Thanks in advance!
According to http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
So all you need to do is to add that class when the user scrolls to that element...
As in, for the example given on the link I mentioned above, the element with id='myCarousel' must be given the .slide class.
Hence, using the jquery, the code will be as follows:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=($("#myCarousel").offset().top){
$("#myCarousel").addClass("slide");
//ANYTHING YOU WANT TO DO WHEN THE USER SCROLLS TO YOUR CAROUSEL.
}
})
});
NOTE: CODE NOT TESTED.
You can do it like that.
After doing quite a lot of research,finally I got this solution.I have mangaged to go back to the first carousel when I reach a specific portion.(Here the section where carousel does exist)
My code is:
$(document).ready(function(){
$(window).scroll(function(){
console.log($("#myCarousel").offset().top);
if($(window).scrollTop()>=$("#myCarousel").offset().top-70 && $(window).scrollTop()<2450 )
{
var index = $('.slides li').index($('.slides li:first'));
console.log(index);
$('.flexslider').data("flexslider").flexAnimate(index);
}
})
});
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 am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks
The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.
I have a slide show component I've been working on that is a mash up of jcycle and jcarousel. It works rather well, yet there is one last feature I'd to add that I cannot figure out. Right now if you click on a thumbnail it will center it in the carousel as long as it's not the first 2 or last 2 thumbs. This works great and I like centering the active thumbnail of the slide show.
The problem I'm running into is if the user hits the play button on the slide show or the next and previous slide buttons, the slide show cycles, yet the active slide thumbnail does not center in the carousel. I've tried unsuccessfully to check if the thumbnail anchor has class, activeSlide, and if so to center it, yet cant seem to get it to work.
Here is a link to the demo page I've been working on.
http://brettjankord.com/standards/slideshows/jslideshow-test2.php
Any help is greatly appreciated!
Put the following at the end of your onBefore method
var carousel = $('#mycarousel').data('jcarousel');
var activeIdx = $('#mycarousel img[src="'+next.src+'"]').closest('a').data('index') -2;
if (carousel)
{
carousel.scroll(activeIdx);
}
Demo at http://jsfiddle.net/JupPn/1/