Grid CSS to Create an Elegant Carousel and Image Slider in Tiddlywiki - Demo II

Tips & Tricks
#1

Following to my previous posts on CSS Grids in Tiddlywiki and Gird CSS to Create an Elegant Carousel and Image Slider in Tiddlywiki - Tips & Tricks - Talk TW

I would like to share another Carousel and Image Slider in Tiddlywiki 5.2.1.
The code has some extra comments for who like to learn how a carousel works!
I hope I can find enough free time to clean the code and publish them!

Screencast

img_750_%pn

To give a try

  1. download image-carousel-control-dots.json (866.9 KB)
  2. drag and drop into https://tiddlywiki.com
  3. open tid02/carousel and play!

Tiddlywiki just amazing! There are few things you may learn in this code

  1. injection of a class dynamically
  2. create dynamic tooltip
  3. navigate among items given by a filter
  4. using css Grid in Tiddlywiki

Improve the code and share here again!

Enjoy!

Best wishes
Mohammad

9 Likes
#2

Some more idea:

You may like to show some description when you navigate from one image to another!
These information may be stored in the image fields like description/caption or they may come from another tiddler!

Simply add a box below image and on navigation update the box!

2 Likes
#3

How to reproduce this?, i would like to use that carousel, it is amazing!

#4

umm it was just import it!!. i am new in TW

1 Like
#5

Thanks for the carousel! I’d like to use it in an object-oriented manner, where each call to the imageGallery macro gives a standalone carousel instance loaded with the images from the passed-in filter. Initial experiments calling it iteratively with a list yields multiple representations of the same instance loaded with images from all the calls. Some object context isolation is needed I suspect, but that’s beyond my current TW skill!

2 Likes
#7

You may find this alternative implementation of interest: Saq's Sandbox — Experimental doodads

4 Likes
#8

Could this functionality be applied to a toolbar, so you can scroll up/down and it move horizontally for different buttons?
Just food for thought :grin:

1 Like
#9

Amazing @saqimtiaz thanks!

For the next person who passes here and wonders how to implement an image carousel in TiddlyWiki using Swiffy Slider Plugin I made this little demo:

\define swiffyCarousel(imageFilter)
<$swiffy-slider>
<div class="swiffy-slider slider-nav-visible slider-nav-arrow slider-nav-mousedrag" >
    <ul class="slider-container">
        <$list filter=$imageFilter$ >
        <$image source=<<currentTiddler>> />
        </$list>
     </ul>

    <button type="button" class="slider-nav"></button>
    <button type="button" class="slider-nav slider-nav-next"></button>

    <div class="slider-indicators">
        <button class="active"></button>
        <button></button>
        <button></button>
    </div>
</div>
</$swiffy-slider>
\end

<<swiffyCarousel "[tag[Language]tag[Icon]]">>

Install the Swiffy Slider Plugin then download this file: SwiffyMacro.json (788 Bytes)
& drop onto your TiddlyWiki. You can adapt the filter in the final line to fetch images of your choice.

4 Likes