ionic slider ion-slide-box with width smaller than page width - ionic-framework

is there a way to display several slides at once with the ionic slider (ion-slide-box) ?
Can you help me achive a slider like this one :
Thanks !

I suggest you try to use ion-slides, it uses Swiper API and introduced in ionic v1.2.0.
ion-slides
Ionic Slides in ionic v2
Swiper Demos

ion-slide-box works without any additional CSS. Just ionic.css. Have used it in my app. but as far as I see, it seems to be meant to only show one slide per page. Are you trying to modify CSS and get multiple slides to display per page? If so, I guess that's not the right approach.
This is the description given by Ionic for the ion-slide-box
The Slide Box is a multi-page container where each page can be swiped or dragged between:
See http://ionicframework.com/docs/api/directive/ionSlideBox/

Related

Jssor Slider - Image slider (cannot drag pictures) is not working after recreating the slider

I'm developing a webpage for that contains Jssor slider. I'm using jssor.slider-27.5.0.min.js. The webpage also have daterange picker. I have button that generate Jssor slider based on selected dates.
At default, the webpage brings images for the past 30 days and show them as Jssor slider. At this point, the slider works fine. When the Jssor slider generator is clicked, the existing Jssor slider is removed using $("#jssor_1").html(""). Then another Jssor slider is created and correct image is shown on the webpage. However, I cannot change/drag pictures.
Can you please help me to resolve my issue?
thanks.
Simply clear inner html will break the dom hierarchy of elements, it doesn't work.
You can use $AppendSlides(slidesHtml[, slideIndex]), $RemoveSlides(slideIndices), $ReloadSlides(slidesHtml) to manage slides.
See https://www.jssor.com/development/api-methods-properties-events.html

IONIC 4 add css attributes to ionic components

Does anyone know how to place an icon in a toggle?
Is this even possible with the new shadow dom rules?
https://beta.ionicframework.com/docs/api/toggle/
I have tried placing a icon element in the toggle but no succes.
Thanks,
Kelvijn
It's not possible to add attributes to ion components.
Confirmed by admin from the ionic slack.
Going to make my own slider then.

How to create expandable confirmation design in Ionic

I am a beginner in Ionic and trying to design a layout for Cricket Scoring app.
When use clicks on the buttons a popup should appear for confirmation.
At first I thought I can use it with ion-pull-up footer but it does not work properly.
Can some one please advise me how to achieve similar layout ?
I have attached screenshots here.
Thank you
You can simply use AlertController component.
See https://ionicframework.com/docs/api/components/alert/AlertController/
The best way you can use Ionic Accordion
Reference Links
Link1
Link2

Sliding Tab/menu within ionic template

I am trying to insert 'sliding tabs' within a tabs starter. Basically I'm wanting to use the 'starter' tabs at the bottom, but within one of those tabs (template pages) I want to have a sliding menu (https://github.com/leoruhland/ion-slides-tabs). I've tried what I know and can't seem to figure out how to make it work. Any tips would be helpful.
For simple Ionic slider you can refer from this link http://ionicframework.com/docs/api/directive/ionSlideBox/ and for other your sample INstallation is already showing .You can use that directive and can work. I am also using this in my Project.

Can there be more than one slider using jssor?

I have just started using a library called JSSOR (for sliding elements) http://www.jssor.com/ and I'm wondering if there can be more than one element sliding on the same page.
I couldn't get it to work using a javascript library called marquee (not marquee the tag).
Yes, you can place multiple jssor sliders on one page.
Note that different slider uses different name. If the name of the first slider is slider1, you can name the second slider as slider2 then.
Btw, you can search jssor multiple on stackoverflow.