Page 1 of 3

How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 2:47 am
by sc12
Hi! I'm new to Livecode and coding, so I'm trying to display a series of images on one of the cards on my mobile app. I would also like to add bullets to the image slider that automatically change to the right slide as the image changes. However, I'm not sure where or how to start this. Does anyone have any idea and would kindly give tips or pointers on how to begin? Thanks a lot! :)

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 3:09 am
by dunbarx
Hi.

I am not sure I get what you are trying to do. What are these "bullets"?

Presenting a series of images can be done either by changing cards, or by showing and hiding the images themselves. Cards can change with numerous visual special effects, including "sliding" gadgetry.

but do you want the images to move, or the windows themselves to "slide" as images change.

Can you explain so even I can understand? This may take some effort.

Craig

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 4:38 am
by sc12
Hi, thank you for replying. So I wanted to show a slideshow of images that will automatically show the next image, so right beneath the image will be a row of bullets (for example 3 bullets indicating 3 images). It is like a CSS image slider. For example if the card is showing image 1, the first bullet will be highlighted while the rest of the bullets are not. Then image 1 auto changes to image 2 with the second bullet being highlighted while the rest are not and vice versa. Is it possible to implement this just on the image object (that is on one card only) rather than making a slideshow which requires switching to different cards? I apologise if I was being unclear, do let me know if you still don't understand, thank you very much!

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 9:47 am
by richmond62
Carousel.jpg
-
Link removed as updated version available lower down.

ALL on a single card.

Have Fun! 8)

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 3:54 pm
by dunbarx
Ah. I see now.

But what if there are a LOT of images? Those bullets will become unmanageable, no?

So what do they actually do for you, apart from indicating approximately where in the library the current image sits? You do not, I assume, intend that the user select a particular bullet, click on it, and have the associated image appear, do you? In other words, are these bullets just a sort of progress bar?If so, I would use an actual progress bar, so that the relative position of the current image still is indicated, but it does not matter how many there are,.

Craig

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 3:55 pm
by dunbarx
Richmond.

I could not download your stack. I got a message that ".Livecode" files cannot be downloaded.

Craig

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 4:33 pm
by richmond62
You need to download it as the ZIP files rather than get DropBox to look inside the ZIP file.

And, while I am here: I did NOT implement clicking on the individual 'bullets'.

I agree with your remarks about the bullets, and, frankly I think the whole thing is a bit silly,
and wonder if things might not be better by displaying numbers in a text box.

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 5:12 pm
by dunbarx
sc12.

Well, silly or not, can you tell us what your intent with the bullets are? Usually they indicate the actual "page" or tab that is currently displayed. The user can also use them to navigate forward or backward by clicking on any of them. As i mentioned, they become unwieldy if there are more than just a handful or so.

You can have any sort of "progress" bar, though, perhaps one that shows the actual image number. And you can have that progress bar throw some sort of selection gadget that allows the user to either move forward or backward, or explicitly select a destination.

If you really work at this, you can have thumbnails appear along the length of the bar. How about that for fun?

Craig

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 5:17 pm
by richmond62
How about that for fun?
I'm not sure I'm feeling that kinky right now. 8)

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 6:49 pm
by dunbarx
Richmond.

You need to trim those thumbnails.

Craig

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 7:32 pm
by jacque
Images can also be changed using only a single image object by updating its content. That can save a lot of space since you don't need to have multiple cards or images in the stack.

If you have more bullets than space under the image, I've seen examples where there are small arrows at the sides that allow users to move to the next set. Usually these are thumbnails though, see for example how eBay does it.

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 8:49 pm
by richmond62
Carousel.jpg
-
Cripes what was I thinking?

Click on the thumbnails . . .

https://www.dropbox.com/s/924539j5u7s9i ... e.zip?dl=0

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 8:51 pm
by richmond62
Images can also be changed using only a single image object by updating its content.
Indeed: but I have a fixation on the backGroundPattern of graphic objects. 8)

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 8:56 pm
by bogs
I might add that the "bullets" could also be put in a group box.

For instance, if there were only say, 10 bullets / pics, the groupbox would show all the bullets. more than 10, the groupbox would either have a scrollbar, or a slider or other indicator that more bullets were not visible at the moment.

The effect actually works very well in some cases.
aPic_imgPlay.png
#1 with a bullet!

Re: How to create an auto image slider with bullets

Posted: Mon Jan 11, 2021 11:39 pm
by richmond62
The effect actually works very well in some cases.
It might work even better if you uploaded that stack so we could play with the bullets.
-
bulletsLC.png