Hi,
the variable :root{--swiper-theme-color:#colorhash
is defined directly by SwiperJS (see css SwiperJS) and returns the color for swiper activities, e.g. active bullets, the swiper arrows etc.
An example for dezimal is simple, open your Netflix App π -> Example
I use Blocksy Theme with 1200px Container and own color palette.
I will give you two examples of my swipers:
Main inklude & CSS:
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<style>
/*Slide Demo*/
.swiper-slide{text-align:center;font-size:18px;background:#fff;height:250px;border-radius:6px;box-shadow:0 1px 4px rgba(0,8,32,.2)}
/*Swiper JS*/
:root{--swiper-theme-color:var(--paletteColor1)}
.swiper{width:100%;max-width:var(--container-max-width);height:100%;padding:10px 3px!important}
@media(max-width:1200px){.swiper{padding:10px 5vw!important}.swiper-button-next,.swiper-button-prev{display:none!important}}
.swiper-slide{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}
.swiper-scrollbar{background:rgba(0,0,0,.04)}
.swiper-scrollbar-drag{background:var(--swiper-theme-color);opacity:.5}
</style>
Snap Swiper:
<div class="alignfull">
<div class="swiper swiper-snap">
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</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>
<script>
var swiper = new Swiper('.swiper-snap', {
spaceBetween:15,
grabCursor:true,
navigation:{nextEl:'.swiper-button-next',prevEl:'.swiper-button-prev',},
pagination:{el:'.swiper-pagination',dynamicBullets:true,},
scrollbar:{el:'.swiper-scrollbar', hide:true,},
breakpoints:{
0:{slidesPerView:1.1,centeredSlides:true,centeredSlidesBounds:true,},
640:{slidesPerView:2.1,centeredSlides:true,centeredSlidesBounds:true,},
768:{slidesPerView:3.1,centeredSlides:true,centeredSlidesBounds:true,},
1024:{slidesPerView:4,},
}
});
</script>
</div>
And FreeMode:
<div class="alignfull">
<div class="swiper swiper-free-2">
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</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>
<script>
var swiper = new Swiper('.swiper-free-2', {
freeMode:true,
momentumBounce:false,
spaceBetween:15,
grabCursor:true,
navigation:{nextEl:'.swiper-button-next',prevEl:'.swiper-button-prev',},
pagination:{el:'.swiper-pagination',dynamicBullets:true,},
scrollbar:{el:'.swiper-scrollbar', hide:true,},
breakpoints:{
0:{slidesPerView:2.1,},
640:{slidesPerView:3.1,},
768:{slidesPerView:4.1,},
1024:{slidesPerView:5.1,},
1200:{slidesPerView:6,},
}
});
</script>
</div>
Try it by yourself and have a look π
If you like the Logo, everything is fine!