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
Related
I got a problem with the Slick Slider.
I want to change the 'slidesToShow 'option on every Slide.
Each slider page represents a group and only the right elements should show up on that page.
Each slide got a data-group attribute, which i´m using to count the elements and pass it to 'slickSetOption'.
https://jsfiddle.net/xnnm645x/3/
$('.slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
checkSlideToShow(nextSlide);
});
Why is there on the second page of the slider, still 4 elements instead of 3?
And if you scroll to the last slider page you can see how it change the width of the divs and suddenly becomes 3 slides. Is it possible to get rid of that transition effect?
Your code is not working because slick will inject 2 div in your .slider element for its functionality.
you can check it by logging in console
console.log($('.slider div')) // count will be 11 and it will break your logic.
You need to found the div with data attribute only.
$('.slider div *[data-group]') // count will be 9
Working example : https://jsfiddle.net/fydo8pt3/
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 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/
I was wondering what could be the easiest way to add animation to some tab navigation.
I'm developing a small documentation website, Documentation, and as you can see I have that small arrow that adds up to the tab when navigation.
Well, what I was thinking is what if I can do it like this : Sample ; I tried something, I added a span via JS and then on click event ( applied to the li elements ) trigger the arrow animation. The thing is that doing that I stopped the script which is responsible for making the tabs work as they do stop.
So is there another way to achieve something like that ? And what would be the logic ?
Simplest would be to add a narrow absolute position div inside st_slide_container and position to the right. Inside that new element add another element that is just large enough for your arrow icon and is position absolute.
Either use callback of tabs change( depends on what is available in plugin API) or add another click handler to a.st_tab.
In this event handler you can get the index of current tab and apply animation of position top to the small arrow element
EDIT: Example of click handler to get index which would be multiplier for the top animation
$('a.st_tab').click(function(){
alert($(this).parent().index())
})
I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/