I have 2 sliders, a story-list-carousel, and a story-view-carousel. When on mobile view, the screen starts auto-scrolling up to this section after the user passes this section and scrolls down towards the footer.
I have recorded the issue in a video preview: https://www.youtube.com/watch?v=WYXcrMBQEHA
As in the video, the top slide listCarousel and the bottom section where 3 images are shown, is the storyMainCarousel.
Slider JS code:
let storyMainCarousel = new Splide('#story-view-carousel', {
type: 'fade',
pagination: false,
arrows: false,
cover: true,
autoplay: true,
rewind: true,
}).mount();
let listCarousel = new Splide('#story-list-carousel', {
direction: 'ttb',
width: '100%',
height: '100%',
perPage: 8,
perMove: 1,
autoplay: true,
rewind: true,
isNavigation: true,
gap: 18,
pagination: false,
arrows: false,
cover: true,
start: 0,
dragMinThreshold: {
mouse: 4,
touch: 10,
},
breakpoints: {
767: {
direction: 'ltr',
height: '4rem',
perPage: 2.4,
perMove: 1,
gap: 10,
autoplay: true,
rewind: true,
padding: { left: '0rem', right: '0rem' },
start: 0,
focus: 'center',
},
},
}).mount();
storyMainCarousel.sync(listCarousel);
HTML and SCSS code:
<div class="col-12 col-md-4">
<div id="story-list-carousel" class="splide mb-0">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="tablinks">
<img src="./assets/images/section5/mortarboard_cap.svg"
/>
Education
</div>
</li>
<li class="splide__slide">
<div class="tablinks">
<img src="./assets/images/section5/basketball.svg"/>
Sports
</div>
</li>
<li class="splide__slide">
<div class="tablinks">
<img src="./assets/images/section5/briefcase.svg"/>
Business & Finance
</div>
</li>
<li class="splide__slide">
<div class="tablinks">
<img src="./assets/images/section5/mortarboard_cap.svg"
/>
Art & Entertainment
</div>
</li>
<li class="splide__slide">
<div class="tablinks">
<img src="./assets/images/section5/basketball.svg"/>
News & Politics
</div>
</li>
<li class="splide__slide">
<div class="tablinks">
<img src="./assets/images/section5/briefcase.svg"/>
Family & Parenting
</div>
</li>
<li class="splide__slide">
<div class="tablinks">
<img src="./assets/images/section5/mortarboard_cap.svg"
/>
Society & Culture
</div>
</li>
<li class="splide__slide">
<div class="tablinks">
<img src="./assets/images/section5/basketball.svg"/>
Regional & Spiritual
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-8">
<div id="story-view-carousel" class="splide tabcontent mb-0">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="container-fluid p-0">
<div class="row">
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img1.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img2.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img3.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="container-fluid p-0">
<div class="row">
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img1.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img2.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img3.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="container-fluid p-0">
<div class="row">
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img1.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img2.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img3.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="container-fluid p-0">
<div class="row">
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img1.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img2.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img3.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="container-fluid p-0">
<div class="row">
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img1.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img2.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img3.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="container-fluid p-0">
<div class="row">
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img1.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img2.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img3.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="container-fluid p-0">
<div class="row">
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img1.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img2.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img3.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="container-fluid p-0">
<div class="row">
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img1.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img2.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
<div class="col-4">
<div class="card">
<figure>
<img src="./assets/images/section5/img3.png" />
</figure>
<figcaption class="about">
<p class="para">
Lorem Ipsum is simply dummy
</p>
<h3 class="m-0 title">
Gillian Anderson
</h3>
</figcaption>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>