I want to create slideshow css
Question
I want to create a slideshow CSS but the screen is overflow
.slideshow { width: 100%; overflow-x: scroll; transition: all 1s; } .slideshowImageOne { width: 93%; transform: translate3d(0px, 0px, 0px); height:200px; background: #1A2980; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #26D0CE, #1A2980); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #26D0CE, #1A2980); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ display: flex; border-radius: 10px; position: absolute; } .slideshowImageTwo { width: 93%; transform: translate3d(105%, 0px, 0px); height: 200px; background: #f46b45; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #eea849, #f46b45); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #eea849, #f46b45); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ border-radius: 10px; position: absolute; }
<h1>Header</h1> <div class="slideshow"> <div class="slideshowImageOne">HELLO</div> <div class="slideshowImageTwo">NAMSTEY</div> </div>
.slideshow is a main class and . slideshowImageOne is one div and other.
I want to the header is fixed and the slideshow is work correctly.
1 answers
solution1
0 2018-08-16 11:30:03
I have added a script in this file and removed transform property from .slideshowImageOne and .slideshowImageTwo .
<style>
.slideshowImage {display:none;}
.slideshowImageOne {
width:93%;
height:200px;
background: #1A2980;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #26D0CE, #1A2980);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #26D0CE, #1A2980);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
display: flex;
border-radius: 10px;
position: absolute;
}
.slideshowImageTwo {
width:93%;
height: 200px;
background: #f46b45;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #eea849, #f46b45);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #eea849, #f46b45);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-radius: 10px;
position: absolute;
}
</style>
<body>
<h1>Header</h1>
<div class="slideshow">
<div class="slideshowImage slideshowImageOne">HELLO</div>
<div class="slideshowImage slideshowImageTwo">NAMSTEY</div>
</div>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slideshowImage");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000);
}
</script>
</body>
Hope this helps..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
I want to add a slideshow to my website. I'm using html, css, and want to use jquery. How can I create a responsive image slideshow
I want to create a fullscreen cross fade slideshow with bxslider plugin
How can I create a timed slideshow with HTML/CSS and Javascript
I want to add an image to the slideshow
I want to create the following menu style by css
How can I program a slideshow with html and css?
How do I create a slideshow with fancyBox?
I'm trying 2 create a slideshow in JavaScript
I want to create space on both sides of my webpage without CSS
I want to create a dynamic and interactive donut chart (javascript & css )
Related Tags