We Keep Coding

Customize the Slider Swiper

Made a slider "Swiper". To the right of it is the tag "h1", the text of which needs to be changed depending on what the current picture is.
If you press the right button, then the indexes are 2, 3, 4, and if the left one is 0, 1, 2.
It is unclear why this is happening.
I tried to use the "document.getElementsByClassName("left-element")" class for searching, but it doesn't work that way.
Works only with "document.getElementById("box")".
Also, at initial loading, the picture tries to be drawn at 100% in width, but then collapses to the 50% I need. How to remove this effect?
var swiper = new Swiper('.swiper-container', {
effect: 'cube',
grabCursor: true,
slidesPerView: 'auto',
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 50,
shadowScale: 0.3,
centerSlidesBounds: true,
},
direction: 'horizontal',
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
on: {
init: function () {
},
},
});
swiper.on('slideChange', function () {
let name = swiper.activeIndex;
/*
let element = document.getElementsByClassName("left-element");
alert(name);
*/
let element = document.getElementById("box");
element.innerHTML = (name) + " " + "Index";
});
.main {
position: fixed;
padding: 16px;
margin-top:40px;
width: 50%;
}
.swiper-button-prev{
left: 2%;
}
.swiper-button-next{
left: 92%;
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
width: 100%;
bottom: -25%;
}
.left-element {
background: silver;
display: inline-block;
position: absolute;
left: 100%;
width: 80%;
margin-top: 0;
}
h1.left-element {
width: 80%;
height: 90%
}
img{
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
<div class="main">
<h1 class="left-element" id="box">Empty index</h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://www.fonstola.ru/large/201309/119067.jpg">
</div>
<div class="swiper-slide">
<img src="https://www.fonstola.ru/large/201408/148243.jpg">
</div>
<div class="swiper-slide">
<img src="https://www.fonstola.ru/large/201111/50599.jpg">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>

I've removed some of your effect on the Swiper, but feel free to add it back (cause I tried to set up the default Swiper again on the Swiper Docs :D ).
And remember to change the <div class="swiper-container"> to <div class="swiper">
Here's the code in Javascript:
const swiper = new Swiper(".swiper-container", {
// Install modules,
direction: 'horizontal',
initialSlide: 0,
loop: true,
speed: 500,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// ...
});
swiper.on('slideChange', () => {
let swiperIndex = swiper.realIndex
console.log('Swiper index right now: ', swiperIndex)
let element = document.getElementById("box")
element.innerHTML = (swiperIndex) + " " + "Index";
})
Whenever the slide change, it'll assign the realIndex to swiperIndex
Here's the fiddle for you to have a clearer look: Fiddle

Show "X" number of page dots on Flickity plugin

I using the flickity plugin for a slideshow on my website and I want to show the dots on the image to allow the user to navigate the images.
Here is a link to the plugin https://flickity.metafizzy.co/
Is it possible to show, for example 4 dots even if there is 10 images. I dont always know the number of images so if I could just cap the dots to 4 and update every time the image is swithced?
Here is some of my code:
$('[data-venue-id="' + venueId + '"]').find('.flickity-button-inset').each(function () {
$(this).flickity({
// options
lazyLoad: true,
wrapAround: true,
pageDots: true,
contain: true,
adaptiveHeight: false,
imagesLoaded: true,
setGallerySize: false
//fade: true
});
});
This is an example of the dots on the images. I only want to display a certain number
Thanks in advance

As mentioned in my comment above, I believe the easiest would be with using asNavFor.
.carousel-main {
counter-reset: carousel-cell;
width: 100%;
}
.carousel-main-item {
width: 100%;
background: #f1f1f1;
text-align: center;
line-height: 100px;
}
.carousel-nav {
width: 50px;
margin: 20px auto;
}
.carousel-nav-item {
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
margin: 5px;
cursor: pointer;
}
.carousel-nav-item.is-selected {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js" integrity="sha512-cA8gcgtYJ+JYqUe+j2JXl6J3jbamcMQfPe0JOmQGDescd+zqXwwgneDzniOd3k8PcO7EtTW6jA7L4Bhx03SXoA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.min.css" integrity="sha512-BiFZ6oflftBIwm6lYCQtQ5DIRQ6tm02svznor2GYQOfAlT3pnVJ10xCrU3XuXnUrWQ4EG8GKxntXnYEdKY0Ugg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="carousel-main" data-flickity='{"pageDots": false }'>
<div class="carousel-main-item">1</div>
<div class="carousel-main-item">2</div>
<div class="carousel-main-item">3</div>
<div class="carousel-main-item">4</div>
<div class="carousel-main-item">5</div>
<div class="carousel-main-item">6</div>
<div class="carousel-main-item">7</div>
</div>
<div class="carousel-nav" data-flickity='{ "asNavFor": ".carousel-main", "contain": false, "pageDots": false, "prevNextButtons": false, "draggable": false }'>
<div class="carousel-nav-item"></div>
<div class="carousel-nav-item"></div>
<div class="carousel-nav-item"></div>
<div class="carousel-nav-item"></div>
<div class="carousel-nav-item"></div>
<div class="carousel-nav-item"></div>
<div class="carousel-nav-item"></div>
</div>

I did this via an on change and ready event. I suspect there's a cleaner way of doing this.
I wanted 1,2,3 shown if 1 was selected. Otherwise n-1, n, n+1 until the last slide when it should be the last three.
$('.gallery').flickity({
cellSelector: ".gallery-item",
wrapAround: true,
prevNextButtons: true,
contain: true,
pageDots: true,
on: {
ready: function () {
if ($(this)[0].slides.length <= 3) {
$(this)[0].$element.find('.dot').addClass("show-me");
} else {
$(this)[0].$element.find('.dot').eq(0).addClass("show-me");
$(this)[0].$element.find('.dot').eq(1).addClass("show-me");
$(this)[0].$element.find('.dot').eq(2).addClass("show-me");
}
},
change: function (index) {
if ($(this)[0].slides.length <= 3) {
$(this)[0].$element.find('.dot').addClass("show-me");
} else {
$(this)[0].$element.find('.dot').removeClass("show-me");
if (index == 0) {
$(this)[0].$element.find('.dot').slice(0, 3).addClass("show-me");
} else {
if (index == ($(this)[0].slides.length - 1)) {
$(this)[0].$element.find('.dot').eq(index).addClass("show-me");
$(this)[0].$element.find('.dot').eq(index - 1).addClass("show-me");
$(this)[0].$element.find('.dot').eq(index - 2).addClass("show-me");
}
else {
$(this)[0].$element.find('.dot').eq(index).addClass("show-me");
$(this)[0].$element.find('.dot').eq(index - 1).addClass("show-me");
$(this)[0].$element.find('.dot').eq(index + 1).addClass("show-me");
}
}
}
}
}
});
CSS:
.flickity-page-dots {
li {
display: none;
}
li.show-me {
display: inline-block;
}

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

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>

Slick Slider Multiple Sliders retaining active position

I have multiple Slick Sliders on one page. Each slider has a thumbnail Nav. The problem is the sliders uses the previous ones current position rather than starting on the first thumbnail.
I'm guessing I need a way to dynamically add an id so they don't affect each other. (My JS knowledge is very basic)
$('.slider-products').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
var windowWidth = $(window).width();
if(windowWidth <= 800) {
$('.slider-nav').slick({
vertical: false,
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-products',
arrow: false,
focusOnSelect: true
});
}
else {
$('.slider-nav').slick({
vertical: true,
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-products',
focusOnSelect: true
});
}

Use the .each method to bypass all the sliders.
Add a numbered class for each pair of sliders by the .addClass method.
Use the responsive option to change the settings depending on the width of the screen.
Please check the result: https://codepen.io/glebkema/pen/bWRZzB
var numSlick = 0;
$('.slider-products').each( function() {
numSlick++;
$(this).addClass( 'slider-' + numSlick ).slick({
arrows: false,
asNavFor: '.slider-nav.slider-' + numSlick,
fade: true,
slidesToScroll: 1,
slidesToShow: 1,
});
});
numSlick = 0;
$('.slider-nav').each( function() {
numSlick++;
$(this).addClass( 'slider-' + numSlick ).slick({
arrow: false,
asNavFor: '.slider-products.slider-' + numSlick,
focusOnSelect: true,
slidesToScroll: 1,
slidesToShow: 4,
responsive: [
{
breakpoint: 800,
settings: {
slidesToShow: 3,
}
}
]
});
});
.slick-arrow {
display: none !important; /* `arrows: false;` is not enough to prevent horizontal scrolling */
}
.slick-slide {
background: #c69;
border: 2px solid #fff;
color: #fff;
font-size: 36px;
font-weight: bold;
outline: none; /* prevent the appearance of a tiny gray contour */
padding: 18px 0;
text-align: center;
}
.slider:nth-of-type(n+3) .slick-slide { background: #9c6; }
.slider:nth-of-type(n+5) .slick-slide { background: #69c; }
.slider-nav {
margin-bottom: 12px;
}
.slider-nav .slick-slide:hover {
cursor: pointer;
opacity: .7;
}
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>