Hi so I've used the command:
<script type='text/javascript'>
$(document).ready(function() {
$('.carousel').carousel({
interval: 4500
})
});
right before my closing body tag in order to get my bootstrap carousel to start and scroll through automatically.
The problem is that the last slide briefly resizes to a smaller height (moving the whole page up with it) before sliding back to the first slide.
To explain: All the slide images are the same size and all show at the same size as they slide through. But the last slide shortens (decreases in height) quickly before the first slide appears again (the first slide is shown back at the correct/original height of the slides). This is annoying because the temporary decrease in slide height causes the entire page to shift upwards.
To clarify, the last slide is initially starting at the correct height, then for a split second before sliding back to the first slide the last slide shortens in height. The first slide is then shown at the correct height again.
I have no idea what is causing this?
This is because there is no default height for the carousel slides. To keep the slides at a consistent height, add a predefined height or min-height to the slide's css. Example:
.carousel-inner .item {
min-height: 400px;
}
I use min-height in case my content overflows on different devices.
Related
I need to make slick slider where next slider from right is cropped by half, but not from the left side. I did it with set up slidesToShow: 1.5, like in the screen below.
But also I need to make that if it's the last slide, then the previous slide should cropped by half and after the last slide there is not empty space, like in the screen below.
And if I swipe back it should be like in the first screen, cropped by the right side only.
How can I achieve this? I was looking for examples but didn't find much.
Just add folowing css
div.slick-list{
padding:0 50px 0 0;
}
I would like to display a sliding panel in my project, from a bottom fixed div (so sliding in the top direction).
This sliding panel will be used to extend a view of an existing element.
I have some problems to make it works great (where to start sliding, respect the padding of his parents, etc, etc)
I made a Plunker of a sample project representing my problem :
In this Plunker i would like to :
open my sliding panel from the top of my div (in red). As you will notice, when you click on the button to open it, the sliding panel start his animation from the bottom of the page and go over my div (in red).
align my sliding panel with my div (in red).
So here are my questions:
How can i start my sliding animation from the top of my div (in red).
I already tried that :
.sliding-panel-wrapper {
/* Other Css property */
margin-bottom: /*Height of the red div*/;
bottom: 0;
}
$("#mybtn").click(function() {
// Increase height instead of moving it from outside of the page to inside
$("#slidingPanel")[0].style.height= '500px'
});
This solution works for the starting position of my panel, but i don't want the sliding panel to increase his size, but to slide .
How can i give him the exact same size / padding / margin etc etc than the div in red ( because recursively looking for padding and margin of his parent seems not to be the best solution).
Edit : I'm looking for a "generic" solution if possible, i would like to be able that my sliding panel adapt itself to the constraint that i defined above if they change (so i would like to avoid giving hard coded value in my css).
Edit 2: Summarizing my question is : How can i make a panel slide NOT from the bottom of the page, but from the Top of another div (Please see my plunker)
If i'm understanding your question, you would like a sliding panel which is off page and then when a button is clicked it slides on page.
If this is the case then this will answer your question.
This is the html code which sets a div id as slide. The button has an onclick function called Slide().
<div id="slide"></div>
<button onclick="Slide()">Slide</button>
Make sure the div has a position of fixed and then set the bottom attribute to whatever you require.
#slide{
position:fixed;
bottom:-52%;
background-color:red;
width:100px;
height:500px;
right:0;
transition:1s;
}
This javascript is called when you click the Slide button. If the div is off screen then it will "slide" onto screen and if the div is on screen then it will "slide" slide off screen. But make sure you set your values to suit your needs because these values may not work for your solution.
var a = false;
function Slide() {
if (a) {
$('#slide').css('bottom', '-52%');
a = false;
}
else {
$('#slide').css('bottom', '0%');
a = true;
}
}
Any questions, just ask.
I am using jssor`s simple fade slider and It is working fine but there is an issue with height and width ..
Actually I am using the width as percentage and the problem cause by it is that as I increases width height also increases similarly for vice versa..
What I want is height of the slider remain fixed but the width changes accordingly ..
The most I've been able to do is get the slider to scale the width before initializing, essentially working like 100% width and fixed height.
The only problem is it doesn't scale if the window resizes.
Either way, for anyone interested, just update the slider container divs with JS right before you initialize Jssor:
<!-- Jssor Trigger -->
<script>
var parentWidth = document.getElementById('slider').offsetWidth;
document.getElementById('slider1_container').style.width=parentWidth+'px';
document.getElementById('slider1_slides').style.width=parentWidth+'px';
jssor_slider1_starter('slider1_container');
</script>
If your page has a vertical scrollbar, you might have to call this code after the ending tag of the div you're getting your width value from, or simply just before closing the body tag.
I have a layout of divs that all 'clear', like in a list. I use jQuery's built in fadeOut function to make them disappear after a certain amount of time. That all works great. The divs disappear one at a time starting from the top. jQuery uses to fading opacity and finally display:none to 'fadeOut' the div. When the top div finally fades out (to display:none) the divs underneath it all move up, but they jump up. I was wondering if there is a way to make this a smooth (slide) transition? TIA
Maybe you can do your animation before setting the display:none to you your previous div. Set first div opacity to 0, move your second div to the fist div position with a setInterval or setTimeout, then hide your first div with display:none ... then rinse and repeat.
I am using Swipeview (http://cubiq.org/swipeview) to create a touch-enabled carousel working on an iPhone and Android. The basics works great.
My problem starts when i try to get it to show 25% of the next slide pr default. The idea is that the user can see 1/4 of the next slide/image, which should then make them slide the image to reveal the next slide/image. The first image then disapears, the second image becomes 100% visible, aligned to the left, and the 3rd image is then visible by 1/4. And so on.
I have tried changing the div.style.cssText (in swipeview.js) to have a width of 75% instead of the default 100%. This works for the initial load, but when i scroll, the part of the 2nd image that was visible on slide 1, is now hidden on slide 2.
I made a fiddle to demonstrate: http://jsfiddle.net/zeqjN/1/ (test it in Chrome and try dragging the image to the left)
Any ideas as to how i can modify swipeview.js to fit my needs?
You can achieve this with css only. Just add a scale effect on the items.
.scroller .scroll-item { float: left; -webkit-transform: scale3d(1.1,1.1,1.1) }
Check out:
http://jsfiddle.net/frapporti/Xt9dM/