I was unable to create a codepen to demonstrate this issue (too many dependencies to sort out) so hopefully the description will be enough.
I successfully combined swiper.js with twentytwenty for a project. In all modern browsers, including Microsoft Edge, both pieces work together.
<div class="swiper-container horizontal-slider">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide" data-hash="slide1">
<div class="twentytwenty-container"><img src="./img/projects/slide1_before.jpg" />
<img src="./img/projects/slide1.jpg" /></div>
</div>
<div class="swiper-slide" data-hash="slide2"><img src="./img/projects/slide2.jpg" /></div>
<div class="swiper-slide" data-hash="slide3"><img src="./img/projects/slide3.jpg" /></div>
<div class="swiper-slide" data-hash="slide4"><img src="./img/projects/slide4.jpg" /></div>
<div class="swiper-slide" data-hash="slide5">
<div class="twentytwenty-container"><img src="./img/projects/slide5_before.jpg" />
<img src="./img/projects/slide5.jpg" /></div>
</div>
<div class="swiper-slide" data-hash="slide6"><img src="./img/projects/4English-slide6.jpg" /></div>
<div class="swiper-slide" data-hash="slide7"><img src="./img/projects/slide7.jpg" /></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
</div>
This is all with jQuery 3.2.1.
$(function(){
mainSwiper = new Swiper ('.swiper-container', {
// Optional parameters
loop: true,
spaceBetween: 10,
slidesPerView: 'auto',
loopedSlides: 5,
autoplay: {
delay: 2500,
},
keyboard: {
enabled: true,
},
hashNavigation: {
watchState: true,
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
$(".twentytwenty-container").twentytwenty({
default_offset_pct: 0.1, // How much of the before image is visible when the page loads
before_label: '', // Set a custom before label
after_label: '', // Set a custom after label
no_overlay: true, //Do not show the overlay with before and after
//click_to_move: true // Allow a user to click (or tap) anywhere on the image to move the slider to that location.
});
And with some jQuery to disable moving from slide to slide when selecting the "handle" you don't get a parallax effect (there are more parts for things like touch devices but that doesn't apply here).
$(".twentytwenty-handle").mousedown(function() {
if (mainSwiper.autoplay.running) { mainSwiper.autoplayWasRunning = true; mainSwiper.autoplay.stop(); }
mainSwiper.allowTouchMove = false;
}).mouseup(function() {
if (mainSwiper.autoplayWasRunning) { mainSwiper.autoplay.start(); }
mainSwiper.allowTouchMove = true;
});
I thought things were all set. And went to move on to testing when I discovered that the jquery.event.move script that twentytwenty needs has polyfill requirements for IE. Once those were sorted out everything loaded in IE. But when I clicked on the handle, nothing happened in regard to twentytwenty. The whole slide moved, and adding console.log inside the events showed they weren't triggering. I re-enabled the click_to_move option in twentytwenty and that works for moving the handle around. But that's obviously suboptimal.
Does anyone have any thoughts? Would you like more info? Should I be filing bug reports? Thanks!
Well, I feel silly.
While IE10 needs more polyfills (which seemed a bit odd). And IE9 is not supported anymore in Swiper. The general issue with IE discussed here is that the twentytwenty-handle lost its ability to be targeted. That is solved by using pointer events.
$(".twentytwenty-handle").on("pointerdown", function() {
if (mainSwiper.autoplay.running) { mainSwiper.autoplayWasRunning = true; mainSwiper.autoplay.stop(); }
mainSwiper.allowTouchMove = false;
})
.on("pointerup", function() {
if (mainSwiper.autoplayWasRunning) { mainSwiper.autoplay.start(); }
mainSwiper.allowTouchMove = true;
});
Related
How to solve [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false on JS?
Hello.
I'm working on the front at JS.
If you use the swiper scrollbar to move to the left or right, the following error occurs.
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
aaa.jsp
<div id="date_hidden" class="aaaaaa swiper-container aaaDiv swiper-container-horizontal swiper-container-android" style="width: 100%; overflow: hidden;">
<ul class="aaaaaaaWhen swiper-wrapper " style="transition-duration: 0ms;">
<li class="swiper-slide">
<span class="Day" <em>27</em></span>
<div class="swiper-scrollbar"><div class="swiper-scrollbar-drag"></div></div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
swiper script
const swiper = new Swiper('.swiper-container.class="aaaaaa', {
slidesPerView : '7.5',
debugger : true,
mousewheel : true,
loop : false,
scrollbar: {
el: '.swiper-scrollbar',
hide: false,
draggable: true,
},
});
How do you solve this?
I tried Google for more than 7 hours, but I couldn't solve it.
I have made three custom buttons for close, maximize, and minimize. My function for the close button is working but I have no idea about the maximize and minimize buttons! Actually, I don't really need the maximize button, because my focus is on the minimize button in Electron.js!
I have searched a lot on the internet, but mine is not working anyway!
Plz, help me!
<div class="ctrl-box">
<div class="exit" onclick="window.top.close()">×</div>
<div class="minimize">‒</div>
</div>
Minimize:
document.getElementById('minimize').addEventListener('click', () => {
remote.getCurrentWindow().minimize()
})
Add the above line to your js file.
In the html change
<div class="minimize">‒</div>
to
<div class="minimize" id="minimize>‒</div>
Maximize:
For maximizing, you'll have to set the property max-height and max-width of the window in main.js
let window = new BrowserWindow({
//other properties
maxheight: 720,
maxwidth: 1366,
maximizable: true,
})
In the html change
<div class="maximize">‒</div>
to
<div class="maximize" id="maximize>‒</div>
After that, add this to your js file of the window.
document.getElementById('maximize').addEventListener('click', () => {
remote.getCurrentWindow().maximize()
})
Main Issue
I am trying to use Swiper within a div that has it's visibility toggled. However, after hiding and showing the div, Swiper does not autoplay - even after triggering mySwiper.Update(), mySwiper.autoplay.start(), with observer and observeParents options set true.
Alternative Solution
Using new Swiper inside the toggle visibility function does work to make it autoplay, but it causes a new set of problems. Dragging doesn't work properly and the autoplay will jump around sporadically.
Code
I created two codepens to demonstrate:
Main (Update & Autoplay)
Alternative (Destroy & Re-create)
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
</head>
<style>
.hidden {
display: none;
}
.nav, .swiper-container {
text-align: center;
margin: 10px;
}
</style>
<body>
<div class="nav">
Toggle Hidden
Start Autoplay
</div>
<!-- Swiper parent container -->
<div class="swiper-parent active">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src='https://cdn.pixabay.com/photo/2019/08/19/07/45/pets-4415649_960_720.jpg' class="slide-image"/>
</div>
<div class="swiper-slide">
<img src='https://cdn.pixabay.com/photo/2019/07/02/08/10/sunny-4311828_960_720.jpg' class="slide-image"/>
</div>
<div class="swiper-slide">
<img src='https://cdn.pixabay.com/photo/2019/08/25/16/57/purple-4429887_960_720.jpg' class="slide-image"/>
</div>
<div class="swiper-slide">
<img src='https://cdn.pixabay.com/photo/2019/02/15/11/04/book-3998252_960_720.jpg' class="slide-image"/>
</div>
</div>
</div>
</div>
<script>
//Swiper Initialization
new Swiper('.swiper-container', {
// Optional parameters
observer: true,
observeParents: true,
loop: true,
loopedSlides: 4,
slidesPerView: 1,
speed: 1800,
autoplay: {
delay: 100,
disableOnInteraction: true,
},
});
var mySwiper = document.querySelector('.swiper-container').swiper;
function startFunction(){
mySwiper.autoplay.start();
};
function toggleHidden(){
if ($('.swiper-parent').hasClass('active')){
$('.swiper-parent').removeClass('active');
$('.swiper-parent').addClass('hidden');
} else {
$('.swiper-parent').removeClass('hidden');
$('.swiper-parent').addClass('active');
mySwiper.update();
mySwiper.autoplay.start();
};
};
</script>
</body>
</html>
Alternative toggle function:
function toggleHidden(){
if ($('.swiper-parent').hasClass('active')){
$('.swiper-parent').removeClass('active');
$('.swiper-parent').addClass('hidden');
mySwiper.destroy();
} else {
$('.swiper-parent').removeClass('hidden');
$('.swiper-parent').addClass('active');
new Swiper('.swiper-container', {
observer: true,
observeParents: true,
loop: true,
loopedSlides: 4,
slidesPerView: 1,
speed: 1800,
autoplay: {
delay: 100,
disableOnInteraction: true,
},
});
var mySwiper = document.querySelector('.swiper-container').swiper;
};
};
I found a solution, though, I am inexperienced so I imagine it is not the best or cleanest way to accomplish this.
Here is the codepen solution
I used this line $("#swiper-parent-id").load(location.href+" #swiper-parent-id>*",""); to reload the div content, causing the instance of Swiper to be destroyed when hiding the div.
Then when showing the div, I created a new instance of Swiper.
This is what I intended to do with the alternative solution, but for some reason this worked, while mySwiper.destroy(); did not work.
EDIT:
Since I posted originally I have gotten mySwiper.destroy(); to work properly. If anyone else is having this problem, it was due to the way I was initializing swiper. It works best to do so in a document.ready function at the end of your body code.
I have BXSlider (https://bxslider.com/) installed. Now I want the following jQuery script to run on entering a "slide".
$(document).ready(function () {
$(".next-prev-nav").fadeTo( "slow", 1 );
$(".disable-slide-nav").hide();
});
(The script enables the navigation of the slider again.)
I tried to search the website of BXslider, but I couldn't find anything about it.
Hope someone can help me out.
You are looking for either onSlideBefore (executes immediately before each slide transition) or onSlideAfter (executes immediately after each slide transition - when transition completes) depending on your needs both can be found here - look at the section Callbacks.
Here is an example:
$(function(){
var slider = $('.bxslider').bxSlider({
mode: 'horizontal',
captions: true,
slideWidth: 600,
auto: true,
pause: 1000,
onSlideBefore: function () {
console.log('onSlideBefore');
// Your code either goes here or...
},
onSlideAfter: function () {
console.log('onSlideAfter');
// Goes here...
// For example lets turn the slider off after the second slide appears
slider.stopAuto();
}
});
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div class="bxslider">
<div><img src="https://bxslider.com/assets/images/coffee1.jpg" title="Funky roots"></div>
<div><img src="https://bxslider.com/assets/images/coffee2.jpg" title="The long and winding road"></div>
<div><img src="https://bxslider.com/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>
I'm using the jquery cycle1 plugin for a slideshow with fade transitions between images, no previous or next controls. I need to layer text on top of this slider that changes color based on what slide is showing.
I'm not very fluent in jQuery so I'm having a hard time using the documentation to manipulate the available options. I've gotten this far thanks to this post and this one but the color changes slightly before or after depending on if I use before or after, obviously. How can I make the text color change at the same exact time the slide does?
Note: I have to use the cycle 1 plugin as my site uses jQuery 1.3.2 with no hope of upgrading.
here is a fiddle, and code below. Thanks in advance for any help!
here is my html:
<div id="text">this is some text over the slider</div>
<div id="switch-it">
<div id="slide1">
<a href="link1.html">
<img src="hp_hero_010114_01.jpg" height="500" width="980" border="0" />
</a>
</div>
<div id="slide2">
<a href="link2.html">
<img src="hp_hero_010114_02.jpg" height="500" width="980" border="0"/>
</a>
</div>
</div><!--//END switch-it-->
and here is the jQuery
$(document).ready(function(){
$('#switch-it').after('<div id="switch" class="switch">').cycle({
fx: 'fade',
speed: 800,
timeout: 500,
cleartypeNoBg: true,
height:'500px',
width:'980px',
pager:'#switch',
pause:1,
before: function (prev, current, opts) {
var current_id = $(current).attr('id');
if( current_id.match("slide1")){
$('#text').css('color','white');
}
else if( current_id.match("slide2")){
$('#text').css('color','red');
}
else if( current_id.match("slide3")){
$('#text').css('color','blue');
}
else if( current_id.match("slide4")){
$('#text').css('color','green');
}
},
pagerAnchorBuilder: function(index, el) {
return '•'; // whatever markup you want
}
});
});
It's not very elegant, but adding a timeout inside the before for half of your speed makes the change exactly in the middle of your transition.
setTimeout(function () { ...change text color }, 400);
JSFiddle
EDIT OR
Add a transition to your css for the #text for the same amount of time as your speed
#text {transition: color .8s linear}
JSFiddle
You might want to update to Cycle2 plugin it has what you are looking for
link
Down in "misc. bits" look for the state variable named 'busy';