I'm building wordpress site with swiper slider (https://idangero.us/swiper/) listing portfolio items. What I need is next button that contains title of next slide. Is that possible? Something like this:
rough preesentation
This is code:
var swiperOptions = {
loop: true,
speed: 1000,
}
function portfolioSlider() {
var portfolioSlider = new Swiper('.js-portfolio-slider', swiperOptions);
$(document).on('click', '.js-portfolio-slider__next', function(e) {
e.preventDefault();
portfolioSlider.slideNext();
});
}
portfolioSlider();
See the documentation here: https://idangero.us/swiper/api/#events
portfolioSlider.on('transitionEnd', function() {
var nextTitle = $('.swiper-slide-next').find('.title');
if (nextTitle.length > 0) {
$('.js-portfolio-slider__next').text(nextTitle);
}
})
Should do the trick. The 'swiper-slide-next' should be the class of the next slide in your markup
Use swiper.slides[index + 1].innerText to get the inner content
Please refer to
penvar swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
console.log(swiper.slides[1].innerText) visit https://codepen.io/harmeet2harry/pen/qvQWyO
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
JS fiddle: http://jsfiddle.net/d9nat0gk/20/
let album_images_slider = new Swiper("#album_images_slider", {
direction: "horizontal",
slidesPerView: 1,
loop: true,
allowTouchMove: false,
speed: 600,
autoplay: {
delay: 3000
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
$(function() {
console.log("hello");
$("#album_images_slider").click(function(e) {
console.log("hello, mate!");
console.log(e.target.className);
if (e.target.classList.contains("swiper-slide")) {
console.log("hello!");
$("body *").hide();
$("body").before(`<div class="layer">Hey!</div>`);
}
});
$(".layer").on("click", function() {
console.log("Hi");
$(".layer").remove();
});
});
Block .layer is succesfully displayed on the screen, but for some reason when I click on .layer, .layer click handling isn't invoked.
What is the problem? And how can I solve that?
Any help would be highly appreciated!
The evaluation of the method $(".layer").on is performed on the elements when you call it, so if you try to console.log($(".layer")) just before that line, you will see that there are no elements with .layer at that point.
You should create and hide the <div.layer> at the start of your script or in the HTML, otherwise you can move the $(".layer").on(...) piece of code after you create the element (after $("body").before("<div class="layer">Hey!</div>");)
I got a problem with swiper slider. I would like my swiper stop on mouse enter and continue on mouseleave. But my console shows me an error --> swiper.stopAutoplay is not a function, but the console log is displayed. And the same with startAutoplay. Does anybody know what am I doing wrong?
<script>
var swiper = new Swiper('.swiper-container', {
loop: true,
speed:2000,
autoplay: {
delay: 3500,
},
pagination: {
el: '.swiper-pagination',
},
});
(function($) {
$('.swiper-container').on('mouseenter', function(e){
console.log('stop autoplay');
swiper.stopAutoplay();
})
$('.swiper-container').on('mouseleave', function(e){
console.log('start autoplay');
swiper.startAutoplay();
})
})(jQuery);
</script>
In version 4.3.5 you must use autoplay.stop and autoplay.start. For example:
var mySwiper = new Swiper('.my-swiper');
$('.my-swiper').hover(function() {
mySwiper.autoplay.stop();
}, function() {
mySwiper.autoplay.start();
});
I'm running 5.1.0.
After console.logging swiper reference i saw that for each tab was specific one created.
So in the loop when i was hiding the tabs just needed to:
swiper[i].autoplay.stop();
And on tab click showing the tab:
swiper[i].autoplay.start();
So thanks to answer above by #nick i was able to get this running.
I have some strange problem with Multi page slide. When I press to switch pages, new page was stuck on left and then slide out ,where it needs to be. You can test this in my JSFiddle
There is my JQuery. (Im new on that)
$(document).ready(function(){
$("div.page-content div.page").hide();
$(".page-content div.page:first-child").show();
$("a.edit").click(function() { // EDIT BUTTON
$("div.page-content .page").hide();
var activeTab = $(this).attr("href");
var effect = 'slide';var options = { direction: 'right'};var duration = 1000;
$(activeTab).toggle(effect, options, duration);
});
$("a.back").click(function() { // BACK BUTTON
$("div.page-content .page").hide();
var activeTab = $(this).attr("href");
var effect = 'slide';var options = { direction: 'left'};var duration = 1000;
$(activeTab).toggle(effect, options, duration);
});
});
Any solutions, why I have this problem?
You need to slide the current page out when hiding with the toggle of activetab slide to make it a smooth run. Use the following js code and see if that makes the effect you want:
$(document).ready(function(){
$("div.page-content div.page").hide();
$(".page-content div.page:first-child").show();
$("a.edit").click(function() { // EDIT BUTTON
$("div.page-content .page").hide("slide", { direction: "left" }, 1000);
$($(this).attr("href")).delay(1000).toggle('slide', { direction: "right" }, 1000);
});
$("a.back").click(function() { // BACK BUTTON
$("div.page-content .page").hide("slide", { direction: "left" }, 1000);
$($(this).attr("href")).delay(1000).toggle('slide', { direction: "right" }, 1000);
});
});
Hope this helps.
I'm using iDangerous Swiper library to display a mobile swipe touch gallery in conjunction with Jquery Mobile framework.
It works fine except that if I leave the index page (where the gallery is) and then come back, the pagination widget doesn't work properly. It still appears (I can see the bullets), and it's still clickable, i.e. if I "touch" a bullet the gallery swipes to the correspondent slide and the bullet becomes "active", but it doesn't work the reverse way, in other words it doesn't respond to slide changes: if I swipe through the slides the current active bullet does not update.
this is the initialization code:
$( document ).on( "pageshow", "#index-page", function( event ) {
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
slidesPerView: 'auto'
});
});
The page are linked with jquery mobile's data-ajax="true" attribute to preserve the global scope.
It help me pagination swiper idangerous jquery mobile
$(document).one("pageshow", "#page1", function (e) {
var swiper = new Swiper('.swiper-container', {
paginationClickable: true,
hashnav: true,
pagination: '.swiper-pagination',
hashnav: true });
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.reInit();
}, 500);
}
});
Issue:
Initializing the swiper twice.
Solution:
Define a global variable "swiper" outside the "pageshow" event. The global variable "swiper" will be "undefined" on loading the gallery first time. When you leave the page and come back, global variable "swiper" will not be "undefined". Then do not initialize again.
<script>
var swiper;
$(document).on("pageshow", "#page1", function (e) {
if (swiper == undefined) {
swiper = new Swiper('.swiper-container', {
pagination: '.pagination',
paginationClickable: true,
slidesPerView: 'auto'
});
}
});
</script>
As the title suggests, I'm trying to add a class to the current 'snapped-to' element. With this:
var verticalScroll;
verticalScroll = new IScroll('#wrapper', {
snap: true
});
verticalScroll.on('scrollEnd', function(){
alert(this.currentPage);
});
I get this alert when the scrolling is done:
[object Object]
So I was thinking I could use something like this to add a class:
verticalScroll.on('scrollEnd', function(){
var newPage = this.currentPage;
$(newPage).addClass('current');
});
But no joy. Done lots of searches to try and find the same situation. It must be something fairly simple.
Yeah, it's a little bit tricky. Some time ago I tried to add an "active" class to the link and the page. I ended up with this:
after scroll ended:
myScroll.on('scrollEnd', function () {
addActiveClass();
});
the function:
function addActiveClass() {
// get current page with iScroll
var currentSection = myScroll.currentPage.pageY;
// get current link and page
var activeLink = $('nav a[href="' + currentSection + '"] span');
var activeSection = $('section[class="' + currentSection + '"]');
// remove active class from all links and pages
$('nav a span, section').removeClass('active');
// add active class to current link and page
$(activeLink).addClass('active');
$(activeSection).addClass('active');
}
Only one thing that annoys me, you have to give every section a page number as a class:
<section class="0"> … <section>
<section class="1"> … <section>
<section class="2"> … <section>
Same with links:
But maybe could be added dynamically somehow.
And don't forget option:
snap: 'section'
jsfiddle demo
var workCase;
function loadcase() {
workCase = new IScroll('#work-case', {
mouseWheel: true,
resizeScrollbars: true,
snap: 'section',
interactiveScrollbars: true,
mouseWheelSpeed: 10,
scrollX: true,
scrollY: false,
momentum: true,
snapSpeed: 800,
scrollbars: 'custom',
wheelAction: 'scroll'
});
workCase.on('scrollEnd', function() {
var sectionIndex = Number(this.currentPage.pageY);
var iScrollConteiner = $('#work-case').children()[0];
var dataNumber = $(iScrollConteiner)[0].children[sectionIndex].className;
var activeSection = $('section[class="' + dataNumber + '"]');
$('section').removeClass('active');
$(activeSection).addClass('active');
});
}