We Keep Coding

Slick Slider styles

This question was migrated from Webmasters Stack Exchange because it can be answered on Stack Overflow.
Migrated 22 hours ago.
I'm trying to create a gallery slider using slick slider js library. A basic mobile responsive gallery carousel with a progress bar. Everything is running however I'm having trouble with some styling. I want the effect of the gallery center image to be raised above the other 2 (half) slides in the background. For some reason- I can't achieve the center padding effect and the slides are jumping a little when its on autoplay. The widths are also messed up responsively. Im not sure why none of my styles are working correctly. I attached my html code(without the actual image links) and how I initialized it in my js. I also attached some css that I had implemented (I had originally fully styled it- but I took out the styles because it really got messy).
Any advice how to proceed will be greatly appreciated
//Initialize slick slider
$(document).ready(function() {
$(".coverflow").slick({
dots: false,
arrows: true,
infinite: true,
centerMode: true,
centerPadding: '150px',
variableWidth: true,
focusOnSelect: true,
speed: 1000,
autoplay: true,
autoplaySpeed: 2500,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
}, ],
});
});
//add slick-center class to create the carousel effect
$(document).ready('.coverflow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-center').removeClass('slick-center');
$('.slick-slide').eq(nextSlide).addClass('slick-center');
})
//add the slick container class
;
$(document).ready('.coverflow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-center .slide-container').removeClass('slick-center');
$('.slick-slide').eq(nextSlide).find('.slide-container').addClass('slick-center');
});
//progress bar for slick slider
$(document).ready(function() {
var $slider = $('.coverflow');
var $progressBar = $('.progress');
var $progressBarLabel = $('.slider__label');
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc);
$progressBarLabel.text(calc + '% completed');
});
});
.progress {
max-width: 800px!important;
margin-right: auto;
margin-left: auto;
display: block;
width: 75%;
height: 3px;
border-radius: 3px;
overflow: hidden;
background-color: #5B5B5B;
background-image: linear-gradient(to right, #FA5927, #FA5927);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
margin-top: 55px;
}
.slide-number {
color: #FA5927;
font-family: 'PT SANS';
font-size: var(--wp--preset--font-size--medium)!important;
padding: 10px;
}
.slide-container {
margin-right: 50px;
margin-left: 50px;
}
#media only screen and (max-width:880px) {
/*--gallery slider--*/
.coverflow img {
width: 70%;
margin: auto;
}
}
#media only screen and (max-width:787px) {
/*--gallery slider--*/
.coverflow img {
width: 50%;
margin: auto;
}
}
#media only screen and (max-width:414px) {
/*--gallery slider--*/
.coverflow img {
width: 35%;
margin: auto;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="slider">
<section class="coverflow">
<div class="slide-container">
<span class="slide-number">01</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">02</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">03</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">04</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">05</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">06</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
</section>
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only">
</span>
</div>
<!-- end content -->
</div>

Why are my swiper js slides very big and not showing the right amount I specified

I am trying to build a swiper slider with the following layout:
<div id="brokerCarousel" class="swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
#foreach($partners as $partner)
<div class="swiper-slide">
<img src="{{ $partner->media('logo')->first() !== null ? $partner->media('logo')->first()->getUrl(800,600,'canvas') : '' }}" alt="{{ $partner->name }}">
</div>
#endforeach
</div>
</div>
</div>
I then have my JS code:
brokerCarousel() {
if (document.getElementById('brokerCarousel')) {
new Swiper('#brokerCarousel .swiper-container', {
slidesPerView: 10,
spaceBetween: 30,
autoplay: {
delay: 2500,
},
breakpoints: {
576: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
1200: {
slidesPerView: 5,
}
}
});
}
}
Where I set slides to 5.
My scss:
#brokerCarousel {
&.swiper{
width: 100%;
height: 100%;
.swiper-container {
max-height: 100%;
.swiper-wrapper {
.swiper-slide {
background-color: #fff;
padding: 30px;
border-radius: 10px;
img {
height: 200px;
width: auto;
}
}
}
}
}
}
But this is what my slides look like:
As you can see there are only two slides in view which is wrong by itself but they are also very wide. When I inspect the .swiper-slide in my inspector I see this style is applied: width: 1600px; margin-right: 30px;. My container is 1440px so one slide can never be 1600px when I have it set to 5.
What am I missing?

