Comments (17)
Hi, i can't see the second "non working" swiper on the page. Add the second swiper and i will take a look
from swiper.
Sorry, now it´s there.
from swiper.
Ok, its simple. This code:
var mySwiper = new Swiper('.swiper-container', {pagination:'.pagination-sd'}, { speed: 750, mode: 'horizontal' })
will init only one (first) swiper on a page. Add additional unique classes for "swiper-container" and do it like:
var mySwiper1 = new Swiper('.swiper-container1', {pagination:'.pagination-sd'}, { speed: 750, mode: 'horizontal' }) var mySwiper2 = new Swiper('.swiper-container2', {pagination:'.pagination-sd'}, { speed: 750, mode: 'horizontal' })
from swiper.
Thanks for your help. Now it works like a charm!
from swiper.
Hi, it would be nice to enable multiple swipers with one class. That way, we could create for example a class named "horizontal-swiper" and initialize it once for all of the elements that has the class as they are all the same. I'm aware that i can just create some kind of "each" loop and give each of them a unique id and initialize them, but i'm loosing that way the option to re-initialize them, change settings and so on using one var.
for example, we could re initialize all of the swiper like this:
var swipers = $(".horizonal-swipers").swiper(); // first initialize the swipers..
// re initialize after something happened
swipers.reInit();
This kind of feature could be a huge advantage for us as developers.
from swiper.
Hi, it is actually already possible in yesterday 1.8.5 update, because now it can accept HTML Element as container on initialization, not only css selector like before. So you can easily use it like:
$('.horizontal-swipers').each(function(){ $(this).swiper() })
If you do var swipers = $(".horizonal-swipers").swiper();
then only first will be initialized. That is done because it returns swiper object, not jQuery collection.
Also when initialized with jQuery you can access to Swiper object of current slider like $('.horizontal-swipers').data('swiper')
from swiper.
thanks, seems neat and clean. i just hope we will find a solution for the "rtl" issue and this is gonna be a perfect solution for my projects
from swiper.
Yeah , "rtl" seems to be a big problem, i look for solution
from swiper.
maybe it will help you.. "old" swipers have been always developed using "margin-left" attribute.. every-time we have been added any value to the margin-left, the slider moved to the right.. when we developed such things for RTL based sites, we just flipped the behavior and made it depending on "margin-right" and not "margin-left".. i guess that there needs to be a similar adaption (im just not familiar with the webkit swipe feature that you used in this one so im not sure how to flip it).
from swiper.
Ok, will try to reverse values
from swiper.
Thanks for creating this plugin--I know it will work great once I figure out how to implement changes. I want multiple swipers on one page as part of a gallery, but my efforts to alter the code have fallen short. I'm a beginner, learning as I go trying to create a new responsive website. In addition to the multiple swipers, I want the size to be responsive, but haven't been successful with 100% on width and height. You can see the site here:
http://www.kathleenphelpsdesign.com/mobiletest2b.html#cardfront
I've tried everything I can think of and not post for help, but I can't manage to find a solution on my own. Can you help?
from swiper.
I figured out the multiple swiper issue, but haven't figured out the height issue. I've updated the link... Saw item #162, does this mean swiper doesn't work yet in these circumstances?
from swiper.
@LarkinAngel Check temporary solution in #162
from swiper.
html:
<section id="slider" class="swiper-slider swiper-container"
data-autoplay="5000" data-loop="true">
<div class="swiper-wrapper">
<div class="swiper-slide">
....
</div>
<div class="swiper-slide">
...
</div>
</div>
<ol class="swiper-pagination"></ol>
<a href="#" class="swiper-control swiper-control-left">
<i class="fa fa-angle-left"></i>
</a>
<a href="#" class="swiper-control swiper-control-right">
<i class="fa fa-angle-right"></i>
</a>
<div class="swiper-loading">
<i class="fa fa-spinner fa-spin fa-3x"></i>
</div>
</section>
(function ($) {
$(function () {
var swiperSliderContainer = $('.swiper-slider');
if (swiperSliderContainer.length == 0) return;
swiperSliderContainer.each(function () {
var $this = $(this);
var options = {
loop: true,
calculateHeight: true
};
$.extend(options, $this.data());
var loading = $('.swiper-loading', $this);
if ($('.swiper-pagination', $this).length != 0) {
var paginationClass = 'swiper-pagination-' + $this.index();
$('.swiper-pagination', $this).addClass(paginationClass);
var pagination = '.' + paginationClass;
$.extend(options, {
pagination: pagination,
paginationClickable: true
});
}
$this.imagesLoaded(function () {
loading.hide(0);
$this.fadeIn();
var slider = $this.swiper(options);
var swiperControl = $('.swiper-control', $this);
if (swiperControl.length != 0) {
swiperControl.on('click', function (e) {
$this = $(this);
e.preventDefault();
if ($this.hasClass('swiper-control-left')) {
slider.swipePrev();
} else {
slider.swipeNext();
}
})
}
});
});
});
})(jQuery);
I use this code for my site it work but when i click on any control or pagination swiper don't continue autoplay. (I use swiper 2.5.1)
from swiper.
Hi nolimits4web
with your code to init multiple swipers (each function .. $(this).swiper()) ...
how can i add the plugin hashnav and then have different links for the single slides like
( from another post if you with
swiper 1
link 1 link 2
swiper 2
link 1 link 2
Thanks (swiper 2.6.1)
from swiper.
Hi in the demos i found the "tabs-feedback",
that's exactly what i want, thank you.
Tom.
from swiper.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from swiper.
Related Issues (20)
- Customize pagination style
- Not looping smoothly with freeMode enabled
- swiper thumbs work differently depending on direction swiped.
- First image not loading initially in Swiper with dir="rtl" in Next.js HOT 1
- Virtual + loop with amount of slides less or equal to 3 leads to rendering duplicates
- maxBackfaceHiddenSlides parameter doesn't work when given less than 10 HOT 1
- `navigation-hide-on-click="true"` hides navigation when clicking nextEl/prevEl HOT 4
- Coverflow Effect Issue on new iOS Devices HOT 1
- `slidesPerView: "auto"` and virtual slides support HOT 1
- Slider backface hidden on updating the slides
- Thumbs Module not working on Strict Mode
- Can't swipe when swiper slides are clickable elements HOT 1
- react__WEBPACK_IMPORTED_MODULE_0__.createContext is not a function in Next.js 14.2.3 HOT 4
- Direction vertical, web components and it's fix HOT 1
- Ability to disable image lazy loading listeners HOT 9
- When using the horizontal mode of the scroll container, there are problems that are inconsistent with expectations. HOT 1
- swiper.slideTo(5) Jumps to Penultimate Image Instead of Last Image HOT 4
- Weird behavior of Swiper.js in Next.js 13 & 14 HOT 1
- slideTo animation gets cancelled when resizing browser window HOT 2
- Swiper appendSlide method doesn't work properly when virtual slides are enabled. (web-component) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from swiper.