I am currently in the process of developing a carousel slider that resembles what we see on Android devices. The main challenge I am facing at this early stage is applying the CSS property position: fixed; only horizontally, as vertical scrolling will be needed.
Is there a way to limit the application of position: fixed; to horizontal scrolling only?
Below is the snippet of code I am working with:
var val = 0;
$("button").click(function() {
for (var i = 0; i < 9; i++) {
$('.MySlide:nth-child(' + (i + 1) + ')').removeClass('MySlide' + (((val + i) % 9) + 1) + '');
$('.MySlide:nth-child(' + (i + 1) + ')').addClass('MySlide' + (((val + i + 1) % 9) + 1) + '');
}
val = (val + 1) % 9;
});
.long-div {
height: 300px;
}
.MySlides-wrap {
border: 1px;
border-style: solid;
height: 350px;
}
/* MySlide styles go here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slider Test</title>
</head>
<body>
<div class="long-div"></div>
<div class="MySlides-wrap">
<div class="card MySlide MySlide1"></div>
<div class="card MySlide MySlide2"></div>
<div class="card MySlide MySlide3"></div>
<div class="card MySlide MySlide4"></div>
<div class="card MySlide MySlide5"></div>
<div class="card MySlide MySlide6"></div>
<div class="card MySlide MySlide7"></div>
<div class="card MySlide MySlide8"></div>
<div class="card MySlide MySlide9"></div>
</div>
<button>Next</button>
</body>
</html>