Swiper JS - show part of next slide

I want to show a part of the second slide into view. Around 20-30%.
I have set slidesPerView to 2.1 (on mobile devices!) to show part of the next slide.
However, when scrolling through the slides it does not snap to the start of the container which results in parts of slides not within the view when scrolling through the swiper.
I've tried setting the height of the slide at 70% but this gives the same issue. I've also been fiddling with the slidesOffsetAfter parameter but no luck.
Slide show snap to start of the container showing the whole image
Next slide should be partially visible
To see the current state of the project: live dev environment
You can see the issue on desktop in horizontal swiper and on tablet view in the vertical swiper.
CSS
<!-- swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
#media screen and (max-width: 1079px){
.swiper-section {
justify-content: flex-start;
margin-top: 194px;
}
}
#media screen and (max-width: 1079px){
.main-navigation {
left: 45px;
top: 45px;
}
}
#media screen and (max-width: 1079px){
.sub-navigation {
right: 45px;
top: 45px;
}
}
#media screen and (max-width: 1079px){
.swiper-container {
height: 965px;
}
}
.swiper-slide {
padding-bottom: 45px;
}
#media screen and (max-width: 1079px) {
.swiper-slide {
padding-bottom: 0px;
}
}
.swiper-slide:nth-child(even) {
height: 75%;
width: 45vw !important;
}
.swiper-slide:nth-child(odd) {
height: 100%;
width: 55vw !important;
}
#media screen and (max-width: 1079px) {
.swiper-div {
margin: 0px 45px 0px 45px;
}
}
#media screen and (max-width: 1079px) {
.swiper-slide:nth-child(even) {
height: 100%!important;
width: 100% !important;
}
}
#media screen and (max-width: 1079px) {
.swiper-slide:nth-child(odd) {
height: 100%!important;
width: 100% !important;
}
}
.swiper-slide>img {
object-fit: cover;
width: 100%;
height: 100%;
}
.swiper-button-prev,
.swiper-button-next {
display: none;
}
.swiper-container-horizontal>.swiper-pagination-progressbar {
width: 175px;
margin-left: 65px;
border-radius: 50px;
}
.swiper-pagination-progressbar {
margin-top: 733px;
background: #bababa;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #888888;
}
.swiper-container-horizontal>.swiper-pagination-progressbar {
height: 12px;
}
.swiper-container-vertical>.swiper-pagination-progressbar {
display: none;
}
</style>
JS
<!-- swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Swiper - Extra Step - add arrows and pagination html markup by code (Append) -->
<script>
var swiperNodes = "";
var pagination = '<div class=swiper-pagination></div>';
var next_prev_buttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
var scrollbar = '<div class="swiper-scrollbar"></div>';
var swiperNodes = swiperNodes.concat(pagination, next_prev_buttons);
/* loop throw all swipers on the page */
$('.swiper-container').each(function( index ) {
$( this ).append(swiperNodes);
});
</script>
<!-- swiper JS Initialize -->
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
slidesPerView: 1,
spaceBetween: 30,
freeMode: false,
loop: true,
centeredSlides: false,
// Enable lazy loading
lazy: true,
mousewheel: {
invert: true,
},
keyboard: {
enabled: true,
onlyInViewport: false,
},
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
},
keyboard: {
enabled: true,
},
breakpoints: {
0: { /* when window >=0px - webflow mobile landscape/portriat */
slidesPerView: 1,
spaceBetween: 10,
slidesOffsetBefore: 0,
direction: 'vertical',
},
767: { /* when window >= 767px - webflow tablet */
slidesPerView: 2.1,
spaceBetween: 30,
slidesOffsetBefore: 0,
direction: 'vertical',
},
1279: { /* when window >= 988px - webflow desktop */
slidesPerView: 2,
spaceBetween: 20,
slidesOffsetBefore: 0,
}
},
/* uncomment if you want autoplay slider
autoplay: {
delay: 3000,
},
*/
/* uncomment if you want scrollbar
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
},
*/
})
</script>

