We Keep Coding

How to fix Swiper Js initial loading for a Carousel?

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', {
// ...
})
});

First slide doesnt show in jQuery Royal Slider within tabs

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.

Jquery drag and drop on tabs

I have 4 tabs and a products list. What I need is to be able move those items from the list to each one of those tabs. The problem I have is that when I start dragging and hover over tab 1 it shows up the domId of the 3rd tab or 4th sometimes even its own domId too and if I drag and hover over 2nd tab, it shows the 4th tab id. Not sure why this is happening. I tried it on a completely separate html page too.
Here is the jsfiddle sample code url

You need to move the code that changes width to 50px into the start function instead of the drag function.
start: function (event, ui) {
$(this).css({
'width':'50px',
'z-index': '50'
});
}
The create method, drag method, and rel_left and rel_top variables aren't needed either. The reason is that draggable needs a width when it starts, by the time it runs the draggable method its still thinking that width is 100%, which is throwing things off.
http://jsfiddle.net/3em7obvL/2/

jcarousel horizontal slider with two rows

I have downloaded jcarousel slider but I want two rows to appear and on clicking on next or previous both rows should move simultaneously, i do not know the concepts of javascript and jquery so please tell me the steps to be taken.
Thanks in advance

You mean you need 2 sliders. if you click on 1st slider's next / prev arrow, than both carousal should be effected. is that so?
If yes, then you have to try carousal's inbuilt function for customization.
add 2 carousal slider in your code
hide carousal slider arrow for 2nd slider
now do custumization for your 1st slider arrows. i.e. trigger 2nd
slider whenever 1st slider is triggered. you can try to put your
code inside carousal function:
$('.jcarousel').on('jcarousel:scroll', function(event, carousel, target, animate) {
// "this" refers to the root element
// "carousel" is the jCarousel instance
// "target" is the target argument passed to the scroll method
// "animate" is the animate argument passed to the scroll method
// indicating whether jCarousel was requested to do an animation
});
you can find various customized function from here: http://sorgalla.com/jcarousel/docs/reference/events.html

What do you want to show in the second row?
Is it some info of the current image like description or the count e.g. 2 of 7 or one more set of images.
If it is info(description) you can create a div after your jCarousel container and change the content of the div on next and previous button click callback function.
Post some code to get a clear picture

How do I put a slide counter in nivo slider?

I am building a website with nivo slider image gallery. Its a briliant slider, but i need a slider counter like 1/6 (slide 1 of 6). I searched in the support page and google but all what i have found was the same question unanswered...

Use one of the nivo callback options.
$('#slider').nivoSlider({
afterChange: function(){
$('#counter').text( $('.controlNav .active').text() );
}
});
After each slide change it will take the text contents of the active nav control and use it to populate your counter. If you would like to provide a more specific context I could offer an explicit solution.