滑块中的img溢出和img过渡（HTML，CSS，JS）

Question

I'm creating a image slider with navigation button. But when I run the page at the first time, all the image will display like in a row. I try "overflow: hidden", but it doesn't work. Navigation function, I code by JS. My page has one more function that I use image map into the images. This is the reason why code HTML have 3 img_ID id (for those who curious about this) :D

Second, when I click the navigation button, the images can not be moved softly (I mean, it's look so hard to see. I want something smoothy like this when I click the nav button: https://codeconvey.com/Tutorials/cssSlider/ )

I try eveything as I know but It's still doesn't work :( Can anyone here figure out my problem? I really thankful with your support. Sorry for my bad English :( Here is my code:

 var slideIndex = 1; showSlides(slideIndex); function nextFlyer(n) { showSlides(slideIndex += n); } function currentFlyer(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("imgFlyers"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } 

 /*-------- ADJUSTING IMG OF FLYERS --------*/ .section_layer { width: 100%; } #img_ID { width: 100%; height: 50%; float: left; display: inline-block; /*background-repeat: no-repeat;*/ z-index: 1; /*display: block; margin: 0 auto;*/ -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); } .img_content { display: block; margin: 0 auto; } /*---------- NAVIGATION BUTTON ----------*/ .flyer-navigation-button { height: 100px; width: 100px; margin: 0; padding: 20px; background: 0; border: 0; cursor: pointer; } .flyer-navigation-button:hover { opacity: .4; } .flyer-navigation-button svg circle { fill: #0073c5; } .flyer-navigation-button svg polygon { fill: #fff; } .border_test { border: 1px solid black; } .navigation_container { position: relative; } button:focus { outline: 0 } .pages_number { position: absolute; background-color: beige; } .pages_number span { font-family: myriad-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #0073c5; font-size: 20px; } .zoom_slider { width: 30%; float: left; } .pages_number { float: left; width: 40%; } .download_button { float: right; width: 20% } .dot { cursor: pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .dot:hover { background-color: #717171; } /*------- FOLDER IMAGES INTO 1 SLIDE ---------*/ #image_slider{ position: relative; height: auto; list-style: none; overflow: hidden; float: left; /*Chrom default padding for ul is 40px */ padding:0px; margin:0px; } #image_slider li{ position: relative; float: left; } #pager li{ padding: 0px; margin:5px; width:20px; height:20px; border:1px solid white; color:white; list-style: none; opacity: 0.6; float:left; border-radius: 3px; cursor: pointer; } 

 <!-- begin snippet: js hide: false console: true babel: false --> 

Answer 1

You used #image_slider this id for styling, but no where used in the HTMl. There are other styles which are there in the CSS but not there in the HTML.

 var slideIndex = 1; showSlides(slideIndex); function nextFlyer(n) { showSlides(slideIndex += n); } function currentFlyer(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("imgFlyers"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex-1].style.display = "block"; } 

 /*-------- ADJUSTING IMG OF FLYERS --------*/ html, body{ height: 100%; margin:0; } .section_layer, .flyer_content, .image-holder { width: 100%; height: 100%; } .imgFlyers { width: 100%; height: 100%; float: left; display: inline-block; z-index: 1; -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); } /*---------- NAVIGATION BUTTON ----------*/ .flyer-navigation-button { height: 100px; width: 100px; margin: 0; padding: 20px; background: 0; border: 0; cursor: pointer; } .flyer-navigation-button:hover { opacity: .4; } .flyer-navigation-button svg circle { fill: #0073c5; } .flyer-navigation-button svg polygon { fill: #fff; } /*.navigation_container { position: relative; }*/ .flyer-navigation-button{ position: absolute; top: calc(50% - 30px); } .flyer-navigation-button.left { left: 0; } .flyer-navigation-button.right { right: 0; } button:focus { outline: 0; } .pages_number span { font-family: myriad-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #0073c5; font-size: 20px; } 

  <div class="flyer_content"> <div class="section_layer"> <!-- BEGIN THE NAVIGATION CONTENT --> <div class="navigation_container"> <button class="flyer-navigation-button left" id="flyer_navigation_backward" onclick="nextFlyer(-1)"> <svg viewBox="0 0 58 58" focusable="false"> <circle cx="29" cy="29" r="28.6"></circle> <polygon points="14.9,29.4 31.9,13.1 37.1,17.4 24,29.4 37.1,41.7 32.7,45.9"></polygon> </svg> </button> <button class="flyer-navigation-button right" id="flyer_navigation_forward" onclick="nextFlyer(1)"> <svg viewBox="0 0 58 58" focusable="false"> <circle cx="29" cy="29" r="28.6"></circle> <polygon points="43.1,29.4 26.1,13.1 20.9,17.4 34,29.4 20.9,41.7 25.3,45.9"></polygon> </svg> </button> </div> <!-- END THE NAVIGATION CONTENT --> <div class="image-holder"> <img class="imgFlyers" style="display: inline-block;" src="https://img07.rl0.ru/c4dea1147b4a02e2ff38a9fdbd8bed7a/c2560x1600/img.mota.ru/upload/wallpapers/2009/07/16/12/02/14317/ny_349-2560x1600.jpg" usemap="#flyermap" /> <img class="imgFlyers" style="display: none" src="http://weconnectedproductionsllc.com/wp-content/uploads/2015/02/Snowing-at-night-in-Park-City-UT.jpg" usemap="#flyermap" /> <img class="imgFlyers" style="display: none" src="http://3.bp.blogspot.com/-Gt8kdm8xwaA/VfMLfJT6DbI/AAAAAAAACJ8/ukXJoWeYFVk/s1600/DSC00392B.jpg" /> </div> </div> </div> 

Answer 2

Try this...

 var slideIndex = 1; showSlides(slideIndex); function nextFlyer(n) { showSlides(slideIndex += n); }; function showSlides(n) { var i; var op = 0.1; var slides = document.getElementsByClassName("imgFlyers"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.opacity = 0; setTimeout(function() { slides[slideIndex - 1].style.opacity = 1; }, 100); slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } 

 .section_layer { width: 100%; } #img_ID { width: 100%; height: 50%; float: left; display: inline-block; /*background-repeat: no-repeat;*/ z-index: 1; /*display: block; margin: 0 auto;*/ -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); } .img_content { display: block; margin: 0 auto; } /*---------- NAVIGATION BUTTON ----------*/ .flyer-navigation-button { height: 100px; width: 100px; margin: 0; padding: 20px; background: 0; border: 0; cursor: pointer; z-index: 1000; } .flyer-navigation-button:hover { opacity: .6; } .flyer-navigation-button svg circle { fill: #0073c5; } .flyer-navigation-button svg polygon { fill: #fff; } .border_test { border: 1px solid black; } .navigation_container { position: relative; } button:focus { outline: 0 } .pages_number { position: absolute; background-color: beige; } .pages_number span { font-family: myriad-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #0073c5; font-size: 20px; } .zoom_slider { width: 30%; float: left; } .pages_number { float: left; width: 40%; } .download_button { float: right; width: 20% } .dot { cursor: pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .dot:hover { background-color: #717171; } /*------- FOLDER IMAGES INTO 1 SLIDE ---------*/ #image_slider { position: relative; height: auto; list-style: none; overflow: hidden; float: left; /*Chrom default padding for ul is 40px */ padding: 0px; margin: 0px; } #image_slider li { position: relative; float: left; } #pager li { padding: 0px; margin: 5px; width: 20px; height: 20px; border: 1px solid white; color: white; list-style: none; opacity: 0.6; float: left; border-radius: 3px; cursor: pointer; } .imgFlyers { -webkit-transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95); } ul { display: block; list-style-type: disc; -webkit-margin-before: 0em; -webkit-margin-after: 0em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0px; } 

 <div id="flyer_view_tab"> <div class="navigation-bar"> <a id="pdf_button" target="_blank" href="#">Download</a> </div> <div class="flyer_content"> <div class="section_layer"> <div class="navigation_container"> <button class="flyer-navigation-button" is="w-navigation-button" id="flyer_navigation_backward" style="left: 0px;position: absolute;top: 0px;" onclick="nextFlyer(-1)"> <svg viewBox="0 0 58 58" focusable="false"> <circle cx="29" cy="29" r="28.6"></circle> <polygon points="14.9,29.4 31.9,13.1 37.1,17.4 24,29.4 37.1,41.7 32.7,45.9"></polygon> </svg> </button> <button class="flyer-navigation-button" is="w-navigation-button" id="flyer_navigation_forward" style="right: 0px; position: absolute; top: 0px; float: right;" onclick="nextFlyer(1)"> <svg viewBox="0 0 58 58" focusable="false"> <circle cx="29" cy="29" r="28.6"></circle> <polygon points="43.1,29.4 26.1,13.1 20.9,17.4 34,29.4 20.9,41.7 25.3,45.9"></polygon> </svg> </button> </div> <div class="image-holder"> <ul> <li class="imgFlyers dot"> <img src="https://static.pexels.com/photos/33537/cat-animal-cat-portrait-mackerel.jpg" height="250" width="510" /> </li> <li class="imgFlyers dot"> <img src="https://s-media-cache-ak0.pinimg.com/736x/0e/7f/7b/0e7f7b3f029a82e8e797ab6d3525ee5f--spring-animals-wild-animals.jpg" height="250" width="510" /> </li> <li class="imgFlyers dot"> <img src="https://newevolutiondesigns.com/images/freebies/animals-background-preview-3.jpg" height="250" width="510" /> </li> </ul> </div> </div> </div> </div>