you can change slidesPerView to float number for example 1.5 and if you set optional parameter to centeredSlides: true,loop: trueyou can see little of both prev and next slider

This one will show a partial view of the next and previous slide. In my case it's a full width carousel so I'm using vw in the CSS, but you can use pixels or %
const swiper = new Swiper( selector, {
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
slidesPerGroup: 1,
paginationClickable: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
} );
And the CSS:
.swiper-slide {
width: 80vw;
}

I've managed to show a part of the next slide only and both creating a div outside the div.swiper-container and style the inner div with padding, which can create the wanted effect.
If you only want to show the preview of the next, style only the padding-right or padding-left and you should be good to go.
The padding applied should consider the spaces between the containers. In my case the spaceBetween was 10, so I used 20px as padding.
Here's some pseudo code:
<script>
const swiper = new Swiper( '.my-class', {
slidesPerView: 2,
spaceBetween: 10,
slidesPerGroup: 2,
centeredSlides: false,
loop: true,
paginationClickable: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
} );
</script>
<style>
.full-width {
margin: 0 calc(-100vw / 2 + 100% / 2) !important;
width: 100vw;
}
.my-class {
padding: 20px;
}
</style>
<div class="full-width">
<div class="swiper-container my-class">
...
</div>
<div>

here is my experience:
i want 5 slide items,
the start item and end item show perfect half size.
$_offset_x: half size of each item, i use percentage according to the design.
.swiper-wrapper {
// left: $_offset_x!important;
left: 9.63%!important;
}
use media query if you have addtional need for mobile.

If you want to show 1 Slide Full and 2nd slide half you can use the config like
slidesPerView: 1.2, Working in swiper version 8.3

How can I make a Swiper slider like App Store?

I want make a slider with Swiperjs like Apple App Store carousel (you can see at Games tab).
I tried to make it in Vue Swiper (a package for vue) here:
HTML code:
<div id="app">
<h1>Slider</h1>
<!-- Slider main container -->
<vue-swiper url="http://www.google.com"></vue-swiper>
<div>
CSS:
ody {
background: #f0f0f0;
font-family: Tahoma;
}
#app{
width:400px;
height:700px;
background:white;
margin: auto;
border-radius: 10px;
}
h1 {
padding: 30px 10px 0 10px;
}
.swiper-container {
padding-top: 10px;
width: 100%;
height: 180px;
}
.swiper-slide {
width: 300px;
border-radius: 5px;
text-align: center;
color: #fff;
background: url('https://i.vimeocdn.com/video/376634544.jpg?mw=1920&mh=1080&q=70');
background-size: cover;
}
Javascript code:
ue.component('vue-swiper', {
data: function() {
return {
imageItems:[]
};
},
props:['url'],
mounted: function () {
var mySwiper = new Swiper ('.swiper-container', {
slidesPerView: 'auto',
spaceBetween: 10,
centeredSlides:true,
direction: 'horizontal',
loop: false,
// pagination: '.swiper-pagination',
// paginationType:'bullets',
nextButton: false,
prevButton: false,
});
},
template:`
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
// <div class="swiper-pagination"></div>
</div>
`
});
var app = new Vue({
el: '#app',
data: {
},
})
How can I make the first slide float to left and the last slide float to right, like this:
In my code, the first slide and the last slide are centered.

I think I really resolved my issue.
On mounted, when Swiper initiate, I add custom style
on: {
init: function () {
document.getElementById('wrapper').style.transform = "translate3d(10px, 0px, 0px)"
},
}
On touchend (swiper event)
mySwiper.on('touchEnd', function () {
setTimeout(() => {
if (mySwiper.activeIndex == 0) {
document.getElementById('wrapper').style.transform = "translate3d(10px, 0px, 0px)"
}
if (mySwiper.activeIndex == mySwiper.slides.length - 1) {
var translate_last = mySwiper.snapGrid[mySwiper.activeIndex] + mySwiper.snapGrid[0] + 10;
var translate_style = 'translate3d(-' + translate_last + 'px, 0px, 0px)';
document.getElementById('wrapper').style.transform = translate_style
}
}, 10);
});
Check my new Codepen

