What i am trying to achieve, is a basic slideshow that starts, gets to the last slide and stops. I am using Glide.js as it is so small and is really awesome however, with the below code it does not actually pause and the slide spins round back to the beginning again.
/**
* Homepage Slideshow
*/
if(document.querySelector('.glide')) {
var item_length = document.querySelectorAll('.glide__slide').length - 1;
let glide = new Glide('.glide', {
type: 'slider',
startAt: 0,
perView: 1,
autoplay: 6000,
hoverpause: true,
});
glide.on('move', (e) => {
if(glide.index == item_length) {
console.log(glide.index, item_length);
glide.pause();
}
});
glide.mount();
}
I am getting the console.log out which is telling me 5 5 meaning I am on the glide.index at the 5th slide and the item_length is 5. So the glide.pause() should work. Any help would be greatly appreciated I have been scratching my head for ages on this. I have tried run and other events instead of move and still no success.
Try setting the rewind option to false:
/**
* Homepage Slideshow
*/
if(document.querySelector('.glide')) {
var item_length = document.querySelectorAll('.glide__slide').length - 1;
let glide = new Glide('.glide', {
type: 'slider',
startAt: 0,
perView: 1,
autoplay: 6000,
hoverpause: true,
rewind: false,
});
glide.mount();
}
Reference
Related
I am having difficulty to figure out how to wait or delay slider about 1 second before move to another slider. The below is JavaScript. I am not sharing the html code because its too lengthy and my question will look messy. I hope some of you have idea. I really appreciate your help.
Js code
var swiper = new Swiper('.swiper-container', {
autoHeight: true, //enable auto height
mousewheelControl: false,
touchRatio: 0,
allowTouchMove: false,
shortSwipes: false,
speed:2000,
navigation: {
nextEl: '.swiper-button-next',
},
});
I am having difficulty to figure out how to wait or delay [...] about 1 second
If you wish to delay script execution, you need setTimeout.
Anatomy of setTimeout:
setTimeout( [CALLBACK FUNCTION], [TIME DELAY] );
Working Example:
const myButton = document.getElementsByTagName('button')[0];
const clickButton = () => {
setTimeout(() => {
let myParagraph = document.createElement('p');
myParagraph.textContent = 'You clicked the button.';
document.body.appendChild(myParagraph);
}, 1000);
}
myButton.addEventListener('click', clickButton, false);
<button type="button">Click Me</button>
<p>A second after you click the button above, more text will appear...</p>
I use swiper slider and have counter fractions. Its counting well but I need to count = (all slides - 1). For example if I have 20 slides, I want to show the total number 19.Any ideas how I can do this? I use regular js from their website. Here what I have:
var gallery = new Swiper('.left-side-slider-gallery', {
slidesPerView: '1',
pagination: {
el: '.jail-app-left-side-fractions',
type: 'fraction',
},
});
Thanks!
You can use the custom type, and a renderCustom function, as mentioned in the docs:
var gallery = new Swiper('.left-side-slider-gallery', {
slidesPerView: 1,
pagination: {
el: '.jail-app-left-side-fractions',
type: 'custom',
renderCustom: function (swiper, current, total) {
return current + '/' + (total - 1);
}
}
});
I have a jQuery-based scrolling news ticker that uses a set interval in milliseconds to control the delay between the reveal of each new section of text. I'd like to randomize the delay so that it more closely mimics the way a realtime news feed would look.
I've tried experimenting with some Math.random javascript where the newsTickerInterval parameter is, but JS is not my native language and I'm having trouble making it work.
Here's the jQuery function my scroller uses to config the display:
$(function () {
$(".demo2").bootstrapNews({
newsPerPage: 4,
autoplay: true,
pauseOnHover: true,
navigation: false,
direction: 'down',
newsTickerInterval: 3000,
onToDo: function () {
//console.log(this);
}
});
});
Any hints or suggestions would be greatly appreciated!
Instead of using newsTickerInterval, make a function getNewsTickerDelay that generates a random delay interval and call it using a setTimeout whenever needed.
$(function () {
$(".demo2").bootstrapNews({
newsPerPage: 4,
autoplay: true,
pauseOnHover: true,
navigation: false,
direction: 'down',
getNewsTickerDelay: function() {
var minimumInterval = 2000;
var maximumInterval = 5000;
var additionalInterval = Math.floor(
Math.random() * (maximumInterval - minimumInterval)
);
return minimumInterval + additionalInterval;
},
onToDo: function () {
//console.log(this);
}
});
});
So, every time your timeout is called, set another one with a random delay using getNewsTickerDelay
--EDIT--
As pointed out by #Barmar, you might need to tweak the implementation of the plugin in your case and implement its internal animate method to use your defined random interval instead of a fixed value. You'll just need to replace the self.options.newsTickerInterval in that plugin's JS to self.options.getNewsTickerDelay(). That is if you are willing to mutate the plugin's implementation.
I using LayerSlider to make carousel on my website. Now when I click to Prev/Next button, the slider move to the first layer automatically.
I want to custom my Javascript. Click next to get next layer, not get the first layer. Here is my code:
var sliderObject = lsjQuery("#layerslider_6").layerSlider({
// height : __height,
responsive: false,
responsiveUnder: 1900,
layersContainer: 1900,
pauseOnHover: false,
navStartStop: false,
twoWaySlideshow: true,
navButtons: false,
// skin : 'fullwidth',
showCircleTimer: false,
cbInit: function (data) {
matchSizeLayerElement();
},
cbAnimStart: function (data) {
matchSizeLayerElement();
// console.log('Animate Start' + (new Date().getTime() / 1000));
},
cbAnimStop: function (data) {
matchSizeLayerElement();
// console.log('Animate Stop' + (new Date().getTime() / 1000));
},
cbPrev : function(data){
console.log('Click Prev');
},
cbNext : function(data){
console.log('Click Next');
},
});
lsjQuery("#layerslider_6").layerSlider('start');
I was searching more and more times, but I counln't any solutions.
Sorry for my bad English.
Each answers will become the God save my life!
Check out the API Methods section of the LayerSlider documentation, I believe it has the information you're looking for.
// moves to the layer after the current layer:
lsjQuery("#layerSlider_6").layerSlider('next');
// moves to the layer before the current layer:
lsjQuery("#layerSlider_6").layerSlider('prev');
// moves to the 4th layer (regardless of current layer):
lsjQuery("#layerSlider_6").layerSlider(4);
I am working on a WordPress site that turns a custom post type into a slider on a page. I am using Sequence.js for my slider and I can manually create multiple sliders no problem with the following:
//sequence slider options to be used by slider1
var options0 = {
sartingFrameID: 1,
cycle: true,
autoPlay: false,
nextButton: '.next0',
prevButton: '.prev0',
fallback: {
theme: "fade",
speed: 100
}
}
//slider1
var sequence0 = $(".slideContainer0").sequence(options0).data("sequence");
//sequence slider options to be used by slider2
var options1 = {
sartingFrameID: 1,
cycle: true,
autoPlay: false,
nextButton: '.next1',
prevButton: '.prev1',
fallback: {
theme: "fade",
speed: 100
}
}
//slider2
var sequence1 = $(".slideContainer1").sequence(options1).data("sequence");
How can I streamline this? And also make it dynamic so a slider is created for each post that is made? Any help would be greatly appreciated.
edited - added working answer
I used the answer from Cymen below for the first part by turning the options output into a function and simply calling the function with a counter for each sequence instance. Then used the second part of his answer to initialize each sequence slider and it works a treat.
This is what I have working now:
function options(number) {
return {
startingFrameID: 1,
cycle: true,
autoPlay: false,
nextButton: '.next' + number,
prevButton: '.prev' + number,
fallback: {
theme: "fade",
speed: 100
}
};
}
var count = 0;
$('.slideContainer').each(function() {
var sequence = $(this);
sequence.sequence(options(count)).data('sequence');
count++;
});
I haven't used sequence but from your post I am guessing you want to be able to recreate the options object with an increment of the number. So you could do something like this:
function options(number) {
return {
startingFrameID: 1,
cycle: true,
autoPlay: false,
nextButton: '.next' + number,
prevButton: '.prev' + number,
fallback: {
theme: "fade",
speed: 100
}
};
}
Then use it like so:
$(target).sequence(options(0)).data("sequence");
Or in your specific example:
//slider1
var sequence0 = $(".slideContainer0").sequence(options(0)).data("sequence");
//slider2
var sequence1 = $(".slideContainer1").sequence(options(1)).data("sequence")
And to do what you are talking about how about giving all the sequences the same class like say custom-sequence and then do something like this:
var count = 0;
$('.custom-sequence').each(function() {
var sequence = $(this);
sequence.sequence(options(count)).data('sequence');
count++;
});
That may or may not work -- it isn't quite clear to me what the .data('sequence') is doing.