One side(full view) overlapping slider – Swiper
<!– Slider –>
<?php
$tittel_slider = get_sub_field(‘tittel_slider’);
$slider_repeater = get_sub_field(‘slider_repeater’);
?>
<section class=”slider module-slider overflow-x”>
<div class=”container”>
<div class=”row”>
<!– Section Title –>
<?php if($tittel_slider):?>
<div class=”col-lg-12″>
<div class=”slider__titlewrp”>
<!– Section Title –>
<?php if($tittel_slider):?>
<h2 class=”section-title mt-0″><?php echo $tittel_slider;?></h2>
<?php endif;?>
<div class=”swiper-btn-wrp”>
<!– buttons –>
<div class=”swiper-button-prev sliderr-prev”></div>
<div class=”swiper-button-next sliderr-next”></div>
</div>
</div>
</div>
<?php endif;?>
</div>
<div class=”row”>
<div class=”slider_box”>
<div class=”swiper-container swiper-containerr shadowbg”>
<div class=”swiper-wrapper”>
<!– slider –>
<?php
if( $slider_repeater ): ?>
<?php foreach( $slider_repeater as $post ):
setup_postdata($post); ?>
<div class=”col-lg-4 slider__col swiper-slide”>
<?php include( locate_template( ‘template-parts/block_card.php’, false, false ) ); ?>
</div><!– Column ends –>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
<!– scrollbar –>
<div class=”swiper-scrollbar”></div>
</div>
</div>
</div><!– Row ends –>
</div><!– Container ends –>
</section>
NA
// style for slider
.module-slider{
&.slider{
padding-top: 96px;
padding-bottom: 97px;
@include bp(tablet-sm){
padding-top: 56px;
padding-bottom: 45px;
}
.slider__titlewrp{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 33px;
@include bp(tablet-sm){
margin-bottom: 23px;
}
}
.section-title {
margin-bottom: 0;
@include bp(tablet-sm){
@include font-rem(36px, 38px);
}
}
.swiper-btn-wrp{
width: 100px;
@include bp(tablet-sm){
display: none;
}
}
@include bp(tablet-md){
–sideViewLength: 13vw;
.swiper-container{
direction: ltr;
width: calc(100% + var(–sideViewLength));
max-width: calc(100% + var(–sideViewLength));
&.shadowbg{
@include bp(tablet-md){
&:after{
content: ”;
position: absolute;
top: 0;
right: -11px;
z-index: 2;
width: 200px; //284px;
height: 95%;
background: transparent linear-gradient(90deg, #FFFFFF00 0%, #FFFFFFD4 52%, #FFFFFF 90%, #FFFFFF 100%) 0% 0% no-repeat;
@include bp(standard-desktop){
width: 210px;
}
}
}
}
}
.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{
width: calc(100% – var(–sideViewLength));
margin-right: auto;
}
}
.swiper-container{
@include bp(tablet-sm){
–sideViewLength: 20px;
width: calc(100% + var(–sideViewLength));
max-width: calc(100% + var(–sideViewLength));
padding-bottom: 24px;
}
@include bp(tablet-strict){
–sideViewLength: 70px;
}
}
.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{
@include bp(tablet-sm){
width: calc(100% – var(–sideViewLength));
margin-right: auto;
}
}
&.overflow-x{
overflow-x: hidden;
}
.slider__col{
–productWidth: 220px;
@include bp(tablet-md){
max-width: 416px !important;
&:last-child{
margin-right: var(–productWidth)!important;
}
}
@media (min-width: 992px) and (max-width: 1620px){
&:last-child{
margin-right: 185px !important;
}
}
@include bp(tablet-sm){
max-width: 340px !important;
&:last-child{
margin-right: 20px;
}
}
@include bp(tablet-strict){
max-width: 331px !important;
&:last-child{
margin-right: 70px;
}
}
}
.block-card{
&__content{
padding-bottom: 0;
}
&__contentbox{
bottom: 0;
@include bp(tablet-sm){
bottom: 20px;//27px;
}
}
&__content-title{
margin-bottom: 32px;
@include bp(tablet-sm){
margin-bottom: 7px;
}
}
&__image{
img{
min-height: 450px;
@include bp(tablet-sm){
min-height: 368px;
}
}
}
&__content-excerpt{
@include bp(tablet-sm){
margin-bottom: 9px;
}
}
@include bp(hover){
.block-card__content{
&:not(.no-hover){
.block-card__contentbox{
bottom: 7px;
.block-card__content-title.main_title{
margin-bottom: 20px;
}
.block-card__content-excerpt{
margin-bottom: 18px;
}
}
}
}
}
}
}
}
//Swiper slider m4
var $swiperSelector = $(‘.swiper-containerr’);
$swiperSelector.each(function (index) {
var $this = $(this);
$this.addClass(‘swiper-slider-‘ + index);
$(‘.swiper-nyheter’).find(‘.products’).addClass(‘swiper-wrapper’);
$(‘.swiper-nyheter’).find(‘.product’).addClass(‘swiper-slide’);
var dragSize = $this.data(‘drag-size’) ? $this.data(‘drag-size’) : 182;
var freeMode = $this.data(‘free-mode’) ? $this.data(‘free-mode’) : false;
var loop = $this.data(‘loop’) ? $this.data(‘loop’) : false;
var slidesDesktop = $this.data(‘slides-desktop’) ? $this.data(‘slides-desktop’) : 3.4;
var slidesTablet = $this.data(‘slides-tablet’) ? $this.data(‘slides-tablet’) : 3.4;
var slidesMobile = $this.data(‘slides-mobile’) ? $this.data(‘slides-mobile’) : 1;
var spaceBetween = $this.data(‘space-between’) ? $this.data(‘space-between’) : 16;
if (mq.matches) {
dragSize = 95;
}
var cSwiper = new Swiper(‘.swiper-slider-‘ + index, {
direction: ‘horizontal’,
slidesPerView: “auto”,
spaceBetween: 16,
loop: loop,
freeMode: freeMode,
breakpoints: {
1920: {
allowTouchMove: false
},
1025: {
allowTouchMove: false
},
// 768: {
// slidesPerView: 2
// },
// 320: {
// slidesPerView: slidesMobile
// }
},
navigation: {
nextEl: ‘.swiper-button-next.sliderr-next’,
prevEl: ‘.swiper-button-prev.sliderr-prev’
},
scrollbar: {
el: ‘.swiper-scrollbar’,
draggable: true,
dragSize: dragSize
}
}).on(‘slideChange’, function () {
if (cSwiper.isEnd) {
jQuery(‘.swiper-slider-‘ + index).removeClass(‘shadowbg’);
} else {
jQuery(‘.swiper-slider-‘ + index).addClass(‘shadowbg’);
}
});
});
// swiper only mobile m6
var swiper = Swiper;
var init = false;
let swiper2;
function swiperMode() {
if (mq.matches) {
if ($(‘.utvalgte_produkter’).length) {
if (!init) {
init = true;
var $this = $(this);
$(‘.swiper-full-mobile’).find(‘.products’).addClass(‘swiper-wrapper’);
$(‘.swiper-full-mobile’).find(‘.product’).addClass(‘swiper-slide’);
var dragSize = $this.data(‘drag-size’) ? $this.data(‘drag-size’) : 95;
var freeMode = $this.data(‘free-mode’) ? $this.data(‘free-mode’) : false;
var loop = $this.data(‘loop’) ? $this.data(‘loop’) : false;
swiper2 = new Swiper(‘.swiper-full-mobile’, {
direction: ‘horizontal’,
slidesPerView: “auto”,
spaceBetween: 0,
loop: loop,
freeMode: freeMode,
//cssMode: true,
// slidesPerView: 1,
// spaceBetween: 0,
// loop: loop,
// freeMode: freeMode,
// breakpoints: {
// 992: {
// slidesPerView: 2
// },
// 768: {
// slidesPerView: 2
// },
// 320: {
// slidesPerView: 1
// }
// },
scrollbar: {
el: ‘.mbil’,
draggable: true,
dragSize: dragSize
},
});
}
}
}
else {
init = false;
if (swiper2 !== undefined) swiper2.destroy(true, true);
}
}
/* On Load
**************************************************************/
window.addEventListener(‘load’, function () {
swiperMode();
});
/* On Resize
**************************************************************/
window.addEventListener(‘resize’, function () {
swiperMode();
});