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>
Related
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',
},
});
I am encountering a strange problem.
I am using swipe on materialize tabs and when i make swipe without the modal it works fine but when i include them in the modal the swipe feature does not work anymore
$(document).ready(function() {
$('.modal').modal();
$('.tabs').tabs({
swipeable: true
});
})
div.tabs-content.carousel.carousel-slider {
height: 200px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>
<li><a href='#profession-registration-modal' class='orange darken-1 modal-trigger'>Open</a></li>
<div id="profession-registration-modal" class="modal">
<div class="modal-content">
<h4>Register your profession</h4>
<div class="row">
<div class="col s12">
<ul id="tabs-swipe-demo" class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
<li class="tab col s3">Test 3</li>
</ul>
<div id="test-swipe-1" class="col s12 blue">Test 1</div>
<div id="test-swipe-2" class="col s12 red">Test 2</div>
<div id="test-swipe-3" class="col s12 green">Test 3</div>
</div>
</div>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>
Here is the fiddle: jsfiddle
Because the modal is hidden by default, normal initialization of tabs within modals won't work. You can use callbacks like onOpenEnd to reinitialize your tabs so that they render correctly once the modal is fully opened.
$('.modal').modal({
onOpenEnd: function(el) {
$(el).find('.tabs').tabs({ swipeable: true });
}
});
Here is an updated fiddle that uses that callback: https://jsfiddle.net/y7rmbd6w/14/
Since jQuery is no longer a dependency in Materialize CSS, so in order to do it with vanillaJS, one can use this -
document.addEventListener('DOMContentLoaded', function() {
const options = {
onOpenEnd: (el) => {
M.Tabs.init(el.querySelector('.tabs'), {
swipeable: true
});
}
}
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems, options);
});
I'm trying to have it where pressing "btn1" alone populates the sidebar. I tried $("#container").on("click", ".btn1", function() but it doesn't work.
$("#container").on("click", ".item", function() {
$("#title").text($(this).find(".title").text());
var itemImgSrc = $(this).find(".image").attr("src");
$("#image")
.css("background-image", 'url("' + itemImgSrc + '")')
.css("background-repeat", "no-repeat");
});
#container {
display: flex;
height: 100px;
}
.image {
height: 100px;
}
#image {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<!-- Item 1 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Dog</div>
<img class="image" src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
</div>
<!-- Item 2 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Cat</div>
<img class="image" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx">
</div>
<!-- Sidebar Div -->
</div>
<div class="modal">
<h2 id="title"></h2>
<div id="image"></div>
</div>
.title and .image are not contained in .btn1. You need to go up to the containing .item and then find them.
$("#container").on("click", ".btn1", function() {
var item = $(this).closest(".item");
$("#title").text(item.find(".title").text());
var itemImgSrc = item.find(".image").attr("src");
$("#image")
.css("background-image", 'url("' + itemImgSrc + '")')
.css("background-repeat", "no-repeat");
});
#container {
display: flex;
height: 100px;
}
.image {
height: 100px;
}
#image {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<!-- Item 1 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Dog</div>
<img class="image" src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
</div>
<!-- Item 2 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Cat</div>
<img class="image" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx">
</div>
<!-- Sidebar Div -->
</div>
<div class="modal">
<h2 id="title"></h2>
<div id="image"></div>
</div>
You could also use $(this).siblings(".title') and $(this).siblings(".image").
You need to change $(this) to $(.btn1).
$(this) being the button clicked works for .btn1 and not for .btn2, changing it from dynamic $(this) to always looking for .link in .btn1 should solve it.
Have you tried using $(this).parent().find(".title"). You could move up the heirarchy and get the element from there and then
$("#container").on("click", ".item", function() {
$("#title").text($(this).parent().find(".title").text());
var itemImgSrc = $(this).parent().find(".image").attr("src");
$("#image")
.css("background-image", 'url("' + itemImgSrc + '")')
.css("background-repeat", "no-repeat");
});
#container {
display: flex;
height: 100px;
}
.image {
height: 100px;
}
#image {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<!-- Item 1 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Dog</div>
<img class="image" src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
</div>
<!-- Item 2 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Cat</div>
<img class="image" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx">
</div>
<!-- Sidebar Div -->
</div>
<div class="modal">
<h2 id="title"></h2>
<div id="image"></div>
</div>
Also try using an index with the find method. it returns an array but i dont think that giving index is necessary when there is only one element.
something like this
$(this).parent().find(".item")[0].text();
I want to continuously fade 2 pieces of content in and out of the same position. Currently the fade in fade out works but the content is below the other content and they are both viewable when the document loads.
To put it simply the content will keep switching between #fade1 and #fade2.
HTML:
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p id="fade2" style="opactiy:0">test</p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- text slider -->
JS:
$(document).ready(function () {
// runs fade code for homepage content
fadeThem();
}
// fades content in and out on homepage
function fadeThem() {
$("#fade1").fadeOut(3000, function() {
$("#fade2").fadeIn(2000, fadeThem());
$("#fade2").fadeOut(2000, fadeThem());
$("#fade1").fadeIn(2000, fadeThem());
});
}
Why don't you put your code in : $( window ).load(function() {} ;
Something like this :
$( window ).load(function() {
// -- Snipped -- //
$(".right-image-crm").addClass('right-image-up');
$(".left-image-crm").addClass("left-image-up");
$(".center-image-crm").addClass("center-image-up");
$(".loader").fadeOut(1000,function(){
}
});
Working Code (JS Fiddle): http://jsfiddle.net/nfdebmen/4/
You can have any Number of PlaceHolders in this code. I have made 4.
var _toggle = {
totalNodes: null,
lastNode: 0,
duration: 1000,
init: function () {
_toggle.totalNodes = $(".toggle").length;
_toggle.next();
},
next: function () {
var nextNode = _toggle.lastNode + 1;
if (nextNode >= _toggle.totalNodes) {
nextNode = 0;
}
//
$(".toggle:eq(" + _toggle.lastNode + ")").fadeOut(_toggle.duration, function () {
$(".toggle:eq(" + nextNode + ")").fadeIn(_toggle.duration);
_toggle.next();
});
_toggle.lastNode = nextNode;
}
}
$(document).ready(function () {
_toggle.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p class = "toggle active">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p class = "toggle" style = "display: none;">test</p>
<p class = "toggle" style = "display: none;">Ahsan</p>
<p class = "toggle" style = "display: none;">http://aboutahsan.com</p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- text slider -->
Try using .fadeToggle()
$(document).ready(function() {
var p = $("p[id^=fade]");
function fadeThem() {
return p.fadeToggle(3000, function() {
fadeThem()
});
}
fadeThem();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p id="fade2" style="display:none">test</p>
</div>
<!-- col -->
<div class="col-md-4">
<p></p>
</div>
<!-- col -->
<div class="col-md-4">
<p></p>
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- text slider -->
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>