Develop Reference

How to make Swiper JS display faction pagination and progress bar at the same time?

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

Where to put setInterval and clearInterval

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)

How to compare two different values of different functions or same function?

I have two variables index_1 and index_2 of different function and I have to compare that. Is that correct method or I can something else
Currently, I am not satisfied with this code for comparison because every time i get same value:
$(document).ready(function(){
var index_1 = '';
var index_2 = '';
$('#spin-now').click(function(){
$(".spin-box-1").jCarouselLite({
auto: 200,
speed: 200,
visible: 1,
vertical: true,
easing: "easeOutBounce",
afterEnd: function(a) {
var index_1 = $(a[0]).index();
store_index_1(index_1);
}
});
$(".spin-box-2").jCarouselLite({
auto: 225,
speed: 225,
visible: 1,
vertical: true,
easing: "easeOutBounce",
afterEnd: function(a) {
var index_2 = $(a[0]).index();
store_index_1(index_2);
}
});
});
function store_index_1(x){
data_index_1 = x;
data_index_2 = data_index_1 ;
if(data_index_2 == data_index_1){
//alert('same');
}
else{
alert('different');
}
console.log('outside'+''+data_index_1+''+data_index_2);
}
//console.log(data_index_1);
});

(I think this should be a comment, but I don't have enough reputation)
You defined 2 global variables, so if you're going to use them, then save your first index of .spin-box-1 in index_1 and .spin-box-2 in index_2, and then call a 'compare' function (your store_index_1).
$(document).ready(function(){
var index_1 = '';
var index_2 = '';
$('#spin-now').click(function(){
$(".spin-box-1").jCarouselLite({
auto: 200,
speed: 200,
visible: 1,
vertical: true,
easing: "easeOutBounce",
afterEnd: function(a) {
index_1 = $(a[0]).index(); //index_1 is your global
}
});
$(".spin-box-2").jCarouselLite({
auto: 225,
speed: 225,
visible: 1,
vertical: true,
easing: "easeOutBounce",
afterEnd: function(a) {
index_2 = $(a[0]).index(); //index_2 is your global
}
});
compare(); //index_1 and index2 should be set by this line.
});
function compare(){
if(index_1 == index_2){
alert('same');
}
else{
alert('different');
}
console.log('outside'+''+index_1+''+index_2);
}
//rest of your code
});
The thing with your store_index_1(x) function is that it will always be true because you are comparing 2 equal values:
data_index_2 = data_index_1 ;
if(data_index_2 == data_index_1)
That's kind of nonsense so i'm confused about what are you trying to do.
And again, sorry for the 'answer' 'cause I can't comment yet.

Replace JavaScript for loop with _.each() function

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
})
}

Script doesn't work on elements loaded with infinite scrolling

I'm using this script on my tumblr page, which gives posts different random text colors:
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;}
$(function() {
$(".post").each(function() {
$(this).css("color", get_random_color());
}); });
The thing is the script isn't working for elements loaded with infinite scrolling. Can anyone help me rewrite this code? I don't know how to write javascript sadly.

Take a look at your blog's main.js script. You can call your custom function when you grab the new elements from another page. This is my proposed revision of your main.js file.
$(window).load(function () {
var $wall = $('#content');
$wall.imagesLoaded(function () {
$wall.masonry({
itemSelector: '.post',
isAnimated: false
});
});
$wall.infinitescroll({
navSelector: '#pagination',
nextSelector: '#pagination li a.pagination_nextlink',
itemSelector: '.post',
loadingImg: "http://static.tumblr.com/kwz90l7/bIdlst7ub/transparent.png",
loadingText: " ",
donetext: " ",
bufferPx: 100,
debug: false,
errorCallback: function () {
$('#infscr-loading').animate({
opacity: .8
}, 2000).fadeOut('normal');
}
}, function (newElements) {
var $newElems = $(newElements);
$newElems.hide();
$newElems.each(function(value){
value.css("color", get_random_color());
});
$newElems.imagesLoaded(function () {
$wall.masonry('appended', $newElems, {
isAnimated: false,
animationOptions: {
duration: 900,
easing: 'linear',
queue: false
}
}, function () {
$newElems.fadeIn('slow');
});
});
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto({
deeplinking: false,
default_width: 600,
default_height: 550,
allow_resize: true,
});
});
});
$('#content').show(500);
});
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
What I've done is add your get_random_color function and called it from within the Infinite Scroll call to add a custom color to each of the elements in $newElems so really, all I've done is taken your code and integrated it differently than what you were trying to do, which wasn't working. This should, theoretically, work. If it doesn't or you have questions, let me know.