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);
}
}
});
Related
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
https://jsfiddle.net/joel081112/fctL5z2u/15/
I'm not sure how to fix it since I'm new to JavaScript but I've tried some for-each statements and got nowhere. Here is a fiddle with 3 elements with the class-name bodymovianim but only the first element is appearing. How can I alter this js to show it in each div?
let iconMenu = document.querySelector('.bodymovinanim');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
path: "https://raw.githubusercontent.com/thesvbd/Lottie-examples/master/assets/animations/menu.json"
});
var directionMenu = 1;
iconMenu.addEventListener('click', (e) => {
animationMenu.setDirection(directionMenu);
animationMenu.play();
directionMenu = -directionMenu;
});
I'm using Swiper Slider for a hybrid app i'm creating using Phonegap with Framework 7.
Each slide is made with dynamic content that is being brought through an Ajax call.
The problem is that i have two Sliders in the same page, and when i reach the last slide on both of them, a huge blank space starts appearing and the more we slide with our finger, the more blank space it will create.
I will leave here some prints and the relevant bits of code.
My HTML File:
<div class="ementa-sobre pl30 mt60">
<h3 class="titulo-v1">Ementa <div class="circulo-pequeno"></div> <span class="info-complementar-titulo" id="numero-pratos"></span></h3>
<div class='swiper-container swiper-ementa-home'>
<div class='swiper-wrapper' id="slider-ementa-home">
</div>
</div>
</div>
<div class="eventos-sobre pl30 mt60">
<h3 class="titulo-v1">Eventos <div class="circulo-pequeno"></div> <span class="info-complementar-titulo" id="numero-eventos"></span></h3>
<div class='swiper-container swiper-eventos-home'>
<div class='swiper-wrapper' id="slider-eventos-home">
</div>
</div>
</div>
My JS File:
myApp.onPageInit('home', function (page) {
$(document).ready(function()
{
var ajaxurl3="myurl.php";
$.ajax({
type: "POST",
url: ajaxurl3,
success: function(data) {
$.each(data, function(i, field){
var id=field.id_categoria;
var nomeCategoria=field.nome_categoria;
var imgCategoria=field.img_categoria;
var string = "<div class='swiper-slide' style='background-image:url(https://pizzarte.com/app/img/ementa/"+imgCategoria+")'><a href='pratos.html?idcat="+id+"&cat="+nomeCategoria+"'><p>"+nomeCategoria+"</p></a></div>";
$("#slider-ementa-home").append(string);
})
},
complete: function (data) {
var mySwiper2 = myApp.swiper('.swiper-ementa-home', {
spaceBetween: 15
});
}
});
var ajaxurl4="myurl2.php";
$.ajax({
type: "POST",
url: ajaxurl4,
success: function(data) {
$.each(data, function(i, field){
var id=field.id_evento;
var nomeEvento=field.nome_evento;
var imgEvento=field.img_evento;
var string = "<div class='swiper-slide' style='background-image:url(https://pizzarte.com/app/img/eventos/"+imgEvento+")'><a href='eventos.html?idcat="+id+"&cat="+nomeEvento+"'><p>"+nomeEvento+"</p></a></div>";
$("#slider-eventos-home").append(string);
})
},
complete: function (data) {
var mySwiper3 = myApp.swiper('.swiper-eventos-home', {
spaceBetween: 15
});
}
});
});
})
Prints:
When page loads (everything is fine): https://gyazo.com/42094ad145607579572eb550a2d22d28
Scrolling to the last slide (lots of blank space): https://gyazo.com/64f5ec3b4d9c2e1f77357d2a040ea153
If we continue to scroll (if we keep scrolling, it will keep adding blank space): https://gyazo.com/f9e1be36eabbcafdd8767b05a29d2259
Any idea what's going on?
In your Swiper Initialization portion, use slidesOffsetAfter: 0, See bellow example for more details:
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
slidesOffsetAfter:0,
freeMode: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
As demkovych said (here, dublicate), add:
slidesPerView: 'auto'
In your var mySwiper2 and var mySwiper3 section of the code, I think you should try to add loopFillGroupBlank: False, like this
Case: var mySwiper3
complete: function (data) {
var mySwiper3 = myApp.swiper('.swiper-eventos-home', {
spaceBetween: 15,
loopFillGroupBlank: False,
});
}
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.