Container for Splide

[cannuck64]

Having some issues with the container for splide.

I am looking to add multiple sliders on the same page, but the slider always pushes the container for splide out of the page bounds right side.

Pretty new to this and nothing seems to be working to limit the slider width, other then limiting the number of slides in the slider.

<style>
.splide__slide img {
  width: auto;
  height: 150px;
}  
.contentSlider{
  text-align: center;
  width:100%;
  overflow: hidden;
}
</style>
<div class="contentSlider">
  <h1>Exclusive Items</h1>
<table>
  <tr>
	<td>
<div class="splide" id="exclusiveProducts">
	<div class="splide__track">
	  <ul class="splide__list">
				<li class="splide__slide">
					<div class="splide__slide__container">
						<img src="images/TOMATOESINBAG2021.jpg" alt="4x4 Plastic Bag 2 Mil" title=" 4x4 Plastic Bag 2 Mil " /></a>
					</div><span style="color:black;">4x4 Plastic Bag 2<br />Mil</span>
				</li>
		</ul>
	</div>
  </div>

	</td>
  </tr>
</table>
</div>
<script>
document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#featuredProducts', {
  perPage	:'8',
  gap : '0.1em',
  padding: '1%',
  width: '60%',
  type   	: 'loop',
  drag		: true,
  autoWidth : false,
  pagination  : false,
  } ).mount();
} );	
</script>

Basically I am looking to add 1 to n sliders on a page, and limit the width to the full page width, on a browser.

thanks

[NaotoshiFujita]

I don't understand what's going on, but:

• Try removing <table> and related tags. It should not be used just for a layout purpose
• or adding table { width: 100% }

[cannuck64]

Yes that is where I started from first. I am using bootstrap for the site if that matters, but it seems when I lower the perPage value the right side push over gets smaller. I have 15 list items in the slider, is that too many?

Been at this for a couple days is why I am inquiring on it. Hoping you would see something I am missing. It is great work and would love to implement this site wide to go along with the open source cart system I work on.

[NaotoshiFujita]

I have 15 list items in the slider, is that too many?

No, any number of slides are acceptable.

What happens if you remove the table?

[cannuck64]

I have removed the table tags, and now only have the slider in a container div tag 👍

<style> .splide__slide img { width: auto; height: 150px; } .contentSlider{ text-align: center; width:100%; overflow: hidden; } </style>

No change on the push over on the right side.

the multiple sliders both work great except I can not contain then in a set area without the right side push over.

[NaotoshiFujita]

I have no idea. Share your site url or reproduce the bug on codesandbox.

[cannuck64]

https://dev.mrboxonline.com/

To reload t page, need to click on the logo

[NaotoshiFujita]

The culprit is this table:

<table width="100%" style="background:#ffffff;">

Do not use a table tag for layout purpose. It's not semantic and your code easily gets out of control.

[cannuck64]

Thanks, that got rid of 90% or it, I will have to redo my side column, but that should be straight forward. it still sticks over some, but I will look at the table tags etc and remove all occurrences from the layout control first. Just to say, this is great work and is exactly what I have been looking for for a long time.