Crossfade effect with carousel not working properly - javascript

I have two caroufredsel sliders with the same effect:
the first slider where on the homepage doesn't cross fade
http://www.clubseekr.com
however on another page where the same slider is used with same effect it does work
http://clubseekr.com/tokyo/unit/
In order to go to the slider just click on one of the 4 photos underneath the heading: Photos
In order to get it with the desired crossfade effect I use the following code
$('#carousel').carouFredSel({
scroll : { fx : "crossfade" }
});
The total code is a bit more than that but this should give the effect as well on the homepage.
Is there something i am doing wrong in the slider?

most probably you have a Hero-rotating bar in your home page and that JavaScript functions conflict with your carousel JavaScript functions. if i faced this problem i will get any one of those parts to another page and join it using Iframe. when you use Iframe those java functions can work on both of them separately without any collisions.

Related

Slick slider should only show 4 slides. However part of a 5th slider is showing when it should not

I am creating a slider of properties, I am using the slick slider library. However part of the next slide is showing and part of the last slide is cut off.
I only want 4 slides to appear at desktop level.
I have tried stackoverflow and googling solutions with no luck.
https://codepen.io/bkdigital/pen/VoXGmR - To run the code you will need to open the codepen in firefox and have an add on to allow CORS to view the slider in action.
code
Wrapping the slider elements inside a div fixed the layout issues.

Youtube / Google Style Carousel Slider

I would like to make a carousel slider similar to what you see on the new design for Youtube.com and pages like this: https://plus.google.com/discover/w29saB
Any recommendations on how to build this, or Jquery plugins that facilitate this.
I've tried itemSlide() but I don't know how to get the CSS so that it renders inside the container DIV properly. Also Itemslide doesn't give the arrows to scroll to the next page.
Other carousel plugins I've looked at even with their responsive options, make you specify the number of items to fit on a page. I would like that to be determined by css.
Update I've gotten itemSlide() to render in the container div however I still need to be able to add the arrows so that it scrolls when clicked. I figure getting the buttons to overlay is a matter of the right CSS. Getting the scroll to work when clicked is likely something specific to the itemSlide api that I should be able to figure out once the arrows are overlaid properly. itemSlide() as carousel slider library: http://itemslide.github.io/
Why not try a DIV inside a DIV. Have the overlap as hidden in css. Arrows can be div buttons that move the inner div "X" number of pixels in a given direction to match the block sizes in the carousel stile div.
Once you get the arrows overlaid you can use the disable_clicktoslide option of the library so that clicking on slides doesn't move to them.
To make the arrows work, call the functions next() and previous() on the carousel object.
Also you can use the function getActiveIndex() to detect where the user is on the carousel.
Good luck!

Owl Carousel - only scrolls 1 tab

on this site site link there is a owl carousel within a tab system however only the first tab is able to scroll using buttons, when switching tabs the buttons no longer work, any ideas what causes this or how to fix it?
even if the 2 sliders are in different containers, as you can see the bottom containers arrows will slide the content in the top and then stop working for all others.
well i've tried editing the css classes for the .active although i think its most likely javascript, if it didnt load completely id straight guess that but the autoplay and other files are all working and ive run out of options to think of so if anyone else has had this issue or could point me in a different path to look for a solution that would be really helpfu.
fixed now. seems the person who originally coded it used a weird mixture of different scripts all together and different structure, so stripped away those and set it to use the one set of attributes.

parallax.js automatically slide onload

I am using this jQuery plugin on a website: http://stolksdorf.github.com/Parallaxjs/
I am trying to achieve an effect where when a slide is navigated to, it automatically moves onto another slide once it has loaded - think of it as a transition slide.
For example:
parallax.transition.onload=function(){
parallax.citymid.show();
};
This code shows the city mid slide once the transition slide has loaded.
However:
parallax.transition.onload=function(){
parallax.citymid.bottom();
};
This does not make city mid slide in from the bottom as it would if it was called from a button.
Does anyone know whow I can make this work, or at least find a work around for it? I have contacted the developer of the plugin but to no avail.
Many thanks,
Oli
Using transition callbacks, everything works as it should.
parallax.pageB.right(function(){
parallax.pageC.right();
});
Call this bit of code while on pageA and it will slide in pageB from the right, and as soon as it's done it will slide in pageC. I've tested this and it works flawlessly.

Supersized for WP api call

I installed the supersized plugin for wordpress, which is working great. I have set it up as a slideshow to autoplay without control buttons. Still working great.
Now, my client wants to have certain divs (with content) rotate alongside the background image. So, when supersized shows the first image in the slideshow div1 shows on the page. When the slideshow moves to the second slide, div1 needs to go away and show div2, and so on.
Currently, I can do this by hacking into the supersized.js and add a custom function that passes the current slide number inside the nextSlide() function.
Instead of hacking it, though, I would like to hook into it somehow.
Something like: $.supersized.api.currentslide or something similar.
Would this be possible at all?
Thanks!
This example fits with your Answer:
http://www.cirmiz.eu/supersized/
You need to configure a Theme with the init event and api.options.
In this example in the file supersized.shutter.min.js
Requires supersized 3.2.5 ¡important!
I think you are looking for this variable
$.supersized.vars.current_slide
good luck

Categories