Добавление автоматического слайд-шоу привело к горизонтальной прокрутке?

Вчера вечером я добавил на свой сайт автоматическое слайд-шоу, которое работает нормально и так, как мне бы хотелось, однако оно создало очень раздражающую горизонтальную полосу прокрутки, которая позволяет мне прокручивать вправо, чтобы увидеть ближайшие фотографии. Я пробовал x-overflow: hidden; но это не сработало.

Кто-нибудь знает, что я могу это исправить?

Снимок экрана 1

Снимок экрана 2

a {
    text-decoration: none;
}

/* Centering and styling the logo */
img.center {
    display: block;
    margin: auto; /* Image wasn't exactly centred until I added the 0 */
    width: 8%;
   padding: 0 65px 0 0;
}

/* Removing the bullet-points and styling the nav bar */
ul {
    list-style: none;
    padding: 0 0 20px 0;
    margin-top: 0px;
    background-color: #000000;
    text-align: center;
    z-index: 100;

}
li {
    float: left;
    margin-right: 15px;
    display: inline-block;
    padding: 0 89px 0 85px;
}
li a {
    display: block;
    color: white;
    font-family: courier;
}


head {
    margin: 0;
}

body {
    color: black;
    margin: 0;

}

footer {
    margin: 0;
}


@keyframes slider {
    0% {
        left: 0;
    }

    20% {
        left: 0;
    }

    25% {
        left: -100%;
    }

    45% {
        left: -100%;
    }

    50% {
        left: -200%;
    }

    70% {
        left: -200%;
    }

    75% {
        left: -300%;
    }

    95% {
        left: -300%;
    }

    100% {
        left: -400%;
    }
}

#slider {
    overflow: hidden;
}

#slider figure img {
    width: 15%;
    height: 600px;
    float: left;
    display: inline-block;
    padding-left: 0 px;
}

#slider figure {
    position: absolute;
    width:9000px;
    margin: 0px;
    padding-top: -10px;
    padding-left: -100px;
    text-align: center;
    font-size: 0;
    animation: 15s slider infinite; 
}
<header>
    <img src="Images/LOGO.png" alt="ANALOG Logo" class="center"> <!-- Adding the logo  -->
    
    <nav> <!-- indicates that page navigation follows -->
        <ul> <!-- Unordered list of elements -->
            <li><a href="about.html">ABOUT US</a></li> <!-- Link to About Us page -->
            <li><a href="venues.html">VENUES</a></li> <!-- Link to Venues page -->
            <li><a href="index.html">HOME PAGE</a></li> <!-- Link to Home Page -->
            <li><a href="artists.html">ARTISTS</a></li> <!-- Link to Artists page -->
            <li><a href="contactus.html">CONTACT US</a></li> <!-- Link to Contact Us page --> 
        </ul>
    </nav>
</header>

<div id="slider">
    <figure>
        <img src="Images/ALGO 1.jpg">
        <img src="Images/ALGO 2.jpg">
        <img src="Images/ALGO 3.jpg">
        <img src="Images/ALGO 4.jpg">
        <img src="Images/ALGO 5.jpg">
    </figure>   
</div>

<h1>Upcoming Events..</h1>


html css
person Bradley Mallon    schedule 08.01.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Просто добавьте это в CSS:

body {
  overflow: hidden;
}
person Core972    schedule 08.01.2018

arrow_upward
1
arrow_downward

Поскольку ваш элемент #slider figure имеет абсолютное позиционирование, его родитель не имеет высоты. Чтобы скрытое переполнение работало, вы можете указать высоту элемента #slider, как я сделал ниже.

a {
	text-decoration: none;
}

img.center {      /* Centering and styling the logo */
  display: block;
   margin: auto; /* Image wasn't exactly centred until I added the 0 */
   width: 8%;
   padding: 0 65px 0 0;
}

ul {               /* Removing the bullet-points and styling the nav bar */
 	list-style: none;
  	padding: 0 0 20px 0;
  	margin-top: 0px;
  	background-color: #000000;
  	text-align: center;
  	z-index: 100;

}
li {              
  	float: left;
    margin-right: 15px;
    display: inline-block;
    padding: 0 89px 0 85px;
}
li a {
	display: block;
	color: white;
	font-family: courier;
}


head {
	margin: 0;
}

body {
	color: black;
	margin: 0;

}

footer {
	margin: 0;
}




@keyframes slider {

0% {
	left: 0;
}

20% {
	left: 0;
}

25% {
	left: -100%;
}

45% {
    left: -100%;

}

50% {
		left: -200%;

}

70% {
	left: -200%;
}

75% {
	left: -300%;
}

95% {
	left: -300%;
}

100% {
	left: -400%;

}

}

#slider {
	overflow: hidden;
  width: 100%;
  height : 600px;
  position: relative;
}

#slider figure img {
	width: 15%;
	height: 600px;
	float: left;
	display: inline-block;
	padding-left: 0 px;
}

#slider figure {
	position: absolute;
	width:9000px;
	margin: 0px;
	padding-top: -10px;
	padding-left: -100px;
	text-align: center;
	font-size: 0;
	animation: 15s slider infinite; 

}
<body>
		<header>
			<img src="Images/LOGO.png" alt="ANALOG Logo" class="center"> <!-- Adding the logo  -->
			
			<nav> <!-- indicates that page navigation follows -->
				<ul> <!-- Unordered list of elements -->
					<li><a href="about.html">ABOUT US</a></li> <!-- Link to About Us page -->
					<li><a href="venues.html">VENUES</a></li> <!-- Link to Venues page -->
					<li><a href="index.html">HOME PAGE</a></li> <!-- Link to Home Page -->
					<li><a href="artists.html">ARTISTS</a></li> <!-- Link to Artists page -->
					<li><a href="contactus.html">CONTACT US</a></li> <!-- Link to Contact Us page --> 
				</ul>
			</nav>
			

		</header>
		
		<div id="slider" class="clearfix">
			<figure>
				<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg">
				<img src="https://www.google.com/search?q=images&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiSs9C-xsjYAhUFlpAKHX9JC7YQ_AUICigB&biw=1920&bih=949#imgrc=TCzIUatmlfq74M:">
				<img src="Images/ALGO 3.jpg">
				<img src="Images/ALGO 4.jpg">
				<img src="Images/ALGO 5.jpg">
			</figure>	

		</div>

		<h1>Upcoming Events..</h1>

	</body>










</html>

person Matthew    schedule 08.01.2018