I solved my problem with swiper js.
I am testing the Swiper JS. Now I would like to link from a on my website, open a swiper in an overlay an show the right slide. The number of the slide should be a part of the link.
I would like to set the slide number with a foreach. by click on a link like
Swipe to slide 3 the swiper should start in an overlay on the right slide in an overlay. I would be really happy if you have a solution for this.
To concrete my wish hier some snippets
I have a list of links like
1
2
3
4
5
here is the slider
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">ProductDescription 1 Longform</div>
<div class="swiper-slide">ProductDescription 2 Longform</div>
<div class="swiper-slide">ProductDescription 3 Longform</div>
<div class="swiper-slide">ProductDescription 4 Longform</div>
<div class="swiper-slide">ProductDescription 5 Longform</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
this is the Javascript
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
function btn1() { swiper.slideTo(0,false,false); }
function btn2() { swiper.slideTo(1,false,false); }
function btn3() { swiper.slideTo(2,false,false); }
function btn4() { swiper.slideTo(3,false,false); }
function btn5() { swiper.slideTo(4,false,false); }
</script>
I put in here jsfiddle
Related
Issue:
We are having accessibility issues on the swiper slider when pressing the enter button on the thumbnail which doesn't bring the selected image to the main image area.
is there any way if we can do so pressing the enter button changes the main image of the slider?
Scenario:
We have a swiper JS - slider (https://swiperjs.com/) set up on our website the slider works perfectly with thumbnails. that means clicking on the thumbnail, shows the specific image in the main image area.
But for the accessibility, I am trying to add "tabindex='0'" and "role='button'" so I can focus the thumbnails by pressing tabs (and this works) but pressing (enter) button doesn't bring up the selected image on the main image area.
Please see the codepen link below with the code example and you can see that you can tab through the thumbnails but hitting enter on the thumbnail doesn't do anything:
Code with the demo link:
https://codepen.io/asifkhanlush/pen/oNjvVpG?editors=1111
Code:
HTML:
<body>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div tabindex="0" role="button" class="swiper-slide">
<div class="swiper-slide-container">Slide 1</div>
</div>
<div tabindex="0" role="button" class="swiper-slide">
<div class="swiper-slide-container">Slide 2</div>
</div>
....
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div tabindex="0" role="button" class="swiper-slide">
<div class="swiper-slide-container" >Slide 1</div>
</div>
<div class="swiper-slide" tabindex="0" role="button">
<div class="swiper-slide-container">Slide 2</div>
</div>
...
</div>
</div>
JS:
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
loopedSlides: 4
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
loop: true,
loopedSlides: 4
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
This is a bug/missing feature in Swiper (https://github.com/nolimits4web/swiper/issues/4324), but I found a workaround.
Basically, add data-slide-index to all thumbs and add a keydown listener to the thumbnail elements:
galleryThumbs.$el.on("keydown", (e) => {
if (e.keyCode !== 13 && e.keyCode !== 32) return;
var slideIndex = e.target.dataset.slideIndex;
if (!slideIndex) return;
galleryThumbs.slideTo(slideIndex);
galleryTop.slideTo(slideIndex);
});
Here's the full code with a demo: https://codesandbox.io/s/swiper-thumbs-gallery-forked-2d1up?file=/index.html.
I'm working on a page that contains two vertical sliders. But on clicking down arrow button or on mouse scroll, I want one to slide up words (bottom to top) and the other downwards (top to bottom). How can I implement this?
My code basically looks something like this:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-container swiper-container-v swiper-left">
<div class="swiper-pagination swiper-pagination-v"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide">Vertical Slide 2</div>
<div class="swiper-slide">Vertical Slide 3</div>
<div class="swiper-slide">Vertical Slide 4</div>
<div class="swiper-slide">Vertical Slide 5</div>
</div>
</div>
<div class="swiper-container swiper-container-v2 swiper-right">
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide">Vertical Slide 2</div>
<div class="swiper-slide">Vertical Slide 3</div>
<div class="swiper-slide">Vertical Slide 4</div>
<div class="swiper-slide">Vertical Slide 5</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
Script like this:
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
});
var swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical',
spaceBetween: 50,
keyboard: {
enabled: true,
},
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
loop: true,
});
var swiperV2 = new Swiper('.swiper-container-v2', {
direction: 'vertical',
spaceBetween: 50,
keyboard: {
enabled: true,
},
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
loop: true,
reverseDirection: true
});
If you are using this swiper there is the navigation object you need to add to your configuration.
Something like in the example the guys that are developing the Swiper are reporting in their API:
var mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});
If you want to invert the standard swiping (direction of swipe) you just need to swap the classes that reference your arrows in the configuration.
var mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-prev',
prevEl: '.swiper-button-next'
}
});
I set up Swiper Slider as per the documentation and every slide slides as if one.
<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>
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
slidesPerView: 1,
});
I also tested it on CodePen with the same result, so I know it's not something in my project: https://codepen.io/DasRollo/pen/YzzMrgP
Can anyone replicate this?
I had the same problem. In my case I added:
import '../../../node_modules/swiper/css/swiper.min.css';
And it's working.
In my case problem was that I didnt add swiper-slide class for each slider item, so solutiom was just add swiper-slide class
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div> // add "swiper-slide" class!
<div class="swiper-slide">Slide 2</div> // add "swiper-slide" class!
<div class="swiper-slide">Slide 3</div> // add "swiper-slide" class!
</div>
</div>
My swiper settings after npm install swiper
import Swiper, {Navigation} from 'swiper';
import 'swiper/swiper-bundle.css';
Swiper.use([Navigation]);
const swiper = new Swiper('.swiper-container', {
breakpoints: {
768: {
slidesPerView: 2,
},
1440: {
slidesPerView: 3
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 1,
});
If you use webpack check css loaders
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
i was missing ----> import "swiper/css";
In your codepen you forgot to include the css that the plugin also needs to function properly. Not entirely sure if that's what you meant you issue was, but if so, try the code below.
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
slidesPerView: 1,
});
.swiper-slide {
padding: 2em;
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<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>
⚠️⚠️⚠️
Slides can missbehave, resulting into beeing on side 1, if you change their width.
In my example i set the width to 150px. All slides were on side 1. There were 9x additional empty sides. I inspected the slides and saw their automatic set width was crossed. Uncrossing it fixed the problem.
Maybe you also set width on them.
Maybe you set a additonal class on the div element, which sets the width:
I had to set navigation despite I did not need it:
navigation: {
prevEl: null,
nextEl: null,
},
I am using chocolat.js with swiper.
<div class="swiper-container">
<div class="swiper-wrapper chocolat-parent">
<div class="swiper-slide">
<a href="..." class="chocolat-image">
<img src="..." alt="swiper image">
</a>
</div>
<div class="swiper-slide">
<a href="..." class="chocolat-image">
<img src="..." alt="swiper image">
</a>
</div>
</div>
</div>
Something like this. The issue is some images open in a new tab instead of chocolat popup. I was testing that behaviour for some time and I realised the problem is "loop: true" property in swiper object. Duplicated slides (swiper's loop works like this - duplicate slides) seems to not work properly and just open in a new tab. I tried to reinitiate chocolat after event "changeSlide" but it didn't help. Any ideas?
JS:
$('.chocolat-parent').Chocolat().data('chocolat');
new Swiper ('.swiper-container', {
loop: true,
speed: 450,
autoplay: {
delay: 3000,
},
navigation: {
nextEl: '.swiper-button-right',
prevEl: '.swiper-button-left',
},
});
Simple initiation. nothing more
I'm using fullpagejs and AOS to make some divs popping up from the bottom of the page on scroll (or at least that's what I'd like to achieve).
Unfortunately, it is not working.
Yes, I've read the FAQ sections of fullpage and yes, scrollbar is set to true and autoscroll is set to false.
My setup is the following:
<div class="section" id="test">
<div class="slide">
<div class="section">
{someOtherContent}
<!-- div i want to animate is down below -->
<div data-aos="slide-up">test</div>
</div>
</div>
<div class="slide"></div>
<div class="slide"></div>
</div>
$('#test').fullpage({
lazyLoading: false,
lockAnchors: true,
scrollingSpeed: 300,
fitToSection: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopHorizontal: false,
offsetSections: false,
resetSliders: false,
scrollOverflow: true,
scrollOverflowReset: true,
touchSensitivity: 0,
bigSectionsDestination: top,
keyboardScrolling: false,
animateAnchor: false,
recordHistory: true,
controlArrows: false,
verticalCentered: true,
responsiveWidth: 0,
responsiveHeight: 0,
sectionSelector: '.section',
slideSelector: '.slide',
scrollBar:true
//events
afterLoad: function (anchor, index( {
initArrowEventListener()
}
the afterLoad event function simply initialises my menu links (based on the slide index) and the only relevant part is that I initialise AOS when I click on one specific link (as I want the library to work only on a specific page and not everywhere.
So, I load the page, click to navigate on the slider page I want, the function is called (console log proofs it, as well as AOS classes are applied to the relevant div), I can see the scrollbar, but nothing, the div is not popping up from the bottom.
Any idea what am I doing wrong here?
There used to be this pen illustrating the same problem. Click on "About" (the function that initialises AOS is called as the one for the title works as well), scroll to the bottom and you will see a lot of white space. If you inspect the console, AOS is initialised on the element (its classes are applied) but the element never slides up)
Use only the css part of AOS and hook up aos-animate on fullpage.js callbacks.
Add the AOS body data manually
<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">
Add the aos-init class
$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });
Toggle the aos-animate class with fullpage.js callbacks
$('#fullpage').fullpage({
slidesNavigation: true,
controlArrows: false,
onLeave: function(){
$('.section [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
onSlideLeave: function(){
$('.slide [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
afterSlideLoad: function(){
$('.slide.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
},
afterLoad: function(){
$('.section.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
}});
Example HTML
<div id="fullpage">
<div class="section" id="section0">
<div class="intro">
<div data-aos="fade-up">
<h1>fade me up!</h1>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<div data-aos="zoom-in">
<h1>zoom me in!</h1>
</div>
</div>
</div>
<div class="slide">
<div class="intro">
<div data-aos="flip-down">
<h1>flip me down!</h1>
</div>
</div>
</div>
</div>