u fire the event only at the end.
if u slide back it wouldn't transform slides back to initialtion-part.
change it to mySwiper.on('progress', ...
swiper.on('progress', function(){
setTimeout(() => {
if (swiper.activeIndex == 0) {
$(".swiper-slide").css('transform', 'translate3d(125px, 0px, 0px)');
}
if (swiper.activeIndex == swiper.slides.length - 1) {
var translate_last = swiper.snapGrid[swiper.activeIndex] + swiper.snapGrid[0] + 10;
var translate_style = 'translate3d(-' + translate_last + 'px, 0px, 0px)';
$(".swiper-slide").css('transform', translate_style);
}
}, 10);
swiper.on('reachEnd', function(){
$(".swiper-slide").css('transform', 'translate3d(0px, 0px, 0px)');
});
});

fullpage.js - After resposive is triggered, jQuery.position() and .offset() still return 0,0

Trying to use ScrollMagic with fullpage.js - I have searched and only found that it is suggested to use scrollBar: true or autoScrolling: false to enable jQuery positioning or offsets, however, upon responsive (which turns the page into a normal scrolling site), the position still remains at that (0,0) position.
This seems a bit confusing, as in my mind, if I say:
autoScrolling: true,
but
responsiveWidth: 991
and, via the documentation:
A normal scroll (autoScrolling:false) will be used under the defined width in pixels ... For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
So why wouldn't my $('.fp-section').position() work after checking for Responsive in afterResponsive(isResponsive)?
example:
Codepen
jQuery('#main').fullpage({
//Navigation
lockAnchors: false,
navigation: true,
navigationPosition: 'left',
showActiveTooltip: false,
slidesNavigation: false,
//Scrolling
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: false,
fitToSectionDelay: null,
scrollBar: false,
easingcss3: 'ease',
scrollHorizontally: true,
offsetSections: false,
resetSliders: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: 'top',
dragAndMove: 'fingersonly',
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: false,
//Design
sectionsColor: ['#ccc', 'black', '#ccc'],
responsiveWidth: 991,
//Custom selectors
sectionSelector: '.section',
lazyLoading: true,
afterResponsive: function(isResponsive) {
var scene = [];
var parallaxTween = [];
var box = jQuery('.moveme');
var parallax = new TimelineMax();
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: .5,
duration: window.innerHeight + 50
}
});
for (var i = 0; i < box.length; i++) {
var yPer = -100;
var yEnd = 100;
//reset scene on responsive
if (scene[i])
scene[i].destroy(true);
parallaxTween[i] = null;
scene[i] = null;
console.log(box.closest('.section').position());
parallaxTween[i] = parallax.fromTo(jQuery('.container').eq(i), 1, {
yPercent: yPer
}, {
yPercent: yEnd,
ease: Linear.easeNone
}, 0);
scene[i] = new ScrollMagic.Scene({
triggerElement: jQuery(box[i]).closest('.section'),
})
.setTween(parallaxTween[i])
.addIndicators()
.addTo(controller);
}
}
});
.section {
position: relative;
}
.container {
position: absolute;
background: blue;
color: white;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.moveme {
margin: 0;
line-height: 100px;
text-align: center;
}
<main class="site-main fullpage-wrapper" id="main" role="main" style="height: 100%; position: relative; transform: translate3d(0px, 0px, 0px); transition: none;">
<div class="section">
<div class="container">
<p class="moveme">i should move
<p>
</div>
</div>
<div class="section">
<div class="container">
<p class="moveme">i should move
<p>
</div>
</div>
<div class="section">
<div class="container">
<p class="moveme">i should move
<p>
</div>
</div>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/jquery.ScrollMagic.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295227/animation.gsap.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295227/debug.addIndicators.js'></script>