How can I make a slideshow with one image

Question

I am making a website for a friend and he ask me to do a similar website like this http://www.santalibrada.com.py/

I have an image that is 10000px x 1080px and I want to make a slideshow using only that image.

I want to make a button that moves the image to the right 1920px, I try this way

<script>
    function slide() {
     var slideImage = document.getElementById('image');
     slideImage.style.position = "absolute"
     slideImage.style.transform = "translateX(-1920px)"
    }
</script>

But it only moves once. How can I make it so when I press the button again it goes another 1920px to the right?

I will add an image so you guys can understand better because my english is not that good.

10,000 pixels wide? Are you sure you don't want it to just be the width of the window? Also, this is more of a "please make my software for me" kind of question than it is a coding question. Could you maybe rephrase it to include exactly the parts that you need help with so that we can give you pointers instead of having to code the entire thing for you? — OOPS Studio, Feb 02 '21 at 01:02
[This could help you](https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html) it of course isn't what you exactly want but it is definitely a start. Also found a [infinite scrolling slideshow](https://css-tricks.com/infinite-all-css-scrolling-slideshow/) what you could edit to only move when a button is clicked. — Insula, Feb 02 '21 at 01:14
Just use a time loop like here -> https://stackoverflow.com/a/2133217/8391649 — TomInCode, Feb 02 '21 at 01:20
OP should simply create a variable to contain the image's current position and a variable to contain each slide's step size (or an array, if they differ) and then every time the user inputs to slide the image, they should add the step size to the current position, and then set its position to the current position variable's value. — OOPS Studio, Feb 02 '21 at 01:27
I believe this will help: [Parallax.js](https://pixelcog.github.io/parallax.js/), [Parallax scrolling](https://cssanimation.rocks/parallax/) — Weilory, Feb 02 '21 at 01:30
Thanks I will try all of the things you said to me and I will come back later! Thanks — , Feb 02 '21 at 01:39

score 0 · Answer 1 · answered Feb 02 '21 at 01:43

Just add a div in html #slideshow

and add Another div Inside slideshow and set backgroun-image for this div and use this js code

var slideshow= document.querySelector("#slideshow"); // This slidshow Father Of Img
var img= document.querySelector("#Background"); // This For Div Has Img Background

slideshow.addEventListener("mousemove", function(e) { //To add Event Mousemove
 //Change Position of img To Move it
  img.style.backgroundPositionX = -e.offsetX * 1.8 + "px"; 
  img.style.backgroundPositionY = -e.offsetY + 80 + "px";
});
//This When You Hover One SlideShow
slideshow.addEventListener("mouseenter", function() {
  setTimeout(function() {
    slideshow.removeEventListener("mouseenter");
  }, 250);
  
});

So If You Want To read about all methods I have used in this code Here it is:

That's only Thank You <3

score 0 · Answer 2 · answered Feb 02 '21 at 01:59

Try This

HTML

<div id="landing-content">
    <section class="slider"> 
        <img src="http://i.imgur.com/fVWomWz.png"></img>
            
        </section>
 </div>

CSS

#landing-content {
overflow: hidden;
background-image: url(http://i.imgur.com/F2FPRMd.jpg);
width: 100%;
background-size: cover;
background-repeat: no-repeat;
max-height: 500px;
border-bottom: solid;
border-bottom-color: #628027;
border-bottom-width: 5px;
}

.slider {
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 200px;
max-width: 1002px;
}

.slider img {
width: 80%;
padding-left: 10%;
padding-right: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}

Jquery

$('#landing-content').mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 6);
    var amountMovedY = (e.pageY * -1 / 6);
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});

How can I make a slideshow with one image

2 Answers2