Tailwind image slider

slider with navigation buttons and info about image

This tailwind example is contributed by Anonymous, on 21-Nov-2023. Component is made with Tailwind v3.4.

Tailwind v3.4 21.5k 15

<div class="text-xl font-bold m-5 text-center">Use Keyboard Arrow Keys To Go Left And Right</div>

<div class="gallery border-2 rounded mx-auto m-5 bg-white" style="width:750px;">
  <div class="top flex p-2 border-b select-none">
    <div class="heading text-gray-800 w-full pl-3 font-semibold my-auto"></div>
    <div class="buttons ml-auto flex text-gray-600 mr-1">
      <svg action="prev" class="w-7 border-2 rounded-l-lg p-1 cursor-pointer border-r-0"
        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path action="prev" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M10 19l-7-7m0 0l7-7m-7 7h18" />
      </svg>
      <svg action="next" class="w-7 border-2 rounded-r-lg p-1 cursor-pointer" xmlns="http://www.w3.org/2000/svg"
        fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path action="next" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M14 5l7 7m0 0l-7 7m7-7H3" />
      </svg>
    </div>
  </div>
  <div class="content-area w-full h-96 overflow-hidden">
    <div class="platform shadow-xl h-full flex">
      
      <div class="each-frame border-box flex-none h-full" title="Tiger">
        
        
        <div class="main flex w-full p-8">
          <div class="sub w-4/6 my-auto">
            <img class="w-full p-8" src="https://images-na.ssl-images-amazon.com/images/I/81eJpEEQwYL._AC_SL1500_.jpg" alt="">
          </div>
          <div class="sub w-full my-auto">
            <div class="head text-3xl font-bold mb-4">The Tiger</div>
            <div class="long-text text-lg">(Panthera tigris) is the largest extant cat species and a member of the genus
              Panthera. It is most recognisable for its dark vertical stripes on orange-brown fur with a lighter
              underside. It is an apex predator, primarily preying on ungulates such as deer and wild boar.</div>
            
            <div
              class="goto border border-gray-400 text-sm font-semibold inline-block mt-2 p-1 px-2 rounded cursor-pointer"
              action="goto" goto="2">Goto Third Frame</div>
            
            <div
              class="goto border border-gray-400 text-sm font-semibold inline-block mt-2 p-1 px-2 rounded cursor-pointer"
              action="goto" goto="end">Goto Last Frame</div>
          </div>
        </div>
      </div>

<div class="each-frame border-box flex-none h-full" title="Lion">
        
        
        <div class="main flex w-full p-8">
          <div class="sub w-4/6 my-auto">
            <img class="w-full p-8" src="https://image.freepik.com/free-vector/cute-lion-cartoon_160606-353.jpg" alt="">
          </div>
          <div class="sub w-full my-auto">
            <div class="head text-3xl font-bold mb-4">The Lion</div>
            <div class="long-text text-lg">The lion is a species in the family Felidae and a member of the genus
              Panthera. It has a muscular, deep-chested body, short, rounded head, round ears, and a hairy tuft at the
              end of its tail. It is sexually dimorphic; adult male lions have a prominent mane.</div>
          </div>
        </div>
      </div>

<div class="each-frame border-box flex-none h-full" title="Rat">
        
        
        <div class="main flex w-full p-8">
          <div class="sub w-4/6 my-auto">
            <img class="w-full p-8" src="https://i.pinimg.com/originals/07/1d/d0/071dd09d7b36e49139fe2cf08ff728a8.jpg" alt="">
          </div>
          <div class="sub w-full my-auto">
            <div class="head text-3xl font-bold mb-4">The Rat</div>
            <div class="long-text text-lg">Rats are various medium-sized, long-tailed rodents. Species of rats are found
              throughout the order Rodentia, but stereotypical rats are found in the genus Rattus. Other rat genera
              include Neotoma, Bandicota and Dipodomys. Rats are typically distinguished from</div>
          </div>
        </div>
      </div>

<div class="each-frame border-box flex-none h-full" title="Owl">
        
        
        <div class="main flex w-full p-8">
          <div class="sub w-4/6 my-auto">
            <img class="w-full p-8" src="https://image.freepik.com/free-vector/cartoon-owl-tree-branch_194935-43.jpg" alt="">
          </div>
          <div class="sub w-full my-auto">
            <div class="head text-3xl font-bold mb-4">The Owl</div>
            <div class="long-text text-lg">Owls are birds from the order Strigiformes, which includes over 200 species
              of mostly solitary and nocturnal birds of prey typified by an upright stance, a large, broad head,
              binocular vision, binaural hearing, sharp talons, and feathers adapted for silent flight.</div>
            <div
              class="goto border border-gray-400 text-sm font-semibold inline-block mt-2 p-1 px-2 rounded cursor-pointer"
              action="goto" goto="0">Goto First Frame</div>
          </div>
        </div>
      </div>

</div>
  </div>
</div>

.body {
    background-color: white !important;
  }
</style>

// run G.load() if new data loaded with ajax

</script>

Related Examples

Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Brandon D

4 years ago

33.5k
Image carousel
Uses Flowbite

Fagundo67

3 years ago

32.1k
3 columns blog section
de columnis, columni, 3 columns

Anonymous

2 years ago

12.9k
Responsive Article Section

Prashant

4 years ago

17.2k
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Maxim

2 years ago

14.2k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Tailwind image card with text above it

I.P. Leroy

3 years ago

26.5k
Image Carousel

Nikolai

2 years ago

8.1k
Tailwind card

Conan Hilton

3 years ago

14.4k
Responsive Card Grid with hover animation

Prashant

4 years ago

20.7k
google ui cards
google ui cards

Anonymous

3 years ago

10.6k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Holiday package card
Responsive card

Aman kumar

2 years ago

7.2k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Anonymous

3 years ago

11.5k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Prajwal Hallale

3 years ago

7.6k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

11.1k