title: How to make horizontal views scrollable with a lot of pictures
body: <p>I am trying to have a horizontal scroll, but somehow when I run my code, the chevronleft icon and right icon did not show up, and under some tab when there are not a lot of pictures, I can see icons, but under a tab that has a lot of pictures, it seems icons are hidden, and pictures are overflow, can anyone help me out?</p>
  <p>another issues is as={fragment} seems cause error too, should i just delete as={fragment}</p>
  <p>here is my code:</p>
  <pre><code>const tabs = [
    {
      name: &quot;Fitness&quot;,
      features: [
        {
          imageSrc:
            &quot;https://images.pexels.com/photos/40662/shoes-footwear-hiking-shoes-walking-40662.jpeg&quot;,
         
        },
      ],
    },
  ....
  
  
     
  
  
  
  const slideLeft = () =&gt; {
          var slider = document.getElementById(&quot;slider&quot;);
          slider.scrollLeft = slider.scrollLeft - 500;
        };
      
        const slideRight = () =&gt; {
          var slider = document.getElementById(&quot;slider&quot;);
          slider.scrollRight = slider.scrollRight + 500;
        };
  
  
   
  
       &lt;Tab.Panels as={fragment} id=&quot;slider&quot; className=&quot;flex items-center&quot;&gt;
          {tabs.map((tab) =&gt; (
            &lt;Tab.Panel
              key={tab.name}
            &gt;
        
              &lt;MdChevronLeft
                className=&quot;opacity-50 cursor-pointer hover:opacity-100 &quot;
                onClick={slideRight}
                size={30}
              /&gt;
              {tab.features.map((feature) =&gt; (
                &lt;div
                  key={feature.name}
                  className=&quot;w-full h-full overflow-x-scroll scroll whitespace-nowrap scroll-smooth rounded-sm scrollbar-none sm:px-2 lg:pt-16 lg:gap-x-8&quot;
                &gt;
                  &lt;div className=&quot;w-[220px] h-[200px] inline-block cursor-pointer&quot;&gt;
                    &lt;img
                      src={feature.imageSrc}
                      alt={feature.imageAlt}
                      className=&quot;object-center object-cover&quot;
                    /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              ))}
              &lt;MdChevronRight
                className=&quot;opacity-50 cursor-pointer hover:opacity-100 &quot;
                onClick={slideRight}
                size={100}
              /&gt;
            &lt;/Tab.Panel&gt;
          ))}
        &lt;/Tab.Panels&gt;
  </code></pre>