My swiper.JS works as intended. However a class can be added to the html tag when a link is toggled. When that happens and the class retro is added, I need to amend some of the settings such as autoplay effect, loop and introduce a scrollbar.
I've tried to achieve this using an if statement to amend only the setting that need updating - which doesn't work. Is this possible or would you need an entire new Swiper instance with all the previous setting defined as well?
/* FADE IN WHEN CONTENT LOADED */
window.addEventListener("DOMContentLoaded", function() {
document.body.className = "visible";
});
/* TOGGLE */
const html = document.querySelector('html');
const button = document.querySelector('.contrast__link');
button.addEventListener('click', e => {
e.preventDefault();
if (html.classList.contains('dark-mode')) {
html.classList.remove('dark-mode');
html.classList.add('retro');
} else if (html.classList.contains('retro')) {
html.classList.remove('retro');
} else {
html.classList.add('dark-mode');
}
});
/* CAROUSEL */
var caption = document.querySelector(".swiper-caption");
new Swiper(".swiper", {
// Disable preloading of all images
preloadImages: false,
// Enable lazy loading
lazy: true,
effect: "fade",
fadeEffect: {
crossFade: true
},
loop: true,
autoplay: {
delay: 1200,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: ".swiper-pagination",
type: "fraction"
},
on: {
init: function() {
updateCaptionText(this);
},
activeIndexChange: function() {
updateCaptionText(this);
}
}
});
function updateCaptionText(slider) {
caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}
/* The bit I only need set when the class `retro` is on the `html` tag. */
if (html.classList.contains('retro')) {
Swiper('.swiper', {
effect: 'slide',
loop: false,
autoplay: false,
scrollbar: {
el: '.swiper-scrollbar',
draggable: true
}
});
}/* #GLOBAL */
body.hidden {
opacity: 0;
}
body.visible {
opacity: 1;
transition: opacity 0.48s ease-out;
}
html {
background: white;
font-size: 62.5%;
height: 100vh;
height: var(--app-height);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}
.dark-mode {
background: yellow;
}
.retro {
background: blue;
color: white;
}
/**
* Base `body` styling.
*/
body {
background-color: transparent;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
font-size: 16px;
height: 100vh;
height: var(--app-height);
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
}
h1,
p {
margin: 0 0 24px;
padding: 0;
}
/* #HEAD (left column) */
.page-head {
border-bottom: 2px solid black;
box-sizing: border-box;
display: flex;
align-items: center;
height: 64px;
padding: 0 24px;
position: fixed;
bottom: -64px;
left: 0;
transform: rotate(-90deg);
transform-origin: top left;
width: 100vh;
}
.site-logo {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
order: 1;
stroke: black;
transform: rotate(90deg);
width: 32px;
svg {
overflow: visible;
}
}
.contrast {
display: flex;
align-items: center;
flex: 1 1 0%;
margin-bottom: 0;
justify-content: flex-start;
}
/* #GRID */
.grid {
display: flex;
flex-direction: column;
height: 100vh;
}
.grid__item {
box-sizing: border-box;
padding: 24px 24px 0;
margin-left: 64px;
}
.gallery {
box-sizing: border-box;
flex: 1;
overflow: hidden;
position: relative;
padding: 0 24px 24px;
text-align: center;
}
.gallery img {
border: 2px solid black;
box-sizing: border-box;
height: 100%;
max-height: 100%;
object-fit: cover;
object-position: top center;
width: 100%;
max-width: 100%;
}
/**
* Side-by-side view for wider devices.
*/
.grid {
display: flex;
flex-direction: column;
height: 100vh;
height: var(--app-height);
}
/**
* Grid Cells.
*/
.grid__item {
box-sizing: border-box;
padding: 48px 48px 0;
margin-left: 48px;
@media only screen and (min-width: 1000px) {
margin-left: 0;
}
}
.gallery {
box-sizing: border-box;
flex: 1;
overflow: hidden;
position: relative;
padding: 0 24px 24px;
text-align: center;
}
.gallery img {
border: 2px solid black;
box-sizing: border-box;
height: 100%;
max-height: 100%;
object-fit: cover;
object-position: top center;
width: 100%;
max-width: 100%;
@media only screen and (min-width: 1000px) {
width: auto;
}
}
/**
* Side-by-side view for wider devices.
*/
@media only screen and (min-width: 1000px) {
.grid {
background-color: black;
flex-direction: row;
column-gap: 2px;
height: 100vh;
margin: 0 48px;
}
.grid__item {
background-color: white;
transition: width 0.12s;
width: 33.333333%;
height: 100vh;
}
.gallery {
padding-top: 24px;
}
.gallery img {
height: 100%; // Was Auto to keep aspect-ratio
max-height: 100%;
//object-fit: initial;
width: auto;
max-width: 100%;
}
}
@media only screen and (min-width: 1000px) {
.grid__item {
width: 50%;
}
}
@media screen and (max-height: 600px) {
.grid {
height: auto;
}
.grid__item {
height: auto;
}
}
/* #FOOTER (right column) */
.page-foot {
margin-left: 64px;
padding: 0 24px;
}
.swiper-pagination {
display: none;
}
@media only screen and (min-width: 1000px) {
.page-foot {
border-bottom: 2px solid black;
box-sizing: border-box;
display: flex;
height: 64px;
padding: 0 24px;
position: fixed;
bottom: -64px;
left: 0;
transform: rotate(-90deg);
transform-origin: top left;
width: 100vh;
left: auto;
right: 0;
transform: rotate(90deg);
transform-origin: top right;
p {
display: flex;
align-items: center;
margin-bottom: 0;
}
}
.swiper-caption {
flex: 1 1 0%;
}
}
/* CURSOR */
* {
//cursor: none !important;
}
body:hover {
.cursor-trail {
border-color: black;
}
.cursor span {
background-color: black;
}
}
.cursor {
position: fixed;
z-index: 1000;
}
.cursor span {
background-color: transparent;
border-radius: 100%;
display: block;
height: 4px;
margin: 0;
pointer-events: none;
transition: background-color 0.12s ease-out, height 0.12s, opacity 0.12s, width 0.12s;
position: fixed;
width: 4px;
}
.cursor--click span {
height: 0;
margin: 2px 0 0 2px;
width: 0;
}
.cursor-trail {
border: 2px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 32px;
margin: 0;
pointer-events: none;
position: fixed;
transform-origin: center center;
transition: border-color 0.12s ease-out, height 0.12s ease-out, margin 0.12s ease-out, opacity 0.12s ease-out, transform 0.24s cubic-bezier(0, 0.5, 1, 1), width 0.12s ease-out;
width: 32px;
z-index: 1000;
}
.cursor-trail--hover {
height: 4px;
margin: 16px 0 0 16px;
opacity: 0;
width: 4px;
}
/* Prev */
.cursor-prev span,
.cursor-next span {
border-radius: 0;
height: 2px;
transition: height 0.12s, opacity 0.12s, transform 0.12s, width 0.12s;
transform-origin: center center;
left: -16px;
width: 32px;
&:before,
&:after {
background: black;
content: "";
display: block;
height: 2px;
opacity: 0;
width: 16px;
position: absolute;
transform-origin: center left;
}
&:before {
animation: cursor-prev 0.12s ease-in-out 0.32s forwards;
}
&:after {
animation: cursor-next 0.12s ease-in-out 0.32s forwards;
}
}
.cursor-next span {
transform: rotate(-180deg);
}
@keyframes cursor-prev {
0% {
transform: rotate(0);
}
100% {
opacity: 1;
transform: rotate(-45deg);
}
}
@keyframes cursor-next {
0% {
transform: rotate(0);
}
100% {
opacity: 1;
transform: rotate(45deg);
}
}
/* SWIPER */
.swiper {
height: 100%; // Fits image in viewport
position: relative;
//overflow: hidden; // Removed which seems to help border getting cut off
touch-action: pan-y;
z-index: 1; // Fix of Webkit flickering
-webkit-user-select: none; // Fixes issue in Safari when clicking carousel quickly, page is highlighted black.
}
.swiper-wrapper {
box-sizing: border-box;
display: flex;
height: 100%;
position: relative;
width: 100%;
z-index: 1;
}
.swiper-slide {
backface-visibility: hidden;
flex-shrink: 0;
height: 100%;
max-height: 100%; // Added myself
pointer-events: none;
position: relative;
transform: translateZ(0);
transition: opacity 12ms ease-out !important;
width: 100%;
}
.swiper-slide-active {
pointer-events: auto;
}
.swiper-button-prev,
.swiper-button-next {
background: none;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: absolute;
top: 0;
width: 50%;
z-index: 10;
&:focus {
outline: 0;
}
}
.swiper-button-prev {
left: 0;
}
.swiper-button-next {
right: 0;
}
.swiper-pagination-current {
margin-right: 4px;
}
.swiper-pagination-total {
margin-left: 2px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.2/swiper-bundle.min.js"></script>
<script>
document.body.className = 'hidden';
</script>
<div class="cursor"><span></span></div>
<div class="cursor-trail"></div>
<div class="page-head" role="banner">
<div class="site-logo">
M
</div>
<p class="contrast"><a href="#" class="contrast__link"><span class="contrast__switch"></span><span class="contrast__label">Contrast</span></a></p>
</div>
<div class="grid" role="main">
<div class="grid__item finder">
<div class="hgroup title-bar">
<h1 class="brand-name">Name of Page</h1>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="grid__item gallery">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" data-caption="1 Caption that is really, really, really, really long">
<img src="https://www.fillmurray.com/700/1000" />
</div>
<div class="swiper-slide" data-caption="2 Caption that is really, really, really, really long">
<img src="https://www.fillmurray.com/700/1100" />
</div>
<div class="swiper-slide" data-caption="3 Caption that is really, really, really, really long">
<img src="https://www.fillmurray.com/700/1200" />
</div>
</div>
<a class="swiper-button-prev" data-interaction="cursor-prev"></a>
<a class="swiper-button-next" data-interaction="cursor-next"></a>
</div>
</div>
<div class="page-foot" role="contentinfo">
<p class="swiper-caption">Caption that is really, really, really, really long...</p>
<p class="swiper-pagination"></p>
</div>
</div>