Cycle2 Next/Prev issues with AutoHeight - javascript

I am using Cycle2 in a site Im working on. It is a CMS and it is using jquery 1.6.4 which from the get go posed a problem - but got it taken care of with the .on/.bind hack to the cycle2 core. Unfortunately I cannot update jquery at the moment.
The slideshow is working fine after the hack - the Next and Prev buttons work as they should and the thumbnail navigation works fine as well.
The Issue:
Some of our images are taller than the rest and with the slideshow as is the taller images would get cut off at the bottom. So I integrated the data-cycle-auto-height="container" built in to Cycle2. Beautiful it works. I click on the taller image thumbnail and the image slideshow auto adjusts to the current image's height. BUT, now with the data-cycle-auto-height="container" height running, I can no longer use the Next/Prev buttons. They are clickable and the hover effect still works, but once clicked nothing happens. If I go ahead and remove the data-cycle-auto-height="container" from the slideshow div, they began to function again. I looked in the console and it is not throwing any additional errors - the only error I get in the console is Uncaught TypeError: $(...).on is not a function(…) which I was getting from the get-go, probably a jquery 1.6 and cycle2 compatibility issue still.
Here is the start of the slideshow div:
<div class="cycle-slideshow"
data-cycle-timeout="0"
data-cycle-manual-fx="fade"
data-cycle-pager="#no-template-pager"
data-cycle-prev="#tst-prod-prev"
data-cycle-next="#tst-prod-next"
data-cycle-loader="wait"
data-cycle-auto-height="container"
data-cycle-pager-template=""
data-cycle-tmpl-regex="\[\[((\.)?.*?)\]\]"
data-cycle-caption="#tst-custom-caption"
data-cycle-caption-template=[[title]] >
Any thoughts on what can be causing this issue?

Fixed it. Some more tweaks in the Cycle2 core - .on -> .bind. Again, this is a hack for jquery version before 1.7.

Related

Tailwind Carousel Component auto-scroll not working

I am new to css and I am trying to use tailwind Carousel (from tw-elements) with my gatsby react app and everything is working fine except for the auto-scroll on page load. I copied the first example from this link, which already has auto-scroll enabled.
On playing with it a bit longer I realised that the auto-scroll starts working once I interact with the carousel - only via the next/prev buttons. If I click on the indicators before clicking on the next/prev buttons the autoplay never starts.
I tried some workarounds that are probably not ideal but didn't work anyway -
I tried manually clicking the next button on pageload with the help of ref.current.click but it still does not start the auto-scroll. I need to hover my mouse over the Carousel and then exit for the auto-scroll to begin.
I also tried setting data-bs-pause={false} to not make it stop on mouse hover but that just stops the auto-scroll completely.
Is this due to some differences between how gatsby and tw-elements work or am I missing something basic here?
ps - the attributes I passed for the the carousel were picked from the bootstrap documentation, since tw-elements are built on top of bootstrap.

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.

Incorrect work jquery plugins bxslider with plugin elevatezoom

I'm begginer in programing. I'm trying to use jquery plugins elevatezoom and bxslider. And I have a little problem.
What I have
When I choose one picture from the box, which was created by bxslider plugin, as I understand, the other became invisible, but still exist at the page (in my example at the left top of the page). And when I mouseover this block, the elevate zoomer plugin understand it as a picture for zooming, and start to zoom it. As a result,the page works incorrectly.
Does anyone know how to solve this problem?
I also can give the link to the live project
Maybe you could try to add a class to the active slide object like here and then create an if statement for active slide objects only.

Chrome (webkit?) not displaying images correctly in a slideshow

I've read quite some posts about webkit browsers having issues with images. I couldn't find a post and thus an answer for the one I'm about to explain.
I created a home-made slideshow using jQuery that basically places all the images next to each other on a row and I then play with a mask element (overflow: hidden) and the margin-left property to select which one is to be displayed. I didn't reinvent the wheel...
On FF, Opera and even IE, it works like a charm! But I have no luck on Chrome (I didn't test Safari) : the first image shows ok but when the sliding effect kicks in, 20px-ish of the first slide remains at the top of the slideshow and overlay the second slide. If I carry on sliding, the first slide part remains as an overlay on the following slides. The images don't refresh ok on Chrome which makes the whole slideshow look rubbish.
I tried to play with the images css properties after the sliding effect to kind of force the container to refresh its content but again, no luck.
Does anybody have an idea on how to work that out?
Thank you
Found the fix...
As I said, trying to force the container to refresh its content using some different css properties didn't work.
What worked though was to add a span to the container, that's it... At the time of the issue, my container only had images in it and a map. I added a span (out of luck) and it worked straight away!
I can only assume why adding a span makes the whole container behave ok. I guess it is kind of the same than the "hasLayout" property IE6 used to throw at geeks. It couldn't render the element properly until it had an element that had a consistency (height, width ... set with a value).
Anyway, I hope this will help and yes, I did dare to compare Chrome to IE6... ;-)
Good day

Why does jCaroussel Lite cut off text in some slides?

I'm using a jQuery plugin called jCarousel Lite to create a vertical scrolling Twitter ticker. Everything works fine, except for the fact that some tweets aren't shown completely. They're cut off before the last line of text. I can't seem to figure out what is causing the problem and it seems to occur more or less randomly too.
The page at http://www.reekx.nl/ shows the Twitter ticker in action (bottom right, titled 'Reekx op Twitter').
Is anybody able to tell me what's going wrong here and how I can fix it?
The Carousel sets a height for the elements, and at the same time you have overflow:hidden in your CSS.
This bascily means you are telling the DIV that it should be 104px heigh, and all overflowing content should be hidden.
Ill try to find if you can disable a fixed height in carousel mean while :)
Could you try playing with the "fit" option?
You can try playing with the options, which can be found here: http://jquery.malsup.com/cycle/options.html
But the 2 which is relevant should be:
$('#stwitterThing').cycle({
fit: 1,
height: auto
});

Categories