https://wildpotrocode.com/Blog/slider-with-arrows/slidertutorial.html
HTML
In our section container we’ll have 2 arrows and the slider.
Inside slider we have the boxes we want to display.
The last box has the class dummy, this box is acting as a right padding, since (for some mysterious reason) you can’t add padding-right in a scrollable div. But we can always fix it with an invisible element 😉
<section class="container" >
<span id="left-arrow" class="arrow">‹</span>
<span id="right-arrow" class="arrow">›</span>
<div class="slider" id="slider">
<div class="box"></div>
<div class="box center"></div>
<div class="box"></div>
<div class="box dummy"><div>
</div>
</section>
<script src = "script.js"></script>
CSS
Styling our container: we will be messing around with margins and paddings so we'll need border box. And don't forget to set the main container's position to relative
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: auto;
position: relative;
Styling the arrows: Use z-index to set the arrows above the slider. And with position absolute you can set them to the sides and position them in the middle with right, left and bottom properties. Don’t forget transition if you want smooth opacity animation.
I also used text-align, line-height and font-size to scale an position the html codes I used for the arrows
.arrow{
width: 30px;
height: 30px;
padding: 2px;
position: absolute;
bottom: calc(50% - 10px);
z-index: 3;
cursor: pointer;
border-radius: 20px;
text-align: center;
line-height: 20px;
font-size: 30px;
background-color: rgba(255, 255, 255, 0.58);
transition: opacity 0.5s ease;
}
#left-arrow{
left: calc(50% - 120px);
}
#right-arrow{
right: calc(50% - 120px);
}
Styling the slider:
Set left padding to 40% to have the boxes centered in the middel of your slider.
You need a padding-right too, but because that’s not possible, we use a “dummy” container to act as right padding. Set the dummy width to 70% and remember to remove scroll-snap-align property. We want to ignore this element, it's just a padding!
Use scroll-snap-type proximity. This property makes the slide sort of “grab” on to the next element if the scroll is getting close to it
Hide the scrollbar, we will use arrows ✨
.slider{
width: 100%;
height: auto
padding-left: 40%;
display: flex;
flex-direction: row;
overflow-x: scroll;
overflow-y: hidden ;
scroll-behavior: smooth;
scroll-snap-type: x proximity;
}
.slider::-webkit-scrollbar{
display: none;
}
.dummy{
min-width: 70%;
scroll-snap-align: none;
visibility: hidden;
}
Styling the boxes:
- It is very important to use scroll-snap-align since it will keep out boxes centered.
- Min-width can be set to whatever you want, but set it!
- Transition and opacity to have boxes highlighted when showing in the middle
- #center id because the box in the middel should have opacity 1 to begin with
.box{
/* scroll-snap-align is very important
, it will help us figure out where is the center of every box*/
scroll-snap-align: center;
width: 250px;
/* Important!! min-width tells my slider it can not
resize my elements to fit, it has to do scroll*/
min-width: 250px;
height: 300px;
margin: 15px;
position: relative;
z-index: 1;
border-radius: 8px;
box-shadow: 2px 4px 8px rgb(89 73 100);
background-color: white;
transition: opacity 0.3s ease-in;
opacity: 0.5;
}
#center{
opacity: 1;
}
JavaScript
Now let’s get on to the good stuff. This is what we are doing:
- Move slider left and right when arrow click.
- Hide left arrow when showing first element and hide right arrow when showing last element.
- Find out which element is showing every time we scroll.
- Make sure it work’s when window is resized.
Remember:
- PosicionInicial is the scroll position we get by default, where the first element in our silde is centered. We get this position because we used scroll-snap-aling: center back in our CSS. This will help us figure out where is the center located in the other items in our slide. And it will keep our elements centered and pretty
window.addEventListener("resize", function(){
scrolling();
});
var slider = document.getElementById("slider");
var box = document.getElementsByClassName("box");
// Size is gonna be width + box margin
var size = box[1].clientWidth + 30;
//This is the scroll position where the first element in our silde is centered
var posicionInicial = slider.scrollLeft;
class BoxElement {
constructor(size, element){
this.size = size;
this.element = element;
}
isCenter() {
this.element.style.opacity = "1"
}
isNotCenter(){
this.element.style.opacity = "0.5";
}
}
var box_middle = new BoxElement(posicionInicial + size, box[1]);
var box_left = new BoxElement(posicionInicial, box[0]);
var box_right = new BoxElement(box_middle.size+ size, box[2]);
function hide(arrow){
arrow.style.opacity = "0";
}
function show(arrow){
arrow.style.opacity = "1";
}
var arrow_left = document.getElementById("left-arrow");
var arrow_right = document.getElementById("right-arrow");
//I want the middel box to be shown in the middle by default
slider.scrollLeft = size;
//movement with arrows
arrow_left.addEventListener("click", function(){
slider.scrollLeft -= size
});
arrow_right.addEventListener("click", function(){
slider.scrollLeft += size;
});
/* I listen to scroll event in the slide and detect when each box is center
*/
slider.addEventListener("scroll", scrolling);
function scrolling(){
let position = slider.scrollLeft;
console.log(position);
if(position < box_middle.size - 30) //I use 30 as a movement umbral
{
hide(arrow_left);
show(arrow_right);
box_left.isCenter();
box_middle.isNotCenter();
box_right.isNotCenter();
}
else if(position > box_middle.size + 30 ){
hide(arrow_right);
show(arrow_left);
box_right.isCenter();
box_middle.isNotCenter();
box_left.isNotCenter();
}
else{
show(arrow_right);
show(arrow_left);
box_middle.isCenter();
box_right.isNotCenter();
box_left.isNotCenter();
}
}
If you have more than 3 boxes in your slide, I guess you can have a condition where you detect when is the first and the last element showing and other cases should all show arrows left and right :D
No comments:
Post a Comment