I would like to format a slider so that a text title appears above the image and a button appears below. Is it possible create a slider similar to the attached screenshot?
You can place any html code in each slide,
<div u="slides">
<div>
<img u="image" src="url" />
<div style="position: absolute; top: npx; left: npx; width: npx; height: npx;">
Your text here
</div>
<div class="yourbutton" style="position: absolute; top: npx; left: npx; width: npx; height: npx;">
Your button text
</div>
</div>
</div>
Related
I am trying to get the hero and footer sorta fixed, so when the page is scrolled, the content will roll over the (unmoving) hero and when you get to the end of the contents, the also unmoving footer will be revealed.
I have messed with data-scroll-sticky and data-scroll-target with no success. Can anyone shed a light?
Any help is appreciated!
Codepen
<section scrollContainer>
<div scrollSection class="panel hero">hero</div>
<div scrollSection class="panel cont1">content</div>
<div scrollSection class="panel cont2">more content</div>
<div scrollSection class="panel cont3">even more content</div>
<div scrollSection class="panel footer">footer</div>
</section>
This Way You Can Use Sticky Footer
<div data-scroll-section class="sticky-footer">
<div class="fixed-target" id="fixed-target"></div>
<div class="fixed-element" data-scroll data-scroll-sticky data-scroll-target="#fixed-target">
<div class="container">....</div>
</div>
</div>
CSS
.sticky-footer {
position: relative;
overflow: hidden;
height: 100vh;
}
.fixed-target {
bottom: -100vh;
}
.fixed-element,
.fixed-target {
position: absolute;
top: -100vh;
right: 0;
left: 0;
}
.fixed-element {
height: 100%;
width: 100%;
background: url(../img/black2.jpg);
background-color: black;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
If I put the div where I draw the graph the "style = display: none" attribute, this resizes my chart in half.
<div id='chart_div_inmediata' style='width: 900px; height: 300px;display:none'></div>
Result :
<div id="chart_div_inmediata" class="google-visualization-atl container" style="width: 900px; height: 300px; display: none;">
<div class="" style="position: relative; width: 400px; height: 200px;">
</div>
How do I fix this? Thank!
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>
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>