tanmoy911 Posted April 21, 2016 Share Posted April 21, 2016 Dear Members, I am trying to develop a Responsive Slideshow using w3.css only. Don't want to use any other plugin. I want to achieve (http://www.free-css.com/free-css-templates/page193/mpurpose ) This effect. Below is the code it works not smooth enough though in desktop environment but fails when resize the browser window. <div class="w3-container w3-padding-16" style="position:relative"> <div class="w3-row"> <div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg1.jpg" style="max-width:100%;" > <div class="w3-container w3-orange"> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Garments </b></h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"><i>Fashions Aperals OutFits Weres </i> </h1> </div> <img src="Images/12246_ultramarine_blue_b.jpg" style="position:absolute;top:25%;right:10%;width:10%" alt="Portfolio 4"> </div> <div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg3.jpg" style="max-width:100%;"> <div class="w3-row w3-col m4 l4"> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Color Schemes </b> </h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"> <b> Comes with various color schemes </b> </h1> </div> <div class="w3-display-topright" > <img src="Images/12240_burnt_olive_b.jpg" class="w3-padding-16" style="width:70%" alt="Portfolio 4"> </div> </div> <div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg4.jpg" style="max-width:100%;"> <div class="w3-row w3-col m4 l4"> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Feature Rich </b> </h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"> <b> Huge amount of variations! </b> </h1> </div> <div class="w3-display-topright" > <img src="Images/12240_burnt_olive_b.jpg" class="w3-padding-16" style="width:70%" alt="Portfolio 4"> </div> </div> </div> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x.style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 4000); } </script> </div> May kindly help. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 21, 2016 Share Posted April 21, 2016 (edited) Just google 'css only slideshow', if you had gone with bootstrap you would have found it provides this feature. But! Its only for more modern browsers that support css3 animation. Edit: scratch that bootstrap does use js. Edited April 21, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
tanmoy911 Posted April 21, 2016 Author Share Posted April 21, 2016 Using bootstrap or any other like bx slider does have the capability. But I want to achieve only by using w3.css . The css framework provided by w3 schools. Can this be responsive when Implement this http://www.w3schools.com/w3css/w3css_slideshow.asp Link to comment Share on other sites More sharing options...
dsonesuk Posted April 21, 2016 Share Posted April 21, 2016 Yes! when you remove max-width: 500px; the images will stretch to width available to it. To use css animation like you are attempting to do, you need to add a class reference to image or image container so it will trigger the css animation, at the moment it only work on single viewable image available to it on loading. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 22, 2016 Share Posted April 22, 2016 (edited) Not exactly sure how you wanted orange h1 to show on layout so guessed, probably wrong but there you go. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <script type="text/javascript"> </script> <style type="text/css"> .mySlides img:first-child{max-width:100%;} .mySlides img:first-child + div img {width: 40%;} .mySlides h1, .mySlides img:first-child + div {width: 50%;} /* no such class middleright or middleleft so created them*/ .w3-display-middleright {bottom: 50%; right:0; position: absolute; text-align: center;} .w3-display-middleleft {position: absolute; left: 0; bottom: 70%;} .mySlides h1 b, .mySlides h1 i {padding-left: 15px; padding-right: 15px; font-size:1.7vw; } .flexbox { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; } .flexbox .mySlides { flex: 1; } </style> </head> <body> <div class="w3-container w3-padding-16" style="position:relative; width: 70%; margin: 0 auto;"> <div class="w3-row"> <div class="w3-display-container mySlides flexbox"> <img src="http://www.w3schools.com/w3css/img_la.jpg" class="w3-col" > <div class="w3-display-middleright"> <img src="http://www.w3schools.com/w3css/img_ny.jpg" style="" alt="Portfolio 4" class="w3-animate-right"> </div> <h1 class="w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b class="w3-orange w3-text-white"> Garments </b></h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle "><i>Fashions Aperals OutFits Weres </i> </h1> </div> <div class="w3-display-container mySlides flexbox"> <img src="http://www.w3schools.com/w3css/img_ny.jpg" class="w3-col"> <div class="w3-display-middleright"> <img src="http://www.w3schools.com/w3css/img_chicago.jpg" alt="Portfolio 4" class="w3-animate-right"> </div> <h1 class="w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b class="w3-orange w3-text-white"> Color Schemes </b> </h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"> <b> Comes with various color schemes </b> </h1> </div> <div class="w3-display-container mySlides flexbox"> <img src="http://www.w3schools.com/w3css/img_chicago.jpg" class="w3-col"> <div class="w3-display-middleright"> <img src="http://www.w3schools.com/w3css/img_la.jpg" alt="Portfolio 4" class="w3-animate-right"> </div> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Feature Rich </b> </h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"> <b> Huge amount of variations! </b> </h1> </div> </div> </div> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { //var z = x[i].getElementsByTagName("img")[1]; x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) { myIndex = 1; } //reset animation by cloning original and replace with the newer clone var anim_element = x[myIndex - 1]; var anim_element_clone = anim_element.cloneNode(true); anim_element.parentNode.replaceChild(anim_element_clone, anim_element); x[myIndex - 1].style.display = "block"; setTimeout(carousel, 4000); } </script> </body> </html> Edited April 25, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now