Jump to content

Carousel doesn't show correctly


harry_ord

Recommended Posts

I'm using a Carousel mad in JQuery, this is the HTML where the carousel is displayed:

<div class="row" style="background-color: rgb(30, 152, 138); padding: 60px;">
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="row">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><h4>Vesto</h4>
</div>
</div>
<div class="item">
<div class="col-xs-4"><h4>Cow Guard</h4>
</div>
</div>
<div class="item">
<div class="col-xs-4"><h4>Monarch</h4>
</div>
</div>
</div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>

And this is the script:


<script>
$('#myCarousel').carousel({
interval: 4000
});
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 4; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
<script>
$(document).on('click', 'a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
</script>

I don't know why, but the elements in the carousel are displayed twice.

This is the whole code:

https://github.com/ashcrimson/codelco/blob/master/index.html

 

Link to comment
Share on other sites

It has to, or when it zoom left or right you would just have blank empty spaces showing before it finally end with required element in centre, that's it why it clones already present elements, and add to the beginning and end to give impression it is looping round.

Link to comment
Share on other sites

Being that is a 4 day old slideshow, contact the developer, and explain the problem OR use this instead

   $('#myCarousel').carousel({
                interval: 4000
            });
            var itemCount = 0;
            var elementlength = $('.carousel .item').length;
            itemArray = [];
            //var ItemWidthCalc = 100 / elementlength;

            //$('.carousel .item > div').each(function() {
               // $(this).css({'width': ItemWidthCalc + "%"});
            //});
            $('.carousel .item').each(function() {
                var clonethis = $(this).clone().html();
                itemArray.push(clonethis);
            });
            $('.carousel .item').each(function() {
                itemCount = $(this).index();
                for (i = 0; i < elementlength - 1; i++)
                {
                    itemCount++;
                    if (itemCount > elementlength - 1)
                    {
                        itemCount = 0;

                        $(this).append(itemArray[itemCount]);

                    }
                    else
                    {

                        $(this).append(itemArray[itemCount]);

                    }

                }

            });
Link to comment
Share on other sites

I suspect it was looping through new elements cloned as well, I did get it to work, by doing complicated calculation to reduce looping to give correct result, which worked for three items, but mine should work more than 3 items and adjust accordingly, notice width adjust code as well(commented out).

Link to comment
Share on other sites

  • 2 weeks later...

Please, please, please! I need help with this again.

I tried to put new elements in the carousel and they appear on a next row instead of appearing in the same one.

I tried doint this, but it didn't work as expected and look terrible:

<div class="item active">
<div class="col-xs-2 columna-item" ><h4 >Metro<br> Valparaíso</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-2 columna-item"><h4 >Hospital de Urgencia <br>Asistencia Pública</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-2 columna-item"><h4>Qstudio</h4>
<p>Diseño en Base a Cobre</p>
</div>
</div>
<div class="item">
<div class="col-xs-2 columna-item"><h4>Kawell</h4>
<p>Innovación en el Cuidado Equipo</p>
</div>
</div>
<div class="item">
<div class="col-xs-2 columna-item"><h4>Estación Baquedano Metro de Santiago</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-2 columna-item"><h4>EcoSea Farming</h4>
<p>Innovación en acuicultura</p>
</div>
</div>
<div class="item">
<div class="col-xs-2 columna-item"><h4>Centro de Concentración Juan Pinto Durán</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-2 columna-item"><h4>Clinica Mayo</h4>
<p>Investigación sobre implantes ortopédicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-2 columna-item"><h4>Hospital del Cobre, Calama</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-2 columna-item"><h4>Hospital FUSAT</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-2 columna-item"><h4>Hospital Roberto del Río, Stgo</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>

 

Link to comment
Share on other sites

Oops! Something went wrong!, Oops! Something went wrong!, Oops! Something went wrong! FINALLY! Something went right! WAIT! No! Oops! Something went wrong! Again! FINALLY! Something went right! and Answer

Bootstrap uses 12 grid setup, count number of '2' in 'col-xs-2', they should total up to 12 for each single row, any beyond 12, will create another row.

Link to comment
Share on other sites

Ok, that fixes it again:

<div class="carousel slide" id="myCarousel">
<div class="row">
<div class="carousel-inner" style="text-align: center;">
<div class="item active">
<div class="col-xs-1 columna-item" ><h4 >Metro<br> Valparaíso</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-1 columna-item"><h4 >Hospital de Urgencia <br>Asistencia Pública</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-1 columna-item"><h4>Qstudio</h4>
<p>Diseño en Base a Cobre</p>
</div>
</div>
<div class="item">
<div class="col-xs-1 columna-item"><h4>Kawell</h4>
<p>Innovación en el Cuidado Equipo</p>
</div>
</div>
<div class="item">
<div class="col-xs-1 columna-item"><h4>Estación Baquedano Metro de Santiago</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-1 columna-item"><h4>EcoSea Farming</h4>
<p>Innovación en acuicultura</p>
</div>
</div>
<div class="item">
<div class="col-xs-1 columna-item"><h4>Centro de Concentración Juan Pinto Durán</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-1 columna-item"><h4>Clinica Mayo</h4>
<p>Investigación sobre implantes ortopédicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-1 columna-item"><h4>Hospital del Cobre, Calama</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-1 columna-item"><h4>Hospital FUSAT</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>
<div class="item">
<div class="col-xs-1 columna-item"><h4>Hospital Roberto del Río, Stgo</h4>
<p>Intervenciones en espacios públicos</p>
</div>
</div>


But it still looks terrible. How can i make it to display 3 elements in a row, then other 3 different elements in the same row, then other more and go on like that?
Link to comment
Share on other sites

Ok, i found the solution.

I just needed to create more carousels and put them side by side, like this:

<div class="row carrusel" >
<div style="width: 100%; text-align: left;">
<div class="col-xs-4 carousel slide" id="myCarousel">
<div class="carousel-inner" style="text-align: center;">
<div class="item active">
<h4 >Metro<br> Valparaíso</h4>
<p>Intervenciones en espacios públicos</p>
</div>

Then this:

<div class="col-xs-4 carousel slide" id="myCarousel2">
<div class="carousel-inner" style="text-align: center;">
<div class="item active">
<h4 >Estación Baquedano Metro de Santiago</h4>
<p>Intervenciones en espacios públicos</p>
</div>

And add 1 script for every single carousel without the clone function like this:

<script>
$('#myCarousel2').carousel({
interval: 4000
});
var itemCount = 0;
var elementlength = $('.carousel .item').length;
itemArray = [];
//var ItemWidthCalc = 100 / elementlength;
//$('.carousel .item > div').each(function() {
// $(this).css({'width': ItemWidthCalc + "%"});
//});
$('.carousel .item').each(function() {
itemArray.push();
});
$('.carousel .item').each(function() {
itemCount = $(this).index();
for (i = 0; i < elementlength - 1; i++)
{
itemCount++;
if (itemCount > elementlength - 1)
{
itemCount = 0;
$(this).append(itemArray[itemCount]);
}
else
{
$(this).append(itemArray[itemCount]);
}
}
});
</script>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...