Jquery twenty twenty plugin with slider - javascript

Created a twenty twenty before after. but I want this before after inside the jquery slider. So that i can view group images of before after
$(window).load(function() {
$("#container1").twentytwenty();
});
<link href="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/css/twentytwenty.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/js/jquery.twentytwenty.js"></script>
<script src="http://stephband.info/jquery.event.move/js/jquery.event.move.js"></script>
<div id="container1">
<img src="http://zurb.com/playground/uploads/upload/upload/29/sample-before.png">
<img src="http://zurb.com/playground/uploads/upload/upload/28/sample-after.png">
</div>
Please help me to create this.

This is actually quite straight forward. I have put together a working example for you, enjoy:
$(document).ready(function() {
//initialize swiper when document ready
var mySwiper = new Swiper('.swiper-container', {
loop: true,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
onInit: function() {
$(".swiper-slide-active .container").twentytwenty();
},
onSlideChangeStart: function() {
$('.swiper-slide-active .container').twentytwenty();
},
onlyExternal: true
})
});
<link href="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/css/twentytwenty.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.7/css/swiper.min.css">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="container">
<img src="http://zurb.com/playground/uploads/upload/upload/29/sample-before.png">
<img src="http://zurb.com/playground/uploads/upload/upload/28/sample-after.png">
</div>
</div>
<div class="swiper-slide">
<div class="container">
<img src="http://www.catchmyfame.com/jquery/conan_bef_sm.jpg">
<img src="http://www.catchmyfame.com/jquery/conan_aft_sm.jpg">
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.7/js/swiper.jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/js/jquery.twentytwenty.js"></script>
<script src="http://stephband.info/jquery.event.move/js/jquery.event.move.js"></script>

Using Swiper Slider I tried to use herrbischoff's method, but was unsuccessful I think due to some outdated swiper data. My solution is below and notice a few changes:
touchRatio: 0 is used to turn off dragging so they can actually use the twentytwenty slider.
navigation, pagination need to be used as objects
on: { ... } followed by subobjects of the event name is the new way to access events.
onSlideChangeStart doesn't exist in the new API data, slideChangeTransitionStart does so I believe it was renamed.
(This is only the script solution, you must add the appropriate html and pull in and js and css to get this to function properly)
<script>
jQuery(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper('.swiper-container', {
touchRatio: 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
on: {
init: function () {
jQuery(".swiper-slide-active .swiper-container").twentytwenty();
},
slideChangeTransitionStart: function () {
jQuery('.swiper-slide-active .swiper-container').twentytwenty();
},
},
});
});
</script>

Related

how to detect active slide Swiperjs and do something in jquery

I have an javascript object, in this object I have events and methods and im using Swiperjs for the carousel.
I have click events on carousel slides. The click on a specific slide class displays infos inside other divs.
Now I want to display these infos only when the specific slide is active, not by clicking on it. I've tried realIndex and activeIndex but it always returns 0 and can't manipulate it... In what way can I do that ?
HTML
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide webagency" style="background-image:url(assets/images/backgrounds/WebAgency.jpg)"></div>
<div class="swiper-slide noumea-touring" style="background-image:url(assets/images/backgrounds/Noumea-touring.jpg)"></div>
<div class="swiper-slide bikemap" style="background-image:url(assets/images/backgrounds/Bikemap.jpg)"></div>
<div class="swiper-slide jeanforteroche" style="background-image:url(assets/images/backgrounds/Jeanforteroche.jpg)"></div>
<div class="swiper-slide youjudge" style="background-image:url(assets/images/backgrounds/Youjudge.jpg)"></div>
<div class="swiper-slide margotdemir" style="background-image:url(assets/images/backgrounds/margotdemir.jpg)"></div>
<div class="swiper-slide tabac" style="background-image:url(assets/images/backgrounds/Tabac.jpg)"></div>
<div class="swiper-slide todolist" style="background-image:url(assets/images/backgrounds/Todolist.jpg)"></div>
</div>
JS
class Works {
constructor() {
// Variables
this.webagency = $('.webagency');
//Events
this.webagency.click(this.webagencyItem.bind(this));}
and the method
// Methods
webagencyItem() {
this.content.show();
this.title.html("Webagency (Projet 1 OCR)");
this.text.html("Intégration d'une maquette graphique en HTML CSS sans framework.");
this.url.show();
this.url.attr("href", "http://projetocferres.com/");
this.code.show();
this.code.attr("href", "https://github.com/eferdeve/Webagency");
this.card.css('box-shadow', 'inset 0px 0px 25px #6e6c6d');
}
and the js to initialize swiperjs
var myswiper = new Swiper('.swiper-container', {
effect: 'flip',
grabCursor: true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});

Swiper.js does not scroll on first page

I am building a website which uses swiper.js. When I click on a button a small swiper page will display the product details. But it does not scroll on the first page. I need to hover my mouse outside the swiper page and hover it back again to make it scroll. This is what i've tried.
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
keyboard: {
enabled: true,
onlyInViewport: false,
},
mousewheel: {
enabled: true,
invert: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
simulateTouch:false,
});
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Product Details ....
</div>
<div class="swiper-slide">
Stocks ....
</div>
<div class="swiper-slide">
Reviews ....
</div>
</div>
</div>
You may need to set a size on the .swiper-container class.
Here's an example using your code. I added the navigation buttons. Take a look at the CSS that I added below:
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
keyboard: {
enabled: true,
onlyInViewport: false,
},
mousewheel: {
enabled: true,
invert: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
simulateTouch: false,
});
html, body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Product Details ....
<div class="swiper-button-prev">
</div>
<div class="swiper-button-next">
</div>
</div>
<div class="swiper-slide">
Stocks ....
<div class="swiper-button-prev">
</div>
<div class="swiper-button-next">
</div>
</div>
<div class="swiper-slide">
Reviews ....
<div class="swiper-button-prev">
</div>
<div class="swiper-button-next">
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

Swiper.js thumbs in Angular app synced prev & next

So I am using Swiper.js for a multi-layered carousel on angular app. Essentially there was three swiper-containers, who's functionalities are supposed to complement each other. It is an extention of their Swiper thumbs gallery, where I added an extra crousel with description to the images.
Issues:
When I click on a thumnail, the main image is no selected along with it. I need it to work like the image description. Simply put, when one clicks on a thumnails, the image description and the image preview should both change correspondingly.
Oddly the Pagition count is wrong. It says 6, instead of the correct number 8.
Below is the component html:
<section class="gallery-section">
<div class="gallery-left">
<div class="swiper-container gallery-text">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of imageArray; let i = index">
<div class="image-controls">
<div class="swiper-button-prev swiper-button-mobile"></div>
<div class="swiper-pagination swiper-pagination-mobile"></div>
<div class="swiper-button-next swiper-button-mobile"></div>
</div>
<div class="image-info">
<div class="image-description">{{ image.description }}</div>
<div class="image-date">{{ image.date }}</div>
</div>
</div>
</div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of imageArray; let i = index">
<figure>
<img src="{{ image.img }}" alt="">
</figure>
</div>
</div>
</div>
<div class="swiper-button-next swiper-button-desktop"></div>
<div class="swiper-button-prev swiper-button-desktop"></div>
<div class="swiper-pagination swiper-pagination-desktop"></div>
</div>
<div class="gallery-right">
<div class="swiper-container gallery-main">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of imageArray">
<figure>
<img src="{{ image.img }}" alt="">
</figure>
</div>
</div>
</div>
</div>
</section>
Here is initialisation from the ts file:
ngOnInit() {
imagesLoaded(document.querySelector('.gallery-section'), function(instance) {
console.log('Images loaded > swiper start');
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 5,
slidesPerView: 3,
freeMode: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
watchSlidesVisibility: true,
watchSlidesProgress: true
});
var galleryText = new Swiper('.gallery-text', {
slidesPerView: 1,
thumbs: {
swiper: galleryThumbs,
},
effect: 'fade',
fadeEffect: {
crossFade: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
var galleryMain = new Swiper('.gallery-main', {
spaceBetween: 5,
slidesPerView: 1,
thumbs: {
swiper: galleryThumbs
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
});
}
Finally, a GIF which will hopefully make my issue easier to understand.
Figured it out:
ngOnInit() {
imagesLoaded(document.querySelector('.gallery-section'), function(instance) {
console.log('Images loaded > swiper start');
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 5,
slidesPerView: 3,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryText = new Swiper('.gallery-text', {
slidesPerView: 1,
effect: 'fade',
fadeEffect: {
crossFade: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
var galleryMain = new Swiper('.gallery-main', {
spaceBetween: 5,
slidesPerView: 1,
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
thumbs: {
swiper: galleryThumbs
}
});
galleryText.controller.control = galleryMain;
galleryMain.controller.control = galleryText;
});
}

Mouseup events are not working inside Swiper

I'm using Swiper to show some slides, and I have some events that run on mouseup, but they are not working with Swiper. When I click the swiper container nothing happens.
You can see it in this example, the alert doesn't work:
document.body.addEventListener('mouseup', () => { alert('mouseup'); });
const swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
pagination: {
el: '.swiper-pagination',
},
});
.swiper-container {
width: 80vw;
height: 80vh;
}
html, body {
width: 100%;
height: 100%;
}
#m {
height: 400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/js/swiper.min.js"></script>
<div id="m">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
I think it does it to avoid events interfering with the Swipe, but if the user doesn't swipe, just clicks, I would like to trigger my events.
How can I do that?
For me, just adding this touchStartPreventDefault: false on Swiper options solved my issues with "mousedown" and "mouseup".
Update Swiper and add touchStartPreventDefault: false in swiper options
document.body.addEventListener('mouseup', () => { alert('mouseup'); });
const swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
touchStartPreventDefault: false,
pagination: {
el: '.swiper-pagination',
},
});
.swiper-container {
width: 80vw;
height: 80vh;
}
html, body {
width: 100%;
height: 100%;
}
#m {
height: 400px;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div id="m">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
Swiper does that on purpose to avoid events from messing up the swipe. One way to change this behavior is to trick it to think that your elements are form elements. Internally it does a check and if the target is a form element it allows the click.
You can change Swipers init function to set the form elements data:
const i = Swiper.prototype.init;
Swiper.prototype.init = function () {
this.touchEventsData.formElements = '*';
i.call(this);
};
With that it will no longer lock mouseup events.
The following example shows an event with alert, it works but causes ux problems with the swiping.
document.body.addEventListener('mouseup', () => { alert('mouseup'); });
const i = Swiper.prototype.init;
Swiper.prototype.init = function () {
this.touchEventsData.formElements = '*';
i.call(this);
};
const swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
pagination: {
el: '.swiper-pagination',
},
});
.swiper-container {
width: 80vw;
height: 80vh;
}
html, body {
width: 100%;
height: 100%;
}
#m {
height: 400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/js/swiper.min.js"></script>
<div id="m">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>

How to stop swiper slider when autoplay activated and reaching end of slide?

How to stop slider when autoplay activated and reaching end of slide?
currently the slider keep looping to first slide after reaching end slide.
It's using version 4.0.7
HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
Js
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
loop:false,
autoplay: {
delay: 2500,
disableOnInteraction: false,
stopOnLast: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
You can listen to the event slideChange and check your swiper instance for the property isEnd - if true, you set autoplay=false:
swiper.on('slideChange', function(){
if(swiper.isEnd){
swiper.autoplay = false;
}
});
Working fiddle (full example): https://jsfiddle.net/2yhxctxf/
Update: just found an easier way :)
swiper.on('reachEnd', function(){
swiper.autoplay = false;
})
Updated fiddle: https://jsfiddle.net/2yhxctxf/1/
Documentation on the .isEnd property: http://idangero.us/swiper/api/#methods
Documentation on the events: http://idangero.us/swiper/api/#events

Categories