How to create an auto image slider with bullets

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

sc12
Posts: 10
Joined: Mon Jan 11, 2021 2:04 am

How to create an auto image slider with bullets

Post by sc12 » Mon Jan 11, 2021 2:47 am

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! :)

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9579
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: How to create an auto image slider with bullets

Post by dunbarx » Mon Jan 11, 2021 3:09 am

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

sc12
Posts: 10
Joined: Mon Jan 11, 2021 2:04 am

Re: How to create an auto image slider with bullets

Post by sc12 » Mon Jan 11, 2021 4:38 am

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!

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: How to create an auto image slider with bullets

Post by richmond62 » Mon Jan 11, 2021 9:47 am

Carousel.jpg
-
Link removed as updated version available lower down.

ALL on a single card.

Have Fun! 8)
Last edited by richmond62 on Mon Jan 11, 2021 8:50 pm, edited 1 time in total.

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9579
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: How to create an auto image slider with bullets

Post by dunbarx » Mon Jan 11, 2021 3:54 pm

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

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9579
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: How to create an auto image slider with bullets

Post by dunbarx » Mon Jan 11, 2021 3:55 pm

Richmond.

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

Craig

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: How to create an auto image slider with bullets

Post by richmond62 » Mon Jan 11, 2021 4:33 pm

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.

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9579
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: How to create an auto image slider with bullets

Post by dunbarx » Mon Jan 11, 2021 5:12 pm

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

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: How to create an auto image slider with bullets

Post by richmond62 » Mon Jan 11, 2021 5:17 pm

How about that for fun?
I'm not sure I'm feeling that kinky right now. 8)

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9579
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: How to create an auto image slider with bullets

Post by dunbarx » Mon Jan 11, 2021 6:49 pm

Richmond.

You need to trim those thumbnails.

Craig

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: How to create an auto image slider with bullets

Post by jacque » Mon Jan 11, 2021 7:32 pm

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.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: How to create an auto image slider with bullets

Post by richmond62 » Mon Jan 11, 2021 8:49 pm

Carousel.jpg
-
Cripes what was I thinking?

Click on the thumbnails . . .

https://www.dropbox.com/s/924539j5u7s9i ... e.zip?dl=0
Last edited by richmond62 on Mon Jan 11, 2021 8:51 pm, edited 1 time in total.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: How to create an auto image slider with bullets

Post by richmond62 » Mon Jan 11, 2021 8:51 pm

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)

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: How to create an auto image slider with bullets

Post by bogs » Mon Jan 11, 2021 8:56 pm

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!
Image

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: How to create an auto image slider with bullets

Post by richmond62 » Mon Jan 11, 2021 11:39 pm

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

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”