jbs Posted May 9, 2017 Share Posted May 9, 2017 Hello, I'm currently trying to utilize the W3 slideshow example shown at https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_imgdots The script works great, as long as I use all 3 image slots. As soon as I delete one and try to make it a slide show between 2 images, with two onClick images underneath, the two onClick images do not center themselves under the main image like when there's 3, and instead they float left. I've tried tweaking every possible variable in https://www.w3schools.com/w3css/4/w3.css without any success. The main parameters that seem to have an effect on the onClick images are the lines: .w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%} .w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important;} .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px} However no tweaks I've done seem to have the desired effect of centering the two onClick examples. If anyone could nudge me in the right direction that'd be greatly appreciated. Thanks for any help in advance. Link to comment Share on other sites More sharing options...
Ingolme Posted May 10, 2017 Share Posted May 10, 2017 This works for me: <div class="w3-content" style="max-width:1200px"> <img class="mySlides" src="img_nature_wide.jpg" style="width:100%"> <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%"> <div class="w3-row-padding w3-section"> <div class="w3-col s6"> <img class="demo w3-opacity w3-hover-opacity-off" src="img_nature_wide.jpg" style="width:100%" onclick="currentDiv(1)"> </div> <div class="w3-col s6"> <img class="demo w3-opacity w3-hover-opacity-off" src="img_fjords_wide.jpg" style="width:100%" onclick="currentDiv(2)"> </div> </div> </div> </div> Just change the s4 classes to s6. Link to comment Share on other sites More sharing options...
jbs Posted May 10, 2017 Author Share Posted May 10, 2017 1 hour ago, Ingolme said: This works for me: Just change the s4 classes to s6. Yea that definitely works. It does resize the onClick images to where they're much larger than when it's a row of 3. If that's the only way to do it no worries, just figured I'd ask if you could keep the original size but still have it centered. And thanks for the quick reply, I'll definitely use this if it's the only option. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 10, 2017 Share Posted May 10, 2017 Replace <div class="w3-row-padding w3-section"> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="img_nature_wide.jpg" style="width:100%" onclick="currentDiv(1)"> </div> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="img_fjords_wide.jpg" style="width:100%" onclick="currentDiv(2)"> </div> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="img_mountains_wide.jpg" style="width:100%" onclick="currentDiv(3)"> </div> </div> With <div class="w3-row-padding w3-section w3-bar-block w3-center"> <div class="w3-bar-item w3-col s4 w3-show-inline-block"> <img onclick="currentDiv(1)" style="width:100%" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" class="demo w3-opacity w3-hover-opacity-off w3-opacity-off"> </div> <div class="w3-bar-item w3-col s4 w3-show-inline-block"> <img onclick="currentDiv(2)" style="width:100%" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" class="demo w3-opacity w3-hover-opacity-off"> </div> <div class="w3-bar-item w3-col s4 w3-show-inline-block"> <img onclick="currentDiv(3)" style="width:100%" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" class="demo w3-opacity w3-hover-opacity-off"> </div> </div> and Add css .w3-bar-item.w3-col.s4.w3-show-inline-block { margin: 0 -0.4ex; } Link to comment Share on other sites More sharing options...
jbs Posted May 10, 2017 Author Share Posted May 10, 2017 5 hours ago, dsonesuk said: Replace <div class="w3-row-padding w3-section"> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="img_nature_wide.jpg" style="width:100%" onclick="currentDiv(1)"> </div> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="img_fjords_wide.jpg" style="width:100%" onclick="currentDiv(2)"> </div> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="img_mountains_wide.jpg" style="width:100%" onclick="currentDiv(3)"> </div> </div> With and Add css .w3-bar-item.w3-col.s4.w3-show-inline-block { margin: 0 -0.4ex; } That's works perfectly, thanks so much. Don't think I ever would of figured this one out. 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