I'm having trouble with the responsive version of JSSOR slider.
I'm using full width slider.
My content and my navbar is in a container of 1250px width margin: 0 auto;.
What I want is that I put the captions also in this container.
Then the captions will align completely with my navbar and content.
But the slider also scales my container.
Is there a fix that the slider ignores my container?
Here is some demo code:
<div class="home-slider">
<div class="slides">
<div>
<img src="img.jpg" />
<div class="container">
<div u="caption" t="text" style="position: absolute; top: 60%; left: 70px;">
<p class="slider-caption-small">Lees meer over:</p>
</div>
</div>
</div>
</div>
</div>
Everything in the slides container should be always be scaled along with the slider.
If you want an element not scale with slider, please move it out and specify noscale="true" attribute.
<div class="home-slider">
<div class="slides">
...
</div>
<div noscale="true" class="container">
<div u="caption" t="text" style="position: absolute; top: 60%; left: 70px;">
<p class="slider-caption-small">Lees meer over:</p>
</div>
</div>
</div>
Related
How I can align the icon to the rightcorner position.
but it needs to be responsive too.
I have tried using header in ionic but the right alignment is not working properly.
<div class="bar bar-header" style="background-color:silver;">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
By right corner position, do you mean you want it to be on the header bar's right corner side?
If so, any button/a tag after h1 div would be placed on the right side.
<div class="bar bar-header">
<button class="button icon ion-navicon"></button>
<h1 class="title">Header Buttons</h1>
<button class="button">Edit</button>
</div>
If not, can you provide a codepen so I can take a look?
You can try this with position: absolute on image span. Something like this:
<div class="bar bar-header" style="background-color:silver; position:relative">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align" style="position:absolute; right: 10px; top: 5px;">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
You can also use float: right:
<div class="bar bar-header" style="background-color:silver;">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align" style="float:right">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
I guess this might solve your problem of right aligning your image along with responsive design.
i want to display carousel as half image slider instead of full page slider.
CSS:
html,
body {
height: 40%;
margin: auto;
}
header.carousel {
height: 40%;
margin:auto;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 40%;
margin:auto;
}
header.carousel .fill {
width: 100%;
height: 40%;
background-size:cover ;
margin: auto;
}
HTML:
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!--first slide-->
<div class="item active">
<img src="image/stylegirl.jpg" style="width:100%">
<div class="carousel-caption">
<h1 class="toggleCaption">Text Test</h1>
<div class="toggleButton">
<p><a class="btn btn-default-outline btn-lg" role="button"> Test Button</a></p>
</div>
</div>
</div>
<!--second slide-->
<div class="item">
<img src="image/couple.jpg" style="width:100%">
<div class="carousel-caption">
<h1 class="toggleCaption">Test Text</h1>
<div class="toggleButton">
<p><a class="btn btn-default-outline btn-lg" role="button">Test Button</a></p>
</div>
</div>
</div>
<!--Third Slide-->
<div class="item">
<img src="image/w1.jpg" style="Width:100%">
<div class="carousel-caption">
<h1 class="toggleCaption">Test Text</h1>
<div class="toggleButton">
<p><a class="btn btn-default-outline btn-lg" role="button"> Test Button</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
jsfiddle
Image is missing from the fiddle coz i don't know how to add image from the local file.
It shows half slider image only when i use height in px instead of %.
But still it is showing as full page slider carousel. Why is that.
Any help.
I would like to swipe sideways between sections of a questionnaire. Each section has a header and a number of answered questions. I would like to add a vertical scroll on the questions, but can't figure out how to get it working. Here is my view:
<ion-view title="{{vm.title}}">
<ion-slide-box show-pager="true" class="has-header">
<ion-slide ng-repeat="s in vm.sections">
<ion-item class="item-royal">
{{s.Heading}}
</ion-item>
<ion-scroll>
<div class="card" ng-repeat="q in s.Questions">
<div class="item item-divider">
{{q.Text}}
</div>
<div class="item">
{{q.Answer}}
</div>
</div>
</ion-scroll>
</ion-slide>
</ion-slide-box>
</ion-view>
I found a solution that fixes the specific problem I was having, but creates another. I added a div to the ion-scroll and set heights on the ion-scroll and the new div:
<ion-scroll style="height:300px">
<div style="height:100%">
<div class="card" ng-repeat="q in s.Questions">
<div class="item item-divider">
{{q.Text}}
</div>
<div class="item">
{{q.Answer}}
</div>
</div>
</div>
</ion-scroll>
This causes two problems:
I don't want to specify the height of the ion-scroll in pixels - I'd like it to fill the remaining space in the window.
The pager appears in front of the scroll window - I'd like it to appear below.
EDIT Then I found a second solution:
<ion-view title="{{vm.title}}">
<ion-slide-box show-pager="true" class="has-header"
style="position:absolute; bottom: 0;left: 0;right: 0; ">
<ion-slide ng-repeat="s in vm.sections">
<ion-item class="item-royal">
{{s.Heading}}
</ion-item>
<ion-content>
<div class="card" ng-repeat="q in s.Questions">
<div class="item item-divider">
{{q.Text}}
</div>
<div class="item">
{{q.Answer}}
</div>
</div>
</ion-content>
</ion-slide>
</ion-slide-box>
</ion-view>
Changes made
Set the style of the ion-slide-box to position:absolute; bottom: 0;left: 0;right: 0; (The top is already specified by the has-header class)
Use ion-content around the part I want to scroll instead of the ion-scroll and the div
Live with the pager in front. It looks fine!
Edit 2
I'd also recommend using Crosswalk if you are having scroll problems with older Android devices.
For Ionic 4 get it to scroll vertically with some css.
<ion-slide><div class="scrollVertically">stuff to scroll...</div></ion-slide>
.scrollVertically{
overflow: auto;
height: 100vh;
}
I have solved this with this simple css:
ion-slides { height: initial; }
For ionic 2, you need to use <ion-slides>. <ion-slide-box> has been deprecated.
I would like to add a caption outside the image tag in the jssor Plugin
<div>
<img u="image" src="bilder/bild2.jpg" />
<div class="caption" u="caption" ><p>Caption text</p></div>
</div>
So that the caption wouldn't overlay the image - but be placed under it. (How) is that possible?
please use inline styles of 'position, top, left, width, height' for caption.
<div>
<img u="image" src="bilder/bild2.jpg" />
<div class="caption" style="position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;" u="caption" ><p>Caption text</p></div>
</div>
does anyone know how to use a single H1 tag effectively in a Jssor full width slider so that the tag also stretches and resizes with the slider when browser resizes?
Please just do it as what you can imagine. See following,
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px;
height: 500px; overflow: hidden;">
<div>
<img u="image" src="../img/1920/red.jpg" />
<h1>your content here</h1>
</div>
<div>
<img u="image" src="../img/1920/red.jpg" />
<h1>your content here</h1>
</div>
</div>