W3 CSS Slideshow Indicators with two images?

[jbs]

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.

[Ingolme]

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.

[jbs]

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.

[dsonesuk]

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; }

[jbs]

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.