Search code examples
javascriptcarouselimage-slidertiny-slider

Tiny-slider How do I remove the slide number?

I want to know if there's a property I can use to access the slide number. I'm going to need it for the functionality I want to include, but I don't want it to be displayed on the webpage.

I combed through the library to see if there was an obvious property that I could use, but either I didn't see it or it wasn't there. This is interesting since in a video I watched, the person didn't have their slide number displayed at all even though I'm using virtually the same properties when instantiating the tns object.

This is my slider, and you can see the slider number above the images. That's what I'm hoping to get rid of.

enter image description here

Just to clarify, I'm using the Svelte framework.

Code

<script>
  import { onMount } from "svelte";
  import {tns} from "tiny-slider/src/tiny-slider.js";

  let slider

  onMount(()=>{
    slider = tns({
      container: ".my-slider",
      slideBy: 1,
      speed: 1000,
      nav: false,
      controls: false,
      autoplay: true,
      autoplayButtonOutput: false,
      responsive: {
        1024: {
          items: 4,
        }
      },
    })
  })

  const images = [
    {uid: 'image1', src: '/images/cat1.jpg'},
    {uid: 'image2', src: '/images/cat2.jpg'},
    {uid: 'image3', src: '/images/cat3.jpg'},
    {uid: 'image4', src: '/images/cat4.jpg'},
 
    {uid: 'image5', src: '/images/cat5.jpg'},
    {uid: 'image6', src: '/images/cat6.jpg'},
    {uid: 'image7', src: '/images/cat7.jpg'},
    {uid: 'image8', src: '/images/cat8.jpg'},
     
    {uid: 'image9', src: '/images/cat9.jpg'},
    {uid: 'image10', src: '/images/cat10.jpg'},
    {uid: 'image11', src: '/images/cat11.jpg'},
    {uid: 'image12', src: '/images/cat12.jpg'},

    {uid: 'image13', src: '/images/cat13.jpg'},
    {uid: 'image14', src: '/images/cat14.jpg'},
    {uid: 'image15', src: '/images/cat15.jpg'},
    {uid: 'image16', src: '/images/cat16.jpg'},

    {uid: 'image17', src: '/images/cat17.jpg'},
    {uid: 'image18', src: '/images/cat18.jpg'},
    {uid: 'image19', src: '/images/cat19.jpg'},
    {uid: 'image20', src: '/images/cat20.jpg'}
  ]

</script>

<section id="slider">
  <div class="container">
      <div class="wrapper">
        <div>
          <!-- Slider -->
          <div class="my-slider">
            {#each images as image (image.uid)}
              <div class="slide">
                 <div class="slide-img-container">
                  <img src={image.src} alt="">
                  <!-- title of story goes here -->
                 </div>
              </div>
            {/each}
          </div>
        </div>
      </div>
  </div>
</section>

<style>
  #slider {
    position: absolute;
    left: 0;
  }

  .container {
    width: 1024px;
    margin: auto;
    overflow: hidden;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
  }

  .my-slider {
    width: calc(20 * 250px);
    height: 250px;
    display: flex;
  }

  .slide-img-container {
    height: 250px;
    width: 250px;
    cursor: pointer
  }

  .slide-img-container img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
</style>
Solution

  • Looked through the code on the library. I think because you have your slider absolutely positioned this CSS in the library is not working

    .tns-visually-hidden { position: absolute; left: -10000em; }

    Judging by the code this should be the class on that text container.

    I would just try adding this class to your own CSS

    .tns-visually-hidden { display: none; }