Rayberk üzgünüm forumlarda konu paylaşmakta pek fikrim yok
<div class="slider-img" >
<img src="resim-1.png" alt="">
</div>
<div class="slider-img" >
<img src="resim-2.png" alt="">
</div>
<div class="slider-img">
<img src="resim-3.png" alt="">
</div>
<button class="next" onclick="next()" type="submit"></button>
<button class="pre" onclick="pre()" type="submit"></button>
<style>
.slider-img img {
height:20rem;
width:30rem;
border-radius:50px;
margin-left:-18rem;
margin-top:15rem;
}
```
.next{
height:200px;
width:50px;
position: absolute;
margin:300px 0 0 1300px;
}
.pre{
height:200px;
width:50px;
position: absolute;
margin:300px 0 0 550px;
}
</style>
<script>
var slider = document.getElementsByClassName("slider-img");
var sliderNum = slider.length;
var sliderNo = 0;
var i = 0;
function next(params) {
sliderNo++;
showSlider();
}
function pre(params) {
sliderNo--;
showSlider();
}
function showSlider() {
if(sliderNo >= sliderNum) {sliderNo = 0;
}
if (sliderNo < 0 ) {
sliderNo = sliderNum -1;
}
for (i = 0; i < sliderNum; i++){
slider[i].style.display = "none";
}
slider[sliderNo].style.display = "block";
}
</script>
`