When the slideshow ends(when all the pictures displayed) it does not start over, gets stuck at the end.
Any help is appreciated.
Here is the code:
$(".flexslider").flexslider({
animation: "fade",
controlsContainer: ".flex-container",
useCSS: false,
touch: true,
controlNav: false,
animationLoop: false,
smoothHeight: true,
slideshowSpeed: 4500,
slideshow: true,
pauseOnHover: true
});
You need to change the folowing line:
animationLoop: false,
to
animationLoop: true,
Also make sure that you don't hover the slider as the folowing line of code in your example will make it pause on hover (mouse over):
pauseOnHover: true
Try to use reverse: true for starting back to 1
Related
I'm needing some help with Swiper.js
I have a site I'm working on https://www.paradev.co.uk/ee-live/home-alt/ and what I want to happen is after the last slide the user can continue to scroll down to rest of the page and then on scrolling up the slider works again with the mousewheel.
I've had to add the 'slide Down' text and arrow to allow the jump to the next section. This isn't ideal and will get deleted once it's working correctly.
I've managed to get what I want by adding the function slideChangeTransitionEnd and disabling the mousweheel. This does what I want for scrolling down and past the container but I can't find a way to reverse it for scrolling back up.
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: 1,
direction: "vertical",
slidesPerView: 1,
speed: 1000,
spaceBetween: 0,
roundLengths: true,
centeredSlides: true,
mousewheel: {
forceToAxis: true,
sensitivity: 1,
releaseOnEdges: true,
},
mousewheel: true,
pagination: {
el: ".swiper-pagination",
clickable: false,
},
});
swiper.on('slideChangeTransitionEnd', function () {
swiper.mousewheel.disable();
});
Any ideas?
Thanks.
NOTE
The swiper is in a section with the ID of 'slider'
The section below has an ID of 'festivals'. If this offers an alternative way
I think, It's too rate to fix your issue.
I was dealing with same problem as you today.
But, finally I solved that problem.
try romove below option.
mousewheel: true,
and just leave below options.
"mousewheel: {
forceToAxis: true,
sensitivity: 1,
releaseOnEdges: true,
},"
That's how I handled the problem.
I hope it will be helpful.
Ramy's answer above worked for me, but just to add if you're using react you can add the params as below
<Swiper
className="mySwiper max-h-[400px] w-full max-w-[100vw] overflow-hidden "
direction={'vertical'}
slidesPerView={1}
spaceBetween={30}
mousewheel={{
forceToAxis: true,
sensitivity: 1,
releaseOnEdges: true,
}}
modules={[Mousewheel]}
>
I have a line on a chart with a marker (icon). Highcharts is hiding the icon based on some behavior I do not know about.
The code to add 'points' to my data series ('output') looks like (I know enabledThreshold is redundant, but had to try something) this:
output.push({
id: id,
data: points,
keys: ['x', 'y', 'marker'],
marker: { enabled: true, enabledThreshold: 0, },
color: 'transparent',
lineWidth: 1,
animation: false,
showInLegend: false,
enableMouseTracking: false,
});
Here is an image of the browser with the marker:
And this is what happens if I make the browser window just a little less wide:
The little red icon is gone (making the browser wider will bring it back). I want the icon there 100% of the time.
Thanks raf18seb, you nailed it. Unfortunately dataGrouping is enabled by default, so it is necessary to disabled it:
dataGrouping: {
enabled: false,
forced: false // not sure this is necessary but whatever
},
Generally I seem to have a lot of code over-riding highcharts default behaviors...
dataGrouping: {
enabled: true,
forced: true
}
imgur.com/oLD44Rm
dataGrouping: {
enabled: true,
forced: false
}
imgur.com/Mo0eE2O
Highcharts large data grupperom well if forced enabled. I found a gap where the data has a large gap. You can leave and forced to remove the gap?
UPDATE:
I found this: xAxis.ordinal: false, and series.dataGrouping.forced: true = gap.
http://jsfiddle.net/vj3kynqc/1/
I want to leave xAxis.ordinal: false :)
How to do it without gap the line?
I'm having a strange problem with the jquery dialog popup that I'm hoping someone here can help. The pop up codes looks like below. It works fine except for one thing. When the pop-up is displayed, it will sometimes push the background content down by about the height of the the dialog window. Is there a way to prevent this from happenning?
$("#searchPopUp").dialog({
modal: true,
bgiframe: false,
autoOpen: false,
resizable: true,
position:{ my: "center", at: "center", of: window },
title: 'Choose one search criteria and<br/>populate the corresponding field below:',
width: 400,
close: function( event, ui ) {},
buttons: {
"Search": function() {
$("#viewDevicesSearchForm\\:searchCommandLink").click();
},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
This is because jquery sets position to relative, and then moves the popup to the right place using top and left. I found two ways to fix the problem:
1) The easier of the two: set margin-bottom of the dialog container to negative its height.
popup.dialog({
...other options...,
open : function() {
popup.css('margin-bottom', 0 - popup.height());
},
});
2) For the dialog container, set the position to absolute and adjust the top and left. To put it in the right place, add the offset position of where it is getting placed to the top value that jquery set. The calculation is similar for left.This should do it, but different parameters to the dialog may require different calculations.
My issue is as following:
I've created a custom tooltip with formatter callback function and had set useHTML attribute to be true.
The problem with useHTML is that it is not respecting z-indexing, and the result is that whenever i zoom in the chart (when the reset zoom button actually appears), the reset button's text gets covered by the tooltip's text.
tooltip: {
useHTML: true,
followPointer: true,
formatter: function() {
return '<b>sSsSsSsSsSsSsssssssssssssssssssssS<br/>sdsdsddddddddddddssd</b>';
}
}
check this fiddle: http://jsfiddle.net/sahar_rehani/R5Ep4/
try zooming in and then get the tooltip closest to the reset zoom button :)
please help!!!
There's a hacky way to change Highcharts tooltip zIndex:
chart.tooltip.label.attr({zIndex: 300});
Try jsfiddle
Simply remove useHTML: true line and your problem is resolved!. I know it is not the perfect solution but will do the job. z-index issues are very common when you mix svg and html. I will follow up if i find a better solution. You don't need useHTML: true to do the formatting that you are doing.
tooltip: {
followPointer: true,
formatter: function() {
return '<b>sSsSsSsSsSsSsssssssssssssssssssssS<br />sdsdsddddddddddddssd</b>';
}
},
jsfiddle