2

So I know there's a lot of horizontal slideshows out there but I've tried to follow them and every time there's a problem. Every time it's either really complicated or doesn't work at all for me. So I tried creating my own (sorry for the messy code): 

.wrapper {
 width: 100%;
 height: 35vw;
 margin: auto;
 background: #fff url("https://s-media-cache-ak0.pinimg.com/originals/a4/f2/cb/a4f2cb80ff2ae2772e80bf30e9d78d4c.gif") no-repeat center;
 background-size: 200px 200px;
}

.slides {
 position: absolute;
 height: 35vw;
 width: 100%;
}

#slide1{
 background: transparent url("https://www.planwallpaper.com/static/images/hd-wallpaper-1080p-widescreen-1080p-backgrounds.jpg") no-repeat center;
 background-size: cover;
 animation: left1 15s infinite;
}

#slide2 {
 background: transparent url("https://www.planwallpaper.com/static/images/hd-beach-wallpapers-1080p.jpg") no-repeat center;
 background-size: cover;
 animation: left2 15s infinite;
 left: 100%;
 
}
#slide3 {
 background: transparent url("https://www.planwallpaper.com/static/images/01819_birdonabranch_1920x1080.jpg") no-repeat center;
 background-size: cover;
 animation: left3 15s infinite;
 left: 200%;
}

@keyframes left1 {
0% {left: 0%; right:0%;}
26.8% {left: 0%; right:0%;}
33.5% {left: -100%; right: 100%;}
93.8% {left: -200%; right: 200%;}
100% {left: 0%; right: 0%;}
}

@keyframes left2 {
0% {left: 100%; right:-100%;}
26.8% {left: 100%; right:-100%;}
33.5% {left: 0%; right: 0%;}
60.3% {left: 0%; right: 0%;}
67% {left: -100%; right: 100%;}
93.8% {left: -100%; right: 100%;}
100% {left: 100%; right: -100%;}
}

@keyframes left3 {
0% {left: 200%; right:-200%;}
26.8% {left: 200%; right:-200%;}
33.5% {left: 100%; right: -100%;}
60.3% {left: 100%; right: -100%;}
67% {left: 0%; right: 0%;}
93.8% {left: 0%; right: 0%;}
100% {left: 200%; right: -200%;}
}
<body>

<div class="wrapper">
 <div class="slides" id="slide1"></div>
 <div class="slides" id="slide2"></div>
 <div class="slides" id="slide3"></div>
</div>
</body>

At first, I thought I was okay. Then I noticed that you're able to scroll horizontally. I tried fixing that by using overflow:hidden in different ways and combinations with display: and position:. Nothing works. Either the images don't get positioned properly or the animations don't work. I never thought positioning elements off-page would be so ridiculously difficult.
P.S. I have not studied any web design, I'm self-taught and trying to create a decent website.

Ansis Spruģevics
  • 161
  • 5
  • 18
  • `overflow: hidden` works, though since your slides has `position: absolute` and the `wrapper` has no position, the slides will relate to the body instead. So either add `overflow: hidden` to the body or give the `wrapper` a position such as `position: relative` together with `overflow: hidden` – Asons May 04 '17 at 18:25

2 Answers2

1

Adding position:relative and overflow:hidden to .wrapper seems to fix the problem.

.wrapper {
 width: 100%;
 height: 35vw;
 margin: auto;
 background: #fff url("https://s-media-cache-ak0.pinimg.com/originals/a4/f2/cb/a4f2cb80ff2ae2772e80bf30e9d78d4c.gif") no-repeat center;
 background-size: 200px 200px;
        position: relative;
        overflow: hidden;
}

.slides {
 position: absolute;
 height: 35vw;
 width: 100%;
}

#slide1{
 background: transparent url("https://www.planwallpaper.com/static/images/hd-wallpaper-1080p-widescreen-1080p-backgrounds.jpg") no-repeat center;
 background-size: cover;
 animation: left1 15s infinite;
}

#slide2 {
 background: transparent url("https://www.planwallpaper.com/static/images/hd-beach-wallpapers-1080p.jpg") no-repeat center;
 background-size: cover;
 animation: left2 15s infinite;
 left: 100%;
 
}
#slide3 {
 background: transparent url("https://www.planwallpaper.com/static/images/01819_birdonabranch_1920x1080.jpg") no-repeat center;
 background-size: cover;
 animation: left3 15s infinite;
 left: 200%;
}

@keyframes left1 {
0% {left: 0%; right:0%;}
26.8% {left: 0%; right:0%;}
33.5% {left: -100%; right: 100%;}
93.8% {left: -200%; right: 200%;}
100% {left: 0%; right: 0%;}
}

@keyframes left2 {
0% {left: 100%; right:-100%;}
26.8% {left: 100%; right:-100%;}
33.5% {left: 0%; right: 0%;}
60.3% {left: 0%; right: 0%;}
67% {left: -100%; right: 100%;}
93.8% {left: -100%; right: 100%;}
100% {left: 100%; right: -100%;}
}

@keyframes left3 {
0% {left: 200%; right:-200%;}
26.8% {left: 200%; right:-200%;}
33.5% {left: 100%; right: -100%;}
60.3% {left: 100%; right: -100%;}
67% {left: 0%; right: 0%;}
93.8% {left: 0%; right: 0%;}
100% {left: 200%; right: -200%;}
}
<body>

<div class="wrapper">
 <div class="slides" id="slide1"></div>
 <div class="slides" id="slide2"></div>
 <div class="slides" id="slide3"></div>
</div>
</body>
mrogers
  • 1,187
  • 2
  • 15
  • 22
  • R u a wizurd? Seriously, I am so happy right now, you've saved my mind from exploding. Mind telling me how that works? Just so I could understand the concept behind it. – Ansis Spruģevics May 04 '17 at 18:11
  • I've had similar issues with `overflow:hidden` not working as expected so I investigated that avenue and it fixed the problem. Questions like this might add some insight: http://stackoverflow.com/questions/3970455/overflow-hidden-not-working?noredirect=1&lq=1 – mrogers May 04 '17 at 18:16
  • If you find the answer to a question in another answer, as the one you linked to, you don't post an answer, you vote, or flag, to close as a duplicate. Also, a good answer shouldn't read _seems to fix the problem_, for a user to get something out from an answer, a good explanation is recommended, if not mandatory – Asons May 04 '17 at 18:28
1

You should use Bootstrap's Carousel instead of custom logic. You can customize it any way you want.

Here is a working demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="https://www.planwallpaper.com/static/images/hd-wallpaper-1080p-widescreen-1080p-backgrounds.jpg" alt="slide 1" width="460" height="345">
      </div>

      <div class="item">
        <img src="https://www.planwallpaper.com/static/images/hd-beach-wallpapers-1080p.jpg" alt="slide 2" width="460" height="345">
      </div>
    
      <div class="item">
        <img src="https://www.planwallpaper.com/static/images/01819_birdonabranch_1920x1080.jpg" alt="slide 3" width="460" height="345">
      </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>
Ethilium
  • 1,224
  • 1
  • 14
  • 20
  • Looks awesome! Might switch to it, but I'm still learning and troubleshooting is a great way of learning. Once I understand it all a bit better I'll probably look for better alternatives like this one. – Ansis Spruģevics May 04 '17 at 18:25