I am trying to replace a JavaScript For Loop with the underscore.js each() function.
for (var x = 0; x < count; x++) {
slider[x].setAttribute('id', arguments[x]);
sliderPagination[x].setAttribute('id', arguments[x]+'Pagination');
// Initialise swiper
var slider = new Slider('#'+arguments[x], {
pagination: '#'+arguments[x]+'Pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
}
I am new to using underscore so not quite sure the best way to do this. Do I need the index iteration when using the _.each() function for this?
UPDATE:
// Function to initialize multiple instances of slider plugin
function loadSliders(values) {
var sliders = document.getElementsByClassName("swiper-container"),
slidersPaginations = document.getElementsByClassName("swiper-pagination"),
count = Math.min(sliders.length, arguments.length),
i = 0;
_.each(sliders, function(sliders, index) {
var argumentsVariable = values[index];
sliders.setAttribute('id', argumentsVariable);
slidersPaginations[index].setAttribute('id', argumentsVariable+'Pagination');
// Initialise swiper
var slider = new Swiper('#'+argumentsVariable, {
pagination: '#'+argumentsVariable+'Pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
});
}
I'm assuming here that you have 3 arrays:
- sliders
- sliderPaginations
- arguments
Then, you can do it that way:
_.each(sliders, function(slider, index) {
var argumentsVariable = arguments[index];
slider.setAttribute('id', argumentsVariable);
sliderPaginations[index].setAttribute('id', argumentsVariable+'Pagination');
// Initialise swiper
var slider = new Slider('#'+argumentsVariable, {
pagination: '#'+argumentsVariable+'Pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
}
Note that you can use EcmaScript5 forEach method that is defined for each array:
sliders.forEach(function(slider, index) {
var argumentsVariable = arguments[index];
slider.setAttribute('id', argumentsVariable);
sliderPagination.setAttribute('id', argumentsVariable+'Pagination');
// Initialise swiper
var slider = new Slider('#'+argumentsVariable, {
pagination: '#'+argumentsVariable+'Pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
}
Related
How to make it so that the progress bar with the progress line and the numeric display of the active slide from the total number of slides are displayed simultaneously?
Since by default the simultaneous operation of the progress bar and pagination with a fraction is impossible, I added "type: 'progressbar'" in the "pagination" properties, and for the numeric display of slides I made an .image-slider__fraction block in which I placed all the elements.
Then I wrote java script code that I found on the Internet, but I get an error "Uncaught ReferenceError: myImageSLider is not defined". Why?
Site ilyin1ib.beget.tech
Code https://jsfiddle.net/qav8z7f3/
let mySliderAllSlides = document.querySelector('.image-slider__total');
let mySliderCurrentSlide = document.querySelector('.image-slider__current');
mySliderAllSlides.innerHTML = myImageSLider.slides.length;
myImageSLider.on('slideChange', function() {
let currentSlide = ++myImageSLider.realIndex;
mySliderCurrentSlide.innerHTML = currentSlide;
});
<div class="image-slider__fraction">
<div class="image-slider__current">1</div>
<div class="image-slider__sepparator">/</div>
<div class="image-slider__total">1</div>
</div>
use slideChange event. The script does not give the actual number of items because you used the loop inside the slider. That's why I found the value of the items before creating the slider script.
var totalSlide = $('.image-slider .swiper-slide').length;
const swiper = new Swiper('.image-slider', {
// Optional parameters
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,
loopedSLides: 3,
simulateTouch: true,
grabCursor: true,
speed: 800,
pagination: {
el: '.swiper-pagination',
type: 'progressbar'
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 1000,
}
});
//var count = $('.image-slider .image-slider__slide').length;
swiper.on('slideChange', function() {
var fragment = document.querySelector('.image-slider__current');
var current = swiper.realIndex + 1;
if (current > totalSlide)
current = 1;
var idx = current < 10 ? ("0" + current) : current;
var tdx = totalSlide < 10 ? ("0" + totalSlide) : totalSlide;
fragment.innerHTML = (idx + '/' + tdx);
});
demo in jsfiddle
I'm trying to reverse the animation on loopComplete - it works but only once. How can I make it loop forever?
Here's my code:
var params = {
container: document.getElementById('loader'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData
};
var anim;
anim = lottie.loadAnimation(params);
anim.addEventListener('loopComplete', function() {
anim.setDirection(-1);
anim.play();
})
anim.addEventListener('complete', function() {
anim.setDirection(1);
anim.play();
})
You can use setInterval function for looping through Lottie.
Make loop: false and change the setInterval time according to your Animation.
var params = {
container: document.getElementById('loader'),
renderer: 'svg',
loop: false,
autoplay: true,
animationData: animationData
};
var anim;
anim = lottie.loadAnimation(params);
let dir = 1;
setInterval(function () {
if(dir == 1) {dir = '-1'} else {dir = '1'; }
anim.setDirection(dir);
anim.play();
}, 2500);
I have the following variables. I want to pass cgggowl_slidesPerView to the Swiper configuration. How can I do that?
var cggowl_jav_info_cont = $scope.find('.cggowl-row').eq(0);
var cgggowl_settings = cggowl_jav_info_cont.data('settings');
var cgggowl_slidesPerView = cgggowl_settings['slidesPerView'];
var mySwiper = new Swiper('.swiper-container', {
slidesPerView: cgggowl_slidesPerView,
spaceBetween: cgggowl_spaceBetween,
});
I have a working slider. I would like to to autoplay the slides and stop the autoplay when user clicks the next or previous button.
I have tried to include setInterval-function but I am not sure how I should apply it in order to make it work. So far I did not manage to do this.
enter code here
var interleaveOffset = 0.2;
var swiperOptions = {
loop: true,
speed: 500,
grabCursor: true,
watchSlidesProgress: true,
mousewheelControl: true,
keyboardControl: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
on: {
progress: function() {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
var slideProgress = swiper.slides[i].progress;
var innerOffset = swiper.width * interleaveOffset;
var innerTranslate = slideProgress * innerOffset;
swiper.slides[i].querySelector(".slide-inner").style.transform =
"translate3d(" + innerTranslate + "px, 0, 0)";
}
},
touchStart: function() {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = "";
}
},
setTransition: function(speed) {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = speed + "ms";
swiper.slides[i].querySelector(".slide-inner").style.transition =
speed + "ms";
}
}
}
};
var swiper = new Swiper(".swiper-container", swiperOptions);
I expect that slider plays the slides automatically and the autoplay stops when user clicks either next or previous button.
Use autoplay
autoplay: {
delay: 2500,
disableOnInteraction: true,
},
disableOnInteraction will disable autoplay when you will click on arrows.
From top of my head you can use something like this
let timer = null
const startSwiping = () => {
timer = setInterval(() => {
swiper.slideNext(100); // transition duration (ms) as argument
}, 500)
}
const stopSwiping = () => clearInterval(timer)
I did not try that but Swiper docs dont show any other option than swiper.slideNext(speed)
I have 4 each functions which call a Swiper slider with the appropriate options. After those are appended to the correct div I then add the code which links them together, so one slider controls the other and vice versa.
I am getting the error "Uncaught ReferenceError: swiperV2 is not defined". I think this is because they are inside the each functions and this reference to them doesn't 'see' them.
Any ideas on how to fix this?
Thanks
$(".swiper-container-v").each(function(index, element) {
var $this = $(this);
$this.addClass("instance-" + index);
$this.find(".swiper-button-prev").addClass("btn-prev-" + index);
$this.find(".swiper-button-next").addClass("btn-next-" + index);
var swiperV = new Swiper(".swiper-container-v.instance-" + index, {
// your settings ...
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'vertical',
spaceBetween: 0,
mousewheelControl: false,
speed: 600,
nextButton: ".btn-next-" + index,
prevButton: ".btn-prev-" + index
});
});
$(".swiper-container-h").each(function(index, element) {
var $this = $(this);
$this.addClass("instance-" + index);
$this.find(".swiper-button-prev").addClass("btn-prev-" + index);
$this.find(".swiper-button-next").addClass("btn-next-" + index);
var swiperH = new Swiper(".swiper-container-h.instance-" + index, {
// your settings ...
pagination: '.swiper-pagination-h',
paginationClickable: true,
spaceBetween: 0,
parallax: true,
speed: 600,
nextButton: ".btn-next-" + index,
prevButton: ".btn-prev-" + index
});
});
$(".swiper-container-v2").each(function(index, element) {
var $this = $(this);
$this.addClass("instance-" + index);
$this.find(".swiper-button-prev").addClass("btn-prev-" + index);
$this.find(".swiper-button-next").addClass("btn-next-" + index);
var swiperV2 = new Swiper(".swiper-container-v2.instance-" + index, {
// your settings ...
paginationClickable: true,
direction: 'vertical',
spaceBetween: 0,
mousewheelControl: false,
speed: 600
});
});
$(".swiper-container-h2").each(function(index, element) {
var $this = $(this);
$this.addClass("instance-" + index);
$this.find(".swiper-button-prev").addClass("btn-prev-" + index);
$this.find(".swiper-button-next").addClass("btn-next-" + index);
var swiperH2 = new Swiper(".swiper-container-h2.instance-" + index, {
// your settings ...
paginationClickable: true,
spaceBetween: 0,
parallax: true,
speed: 600
});
});
swiperV2.params.control = swiperV;
swiperH2.params.control = swiperH;
swiperV.params.control = swiperV2;
swiperH.params.control = swiperH2;
Really.... this is just how scope works and is pretty much ubiquitous of all programming languages that are class/function based.
For you to be able to access variables that fall within the scope of a function, you must create a reference for it outside of that function in the scope that is expected to act upon it.
So in the case that you have something such as,
func() {
var myVar = ...
}
print(myVar)
This will not work as the global scope that exists outside of the functions scope has no concept of what myVar is.
So you'll need to first create a reference to that variable.
var myVar;
func() {
var myVar = ...
}
print(myVar)
Now since myVar was generated outside of the scope of the function, the function knows about myVar.
Alternatively you could return the value of myVar and do something like this.
func() {
return myVar = ...
}
var myFunc = func();
print(myFunc())
And you'll have essentially performed a function assignment (i.e., assigning that function to a variable) and that variable by proxy in this case is storing the return value of the function.