I am using the swiper in the jquery version from idangerous. I load and initialize it with require.js like this:
define(['jquery','swiper'],function($){
$( document ).ready(function() {
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
speed:100,
// If we need pagination
// Navigation arrows
nextButton: '.m-stage-button-next',
prevButton: '.m-stage-button-prev',
});
});
});
<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
<div class="m-stage-slide swiper-slide">
<a href="#">
<img class="m-stage-slide-image" src="../img/slide1.jpg" alt="">
</a>
<div class="m-stage-slide-content">
<div class="m-stage-slide-text">
<h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
<span class="m-stage-slide-tagline">{{sContent.text}}</span>
</div>
<span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
</div>
</div>
<div class="m-stage-slide swiper-slide">
<a href="#">
<img class="m-stage-slide-image" src="../img/slide2.jpg" alt="">
</a>
<div class="m-stage-slide-content">
<div class="m-stage-slide-text">
<h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
<span class="m-stage-slide-tagline">{{sContent.text}}</span>
</div>
<span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
</div>
</div>
<div class="m-stage-button-prev"></div>
<div class="m-stage-button-next"></div>
</div>
(Those {{}} thingis are right now just placeholders)
Everything is loaded and rendered fine, but as soon as I try to swipe, I get
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
Any hints?
Instead of this:
<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
</div>
Try separating out your DIV's, with the swiper container on the outside:
<div style="width: auto; height: 300px;" class="swiper-container">
<div class="swiper-wrapper"></div>
</div>
Check the quick start guide (point 3) for an example of the correct HTML markup for SwiperJS:
http://www.idangero.us/swiper/get-started/
<!-- Slider main container -->
<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>
In my case, it happens in this code/scenario (I use swiperContainer - HTMLElement - more than one time ==> logos in this example).
<!-- error code use logos twice -->
<div class="swiper-container logos">
<div class="swiper-wrapper logos">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
</div>
var mySwiper = new Swiper('.logos', {
speed: 400
});
Throw this error:
Very easy to fix this issue (Remove logos from this element <div class="swiper-wrapper logos">).
I don't exactly know, what the failure was. I switched to Swiper 2.7.x and this worked without a single problem.
Seems like Swiper 3.x and Require with almond have some problems at the moment.
I am using the swiper from idangerous in an Angular 1.5 application. I got the same error when swiping slides with mouse, no error changing slides by clicking on arrows.
For me this was a timing issue. I solved it by moving the init of the swiper var mySwiper = new Swiper('.swiper-container', {... to where the view was done rendering.
The quickest solution for this is to remove the CLASS 'logos' and add it as an ID 'logos' to the same element. After that select the ID as the selector in your javascript file.
Eg: HTML
<div id="logos" class="swiper-container"> <!-- This line is edited -->
<div class="swiper-wrapper logos">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
</div>
Eg: JavaScript
//.logo changed to #logo on the next line
var mySwiper = new Swiper('#logos', {
speed: 400
});
This happened to me when i tried to use some code provided from a tutorial...I checked the official docs and used their example and it worked without problems
https://swiperjs.com/get-started
Related
How to activate Swiper Slider on dynamically loaded HTML which is loaded via AJAX after submitting the form?
window.onload = function() {
const swiper = new Swiper('.worksSlider', {
// Optional parameters
loop: true,
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.4.1/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#7/swiper-bundle.min.css" rel="stylesheet"/>
<div class="worksSlider swiper-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slide 1
</div>
<div class="swiper-slide">
Slide 2
</div>
</div>
</div>
So I'm trying to use the SwiperJS library, but it doesn't work. It's a pretty big website with A LOT of content on the page I'm trying to use it for. The strange thing is, on a small testing website of myself it does work. But when I try to use it on the bigger website console throws an error.
My code:
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
And the JS:
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js" id="script-swiper"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
observer: true,
observeParents: true
});
</script>
Console error: Swiper is not defined at www.url.com/script.js
I already tried window.onload and to set a timeout of a few seconds before running new Swiper. Does anybody maybe know how to fix this?
You need to add CSS tag also in your header:
<head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"/></head>
p.s. I know it's a year later but hopefully this helps someone who comes across this question.
this is the entire code , please see what is the problem here, i have done everything given on the swiper js website. i have added the style links in the header and the required scripts in the body
<body>
<!-- Slider main container -->
<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>
<script>
const swiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
</html>
I have made a carousel which contain three images as a group.
For example:
<[1][2][3]>
Currently when you hit right arrow, it only goes one image at a time.
<[2][3][4]>
I would like to know when clicking on the arrow, how to show/advance to the next three images.
Like this:
<[4][5][6]>
Here's some code:
<div class="carousel slide" id="myCarousel" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4">image1</div>
</div>
<div class="item">
<div class="col-md-4">image2</div>
</div>
<div class="item">
<div class="col-md-4">image3</div>
</div>
<div class="item">
<div class="col-md-4">image4</div>
</div>
<div class="item">
<div class="col-md-4">image5</div>
</div>
<div class="item">
<div class="col-md-4">image6</div>
</div>
</div></div>
<script>
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
</script>
Looking at boostrap's specifications, there doesn't seem to be an option to modify this manually.You'd have to try to override it somehow, which is probably gonna be ugly and a lot of work.
I would suggest just using a library where this parameter is adjustable with only one variable. I've used slick carousel before, and it's very easy to use. If you look at the example "multiple-items" it looks like exactly what you're looking for.
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
I have found myself writing similar code a few times and im not sure of the best way to do it.
i have a few divs:
<div id="gallery1">
some content
</div>
<div id="gallery2">
some content
</div>
<div id="gallery3">
some content
</div>
<div id="gallery4">
some content
</div>
<div id="gallery5">
some content
</div>
<div id="gallery6">
some content
</div>
i will hide gallery 2 - 6 in css and then show them using jquery with the following:
$(document).ready(function(){
// shows gallery 1
$('.gallery1show').click(function(){
// prevents link from going anywhere
event.preventDefault();
// shows gallery 1
$('#gallery1').show();
// hides other galleries
$('#gallery2').hide();
$('#gallery3').hide();
$('#gallery4').hide();
$('#gallery5').hide();
$('#gallery6').hide();
});
// shows gallery 2
$('.gallery2show').click(function(){
// prevents link from going anywhere
event.preventDefault();
// shows gallery 2
$('#gallery2').show();
// hides other galleries
$('#gallery1').hide();
$('#gallery3').hide();
$('#gallery4').hide();
$('#gallery5').hide();
$('#gallery6').hide();
});
// shows gallery 3
$('.gallery3show').click(function(){
// prevents link from going anywhere
event.preventDefault();
// shows gallery 3
$('#gallery3').show();
// hides other galleries
$('#gallery1').hide();
$('#gallery2').hide();
$('#gallery4').hide();
$('#gallery5').hide();
$('#gallery6').hide();
});
... etc
});
i got a feeling that rather than using gallery1, gallery2 etc i should just give each div a class of gallery and then use this and not this in jquery. but im not sure where to start.
any advice?
I would do something like this:
var galleries = $('.gallery');
$('.show-gallery').on('click', function(e) {
e.preventDefault();
var gallery = $($(this).attr('href'));
galleries.not(gallery).hide();
gallery.show();
});
.gallery + .gallery {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery1" class="gallery">gallery 1</div>
<div id="gallery2" class="gallery">gallery 2</div>
<div id="gallery3" class="gallery">gallery 3</div>
<div id="gallery4" class="gallery">gallery 4</div>
<div id="gallery5" class="gallery">gallery 5</div>
Gallery 1
Gallery 2
Gallery 3
Gallery 4
Gallery 5
Make all div a common class "gallery" and hide it
$(".gallery").hide();
and show only that gallery which is require
$("#gallery1").show();
or write code is such a way that jQuery identify div dynamically to show it.
$('.show').on('click',function() {
$('.gallery').hide();
$($(this).attr('href')).show();
});
.gallery {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Show gallery 1
Show gallery 2
Show gallery 3
Show gallery 4
Show gallery 5
Show gallery 6
<div id="gallery1" class="gallery">
some content 1
</div>
<div id="gallery2" class="gallery">
some content 2
</div>
<div id="gallery3" class="gallery">
some content 3
</div>
<div id="gallery4" class="gallery">
some content 4
</div>
<div id="gallery5" class="gallery">
some content 5
</div>
<div id="gallery6" class="gallery">
some content 6
</div>
A bit late, but here's a working example : https://jsfiddle.net/
Guess you have given partial of your html code there, hence I assume it has some buttons to trigger the show action of gallery. Below is on that assumption how your HTML has to be
<div class="galleries">
<div id="gallery1" class="gallery active">
gallery 1
</div>
<div id="gallery2" class="gallery">
gallery 2
</div>
<div id="gallery3" class="gallery">
gallery 3
</div>
<div id="gallery4" class="gallery">
gallery 4
</div>
<div id="gallery5" class="gallery">
gallery 5
</div>
<div id="gallery6" class="gallery">
gallery 6
</div>
</div>
<div class="gallery-buttons">
<button data-id="1">Gallery 1</button> <button data-id="2">Gallery 2</button>
<button data-id="3">Gallery 3</button>
<button data-id="4">Gallery 4</button>
<button data-id="5">Gallery 5</button>
<button data-id="6">Gallery 6</button>
</div>
and css
.gallery{
display:none;
}
.gallery.active{
display:block;
}
and the js
$('.gallery-buttons button').on('click',function(){
var id = $(this).attr('data-id');
$('.gallery.active').removeClass('active');
$('.gallery[id="gallery'+id+'"]').addClass('active');
});
Here is a demo pen http://codepen.io/anon/pen/zGJaNM