Hey guys,
I got a weird problem on the projects page. I used the swiper.js script (please see the on the projects page)
And the issue is that the arrow on the first collection item is misaligned. I can’t seem to get this fixed. The rest of the collections items look just fine
Could someone help me with this?
Still need the problem to be solved. I tried playing within Webflow but didn’t get anything sorted out yet
Hi @AliSaeed this is not a WF issue, you have to go through Swiper documentation on you own initiative to find how it should be set correctly to not grey out arrows on endless carousel.
Hi Stan,
Thanks for the reach out. I’m still learning how to get the hang of it. How do I change the settings from there? Could you guide me a little?
hi @AliSaeed when you open examples in sandbox you can see that arrows have class swiper-button-next and swiper-button-prev that are used with SwiperJS
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
the easier way how to force these not to be faded out is to use CSS to force these.
.swiper-button-next{
opacity: 1;
}
But as you do injection of some custom js to manipulate slider from your server https://weblocks.io/script-66-529.js you should fix it there.
Good luck
Thanks Stan! Going through these links
But the problem isn’t the fading. The problem is that the first arrow on the first item is not placed properly.
It should actually be like below
In the sandbox you provided me, I don’t see such a code that plays with the movement. Or am I missing something?
I can’t figure out how to edit https://weblocks.io/script-66-529.js in Sandbox.
Thank you for guidance bro, appreciate it 
IMO misleading in this case is that arrow has opacity: 0.7 as you can slide back to last slide and arrow should have opacity 1.
I have misread word misaligned. 
I’m sorry but I do not have time to investigate all your setting you have done and tell you how to customise your own code you have programmed for this slider and hosting it on your server somewhere. If you have it just copy pasted link from someone else you should contact person who owns it and ask him/her for guidance how to remove margin bottom and opacity on arrow for first slide.
Another option is delete link to someone else code and read documentation. Create your custom code to make slider work is not too complicated and it will be just a few lines of code.
There are some to me strange styling settings I do not understand why they are set the way they are.
Insert this code somewhere as CSS
.arrow-end{
margin:0px!important;
}
Thanks Franz, that looks like it might just work. But I figured it out with the help of @jonathanharing. I had an ID on the arrows that had to be removed. And it started working as expected
No worries bro. All the best
A question about Swiper. Swiper is definitely the best API I’ve seen for Webflow users but I don’t have access to the Webflow engine and CSS is not my strong suit. It was recommended in the Webflow Forum. Something is amiss here; Swiper is not working on my Webflow site but it IS working in a [JS Fiddle.
thoughtful ape 294 test - JSFiddle - Code Playground](thoughtful ape 294 test - JSFiddle - Code Playground)
The JavaScript loads data from a Xano API and generates text that creates a
I set the tag to 'contain" to respect the aspect ratio of the image (which is important) but I would like to display the image centered vertically (if the image is “short”) and / or centered horizontally when the aspect ratio requires. All displayed within a 340px by 700px container for mobile devices.
There is a scroll bar at the bottom of the screen I also can’t manipulate and the right arrow isn’t behaving either. Any help much appreciated!!!
