Control the number of carousel frames displayed

[Hawk]

I have the page shown in the picture below. I want the user to control the number of carousel frames show by inserting the number into mobiletextinput. Assuming I have 5 carousel items, I want to hide last 2 if the user insert 3 and tab to confirm the number. Is that possible?

I have created 'value change' envent of 'mobileinputtext_7' to run java script:

var selectedValue = this.value;
var carousel = $('[name=mobilecarouselItem_8]');
Appery( 'mobilecarouselItem_8' ).refresh();

I think my logic is correct, it is just that my script is missing the part that conrols the number of frames shown. I am not familiar with carousel features. What do I need to add to my script? Is there any other properties need to change? I deeply appreciate your help

[Evgene Karachevtsev]

Hello Hawk,

You should read this section completely devoted to the carousel:
http://devcenter.appery.io/documentat...

[Hawk]

Hi Evgene,

Indeed I did read that section. The only thing I can think about is using the method 'getFrame' with the index of frames to display in a loop.

var selectedValue = this.value;
var data = $('[name=mobilecarouselItem_8]');
var newData = data[selectedValue];
for(i = 0; i < newData.length; i++) {
var show_frame mobile_carouselItem_8.getFrame(i)
show_frame.show()}
Appery( 'mobilecarouselItem_8' ).refresh();

And using hide() to not show other frames. Is my logic correct? how about using getFrame() and show() methods.

[Evgene Karachevtsev]

Hawk,

Please try this code on a event value change on the input:

code
var val = parseInt($(this)&#46;val());
var items = $("&#46;ui-carousel-item");
var indicators = $("&#46;ui-carousel-indicator");
items&#46;each(function(){$(this)&#46;show();});
indicators&#46;each(function(){$(this)&#46;show();});
if (val < items&#46;length){
for(var i = 0; i < items&#46;length;i++){
items&#46;eq(val+i)&#46;hide();
indicators&#46;eq(val+i)&#46;hide();
}
} /code

[Hawk]

I have tested the App, it works fine except one thing. When the user insert 3 into the input text, the number of frames and indicators become 3 and the user can navigate through the frames using the indicators. However, if the user swipes through the frames without the indicators, after the third frame, the user has to swipe twice (for frames number 4 & 5) to show the first frame again. Means he needs full cycle (5 swipes) to return to the first frame even though the number of frames shown is 3!. I tried to use remove() instead of hide() but swiping stops at the last item and does not move to start circling all over again.

In addition, I have tried another method wrapearly(), as follow:

var val = parseInt($(this).val());

var items = $(".ui-carousel-item");

var indicators = $(".ui-carousel-indicator");

items.each(function(){$(this).show();});

indicators.each(function(){$(this).show();});

//items.eq.wrapearly(val);

if (val < items.length){

for(var i = 0; i < items.length;i++){

items.eq(val+i).hide();

indicators.eq(val+i).hide();

}

}

Unfortunately, it did not change anything. And the console did not show any error or warning!

How to control the number of swipes? I deeply appreciate your help

[Hawk]

Hi Evgene,

I have tested the App, it works fine except one thing. When the user insert 3 into the input text, the number of frames and indicators become 3 and the user can navigate through the frames using the indicators. However, if the user swipes through the frames without the indicators, after the third frame, the user has to swipe twice (for frames number 4 & 5) to show the first frame again. Means he needs full cycle (5 swipes) to return to the first frame even though the number of frames shown is 3!. I tried to use remove() instead of hide() but swiping stops at the last item and does not move to start circling all over again.

In addition, I have tried another method wrapearly(), as follow:

var val = parseInt($(this).val());

var items = $(".ui-carousel-item");

var indicators = $(".ui-carousel-indicator");

items.each(function(){$(this).show();});

indicators.each(function(){$(this).show();});

//items.eq.wrapearly(val);

if (val < items.length){

for(var i = 0; i < items.length;i++){

items.eq(val+i).hide();

indicators.eq(val+i).hide();

}

}

Unfortunately, it did not change anything. And the console did not show any error or warning!

How to control the number of swipes? I deeply appreciate your help

[Yurii Orishchuk]

Hi Hawk,

There is "remove" method supported in Apperyio carousel component that's you can use.

Here is ready solution for you:

pre

var hideLastItemsCount = 2;

&#47;&#47;Note: you need replace "mobilecarousel_2" with your carousel component&#46;
var carousel = jQuery('[name="mobilecarousel_2"]')

var framesCount = carousel&#46;carousel("length");

&#47;&#47;Remove frames loop&#46; You can adjust it in accordance with your needs&#46;
for(var i = framesCount - hideLastItemsCount - 1; i < framesCount; i++)
carousel&#46;carousel("remove", i);

/pre

Note: please read comments to the code.

Regards.

[Hawk]

Hi Yurii, I tried to use remove method as follow:

var val = parseInt($(this).val());
var items = $(".ui-carousel-item");
var indicators = $(".ui-carousel-indicator");
items.each(function(){$(this).show();});
indicators.each(function(){$(this).show();});
if (val < items.length){
for(var i = 0; i < items.length;i++){
items.eq(val+i).hide();
indicators.eq(val+i).hide();
}
obilecarousel_8.carousel("remove", iitems.length - val);
}

For some reason, it did not work. If I insert 3, the user still has to do 5 swipes to go to the beginning. The last two no animation. In addition, is there add method supported? As I need to remove and add frames based on the number inserted in inputText.

[Yurii Orishchuk]

Hawk,

Did you see my solution above?

I've tested it and it's worked for me.

So please use this code to get it work.

Regards.

[Hawk]

Hi Yurri,

Your script is working perfectly for removing frames. However, it seems it delete them such that if the user insert 3 then 5, the App won't show 5 frames. I want when the user insert 3, the App shows three frames. When the user insert 5, the App shows 5 frames. Assuming the user won't insert any number greater than the highest default number (which is 5 in this case). So when the user insert 3, the last two will be hidden, but not remove, so that when the user insert 4, another frame will show and so on. I hope I managed to explain what I am trying to achieve. Let me know if you have any questions.

Thank you in advance for your help