Skip to content

Instantly share code, notes, and snippets.

@javedbaloch4

javedbaloch4/image-switcher.html

Last active August 30, 2021 04:18
Show Gist options
  • Save javedbaloch4/80e2b2847011bd3eb03f7f9e4a4e21cf to your computer and use it in GitHub Desktop.
Save javedbaloch4/80e2b2847011bd3eb03f7f9e4a4e21cf to your computer and use it in GitHub Desktop.
Download ZIP
TailwindCSS & AlpineJS Image switcher.
Raw
image-switcher.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.min.js" defer></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="">
</head>
<body class="bg-gray-400">
<div class="container mx-auto px-4 mt-4" x-data="{ image: 'image1' }">
<div>
<img src="https://www.climaxcomputer.com/wp-content/uploads/2018/03/apple_mll42ll_a_13_3_macbook_pro_with_1293728_2-1.jpg" x-show="image === 'image1'">
<img src="https://www.qmart.pk/image/cache/cache/2001-3000/2692/main/6b83-MAcbook-Pro-MUHP2-Qmart-2-0-1-550x550.jpg" x-show="image === 'image2'">
<img src="https://laptopmart.pk/wp-content/uploads/2020/06/MXK52.jpg" x-show="image === 'image3'">
</div>
<div class="flex items-center mt-4">
<a
href="#"
@click.prevent=" image = 'image1'"
class="border border-transparent hover:border-blue-500"
:class=" { 'border-blue-500' : image === 'image1' }"
>
<img src="https://www.climaxcomputer.com/wp-content/uploads/2018/03/apple_mll42ll_a_13_3_macbook_pro_with_1293728_2-1.jpg" alt="mac pro" class="w-12">
</a>
<a
href="#"
@click.prevent=" image = 'image2'" class="border border-transparent hover:border-blue-500 ml-2"
:class=" {'border-blue-500' : image === 'image2'} "
>
<img src="https://www.qmart.pk/image/cache/cache/2001-3000/2692/main/6b83-MAcbook-Pro-MUHP2-Qmart-2-0-1-550x550.jpg" alt="mac pro" class="w-12">
</a>
<a
href="#"
@click.prevent=" image = 'image3' "
class="border border-transparent hover:border-blue-500 ml-2"
:class=" { 'border-blue-500' : image === 'image3' } "
>
<img src="https://laptopmart.pk/wp-content/uploads/2020/06/MXK52.jpg" alt="mac pro" class="w-12">
</a>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment