Hi, I’ve a problem with Bootstrap Carousel Slideshow.
I’ve made a full page carousel, but when I scroll down the page and I click on next button the next page for a few seconds become white with at the top the contents of the page. This is an image of the problem:
How can I resolve it?
HTML
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" id="home">
<div class="vertical-center">
<div class="container">
<div class="row">
<section class="col-md-12 underconstruction animated fadeIn">
<h1>Alex Palaz</h1>
<p>Web Designer Freelance... e non solo</p>
<div class="row">
<div class="col-md-4" id="handle">
<i class="fa fa-desktop fa-5x" aria-hidden="true"></i>
<h2>Landing Page</h2>
<p>Sito Web Responsive per pc, tablet e smartphone. Bello, semplice e dinamico sviluppato con frameworks di ultima generazione.</p>
</div>
<div class="col-md-4" id="handle">
<i class="fa fa-wordpress fa-5x" aria-hidden="true"></i>
<h2>Blog/Interactive Website</h2>
<p>Avere un blog o sito web interattivo con dei propri utenti è diventato ormai essenziale per garantire affidabilità e visibilità, ma la gestione è prima di tutto.
Richiedi il tuo sito e scopri come gestirlo nella maniera più semplice con la piattaforma WordPress.</p>
</div>
<div class="col-md-4" id="handle">
<i class="fa fa-shopping-cart fa-5x" aria-hidden="true"></i>
<h2>E-commerce</h2>
<p>Ci siamo! E' il momento di vendere, vendere e.. vendere! Attraverso il CMS Prestashop, potrai avere in breve tempo il tuo sito e-commerce e cominciare subito a proporre i tuoi articoli.</p>
</div>
</div>
<div class="row">
<div class="col-md-4" id="handle">
<i class="fa fa-paint-brush fa-5x" aria-hidden="true"></i>
<h2>Graphic Requests</h2>
<p>Loghi, impaginazione editoriale, manifesti, biglietti da visita e tanto altro. Lavori grafici realizzati con i migliori software costantemente aggiornati. Cosa aspetti? Richiedi il tuo lavoro grafico!</p>
</div>
<div class="col-md-4" id="handle">
<i class="fa fa-video-camera fa-5x" aria-hidden="true"></i>
<h2>Video Editing</h2>
<p>Ti serve un video per pubblicizzarti o semplicemente vuoi ricordare i migliori momenti vissuti in compagnia di qualcuno? Realizzo video in Full HD con Final Cut Pro X, Pinnacle Studio e Adobe Premiere Pro.</p>
</div>
<div class="col-md-4" id="handle">
<i class="fa fa-music fa-5x" aria-hidden="true"></i>
<h2>Music Production</h2>
<p>Vuoi realizzare un video, ma ti serve una base musicale per farlo. Produco musica digitale da oltre tre anni grazie ad appositi sequencer professionali come Logic Pro X.</p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="item" id="chisono">
<div class="vertical-center">
<div class="container">
<div class="row">
<section class="col-md-12 underconstruction animated fadeIn">
<h1>Chi sono</h1>
</section>
</div>
</div>
</div>
</div>
<div class="item" id="project">
<div class="vertical-center">
<div class="container">
<div class="row">
<section class="col-md-12 underconstruction animated fadeIn">
<h1>Progetti</h1>
</section>
</div>
</div>
</div>
</div>
<div class="item" id="preventivo">
<div class="vertical-center">
<div class="container">
<div class="row">
<section class="col-md-12 shadowbox animated fadeIn">
<h1>Preventivo</h1>
<br>
<form class="form-group" method="post" action="subscribe.php">
<label for="email">Hai bisogno urgentemente di un sito? Inserisci la tua Email, sarò io a contattarti:</label>
<input type="text" class="form-control input-sm" id="name" name="name" tabindex="1">
<button type="submit" value="Submit" name="submit" class="btn btn-default" tabindex="90">INVIA</button>
</form>
<a href="http://www.linkedin.com/in/alessandropalazzesi"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a>
</section>
</div>
</div>
</div>
</div>
<div class="item" id="contact">
<div class="vertical-center">
<div class="container">
<div class="row">
<section class="col-md-12 underconstruction animated fadeIn">
<h1>Contatti</h1>
<p></p>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<span class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" onclick="replace()">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</span>
<span class="right carousel-control" href="#myCarousel" role="button" data-slide="next" onclick="replace()">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</span>
</div>
I don’t know if this is the problem you are alluding to but on slides that are taller than the viewport you will get a slight jump as the scrollbar kicks in.
The only option is to put the vertical scrollbar in place to start with.
e.g.
html{overflow-y:scroll}
Not sure if that is the problem you were talking about though.
I think we are talking about different things as the code I gave would stop the jump between slides but I believe you may be referring to a redraw problem in Chrome that I notice when scrolling.
If you add the following code does the problem go away?
I realise that the background attachment changes the way the image is displayed but it was just a test to see if we are talking about the same problem.
Unfortunately Chrome does suffer badly from redraw problems especially in heavy usage and when flex box or animation is used.The usual fix is to trigger the 3d rendering with a transform style but doesn’t seem to make a difference in this case.
I may still be looking at a different problem to you anyway.
Can we start again as I think I’m debugging different problems to you:)
The code I gave above would have made a big difference to the first slide but you didn’t mention that which makes me think you are looking at some other behaviour.
First describe your platform and browser version (and if indeed the same problem occurs on different browsers).
Then could you explain in more verbose terms what I should be looking for; what happens; and what you would like to happen?
At present the only detail you mention is this:
the second section appear instantly from the top… This is the last problem.
I don’t know what you mean as the animation you gave shows the second slide coming in from the right and not from the top.
Your page is quite complex and I have spent quite a while digging around already so if you want me to look again you will need to offer more than “tried but still doesn’t work” otherwise I may just keep on debugging problems you haven’t noticed
I use Mac OS X with Safari browser but I have the same problem with Chrome and other browsers.
Ok… Resize dimension of the page, try slightly to scroll the page and click on the next button. You will see that:
The problem is that the page content (in HTML i’ve used tag <section>) appears from the top of page and instantly back to the center. I would like that thought I scroll the previous page when i click the next button the next page show the content aligned center without it comes from the above.
The problem seems to be that your first slide is taller than the body and creates a vertical scrollbar and thus when you slide to the next item which doesn’t have a scroll there will be a jump while the scroll position resets itself.
You could apply overflow:auto to the carousel instead of the body triggering the scrollbar and that would stop the jump but then you would see the right scrollbar scroll away with the slide which isn’t very neat either.
Alternatively you could set the middle black section on that home page to have its own scrollbar rather than the viewport but again that may not look so nice either but will stop the jump.
The only other option I can think of is to use some js to hide the overflow on the home page when the arrow is clicked. That will stop the next slide jumping but will make the current slide reset to the top although it will happen much quicker and perhaps not look as jumpy as the current version.
Anyway try it and see if it helps or gives you other ideas.
Add this js to the end of the html (if you omit the document ready):
I’m not sure how that question relates to the task in hand as you only have the one carousel in a page or do you have more than one running?
I think I’d need to see where else you need this to work before I can think about modifying the code.
It should be possible to make it more generic using a class instead of #myCarousel but we would need to then get references pertaining to that instance of the carousel and not all carousels.
That assumes the carousel has a class of .carousel (which it has anyway). The only change I made to the html was to use a class of .home on the element called #home.
The script works, but just only for ID home because I’ve compiled the next ID but If I click on the next button from “home” I can’t scroll down the next page with ID called “chisono”
Are you referring to your original script or the fix that I just gave you to stop the jump? The fix i gave you has nothing to do with the workings of the carousel and is just there to stop the jump because the home slide is longer than the viewport.
I don’t see a scroll down anywhere? You are sliding sideways to get to the id=“chisono” and it will work without the id (although you were lose the styling because your css is using that ID).
You may need to show me another example or again clarify the problem (cause and effect).
Now resize the window and click on the next button… As you can see, yes the jump is stopped, but I can’t do the scroll on the next page… There’s a solution to fix this problem?
OK, I see, you mean you can’t scroll the content in that new page (words are important).
On the section called #chicono you have now created a page that is also greater than the viewport so you are running in to the same problem as the home section. The main problem is that you are using the slider in the wrong way and sliders are not meant for sliding unlimited height fluid content but for sliding fixed height slides that stay within the viewport.
There seems little point in scrolling horizontally when the content is greater than the viewport and perhaps you should re-think what you are doing here?
I mentioned these points earlier and said that you should be putting the centred content in an element that is viewport height and has its own scrollbar and then all the problems would have disappeared.
At present you are probably stuck withh applying overflow:hidden while the item slides and then removng it after a short delay.
The above code should hide the overflow while it slides and then remove the css after a short delay. We are at the limits of my JS here so anything more complicated would be too difficult for me.
Also seeing as you now have content greater than the viewport you will get a jump as the viewport scrollbar kicks in and once again I offer the css I already gave you to make the viewport scrollbar visible by default.
