Logo carousel

Hello guys!

i created a logo carousel that takes ups upto 5 logo’s per slide, but the issue i am facing is that on the mobile view they slide vertically aligned.
check out the footer.

this is the code i used.

<div id="clients-carousel" class="carousel slide" data-ride="carousel" data-interval="4000">
                 
    <ol class="carousel-indicators">
        <li data-target="#clients-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#clients-carousel" data-slide-to="1"></li>
        <li data-target="#clients-carousel" data-slide-to="2"></li>
    </ol>
 
    <!-- Carousel items -->
        <div class="carousel-inner">
            
            <div class="item active">
        	   <div class="row">
            	  <div class="col-sm-2">
                    <a href="#" class="">  
                        <img src="http://ellaecreative.com/wp-content/uploads/2017/01/wakanow_logo.jpg">
                    </a>
                  </div>
                  <div class="col-sm-2">
                    <a href="#" class="">  
                        <img src="http://ellaecreative.com/wp-content/uploads/2017/01/google_logo.jpg">
                    </a>
                  </div>

                  <div class="col-sm-2">
                    <a href="#" class="">  
                        <img src="http://ellaecreative.com/wp-content/uploads/2017/01/girl_effe.jpg">
                    </a>
                  </div>

                  <div class="col-sm-2">
                    <a href="#" class="">  
                        <img src="http://ellaecreative.com/wp-content/uploads/2017/01/exxonmo.jpg">
                    </a>
                  </div>
                  <div class="col-sm-2">
                    <a href="#" class="">  
                        <img src="http://ellaecreative.com/wp-content/uploads/2017/01/citi_logo.jpg">
                    </a>
                  </div>
                  </div>
            </div>
            <div class="item">
<div class="row">
                  <div class="col-sm-2">
                    <a href="#" class="">  
                        <img src="http://ellaecreative.com/wp-content/uploads/2017/02/c24_.jpg">
                    </a>
                  </div>
 
                  <div class="col-sm-2">
                    <a href="#" class="">  
                        <img src="http://ellaecreative.com/wp-content/uploads/2017/02/nike_foundation_logo.jpg">
                    </a>
                  </div>
                  <div class="col-sm-2">
                    <a href="#" class="">  
                        <img src="http://ellaecreative.com/wp-content/uploads/2017/02/usaid_logo.jpg">
                    </a>
                  </div>	  
 <div class="col-sm-2">
    <a href="#" class="">  
        <img src="http://ellaecreative.com/wp-content/uploads/2012/06/kappafr.jpg">
    </a>
</div>
<div class="col-sm-2">
    <a href="#" class="">  
        <img src="http://ellaecreative.com/wp-content/uploads/2012/06/kaptaid.jpg">
    </a>
</div>
</div>
</div>
<div class="item">
<div class="col-sm-2">
    <a href="#" class="">  
        <img src="http://ellaecreative.com/wp-content/uploads/2012/06/rn.jpg">
    </a>
</div>
<div class="col-sm-2">
    <a href="#" class="">  
        <img src="http://ellaecreative.com/wp-content/uploads/2012/06/epipha.jpg">
    </a>
</div>

<div class="col-sm-2">
    <a href="#" class="">  
        <img src="http://ellaecreative.com/wp-content/uploads/2012/06/meado.jpg">
    </a>
</div>
<div class="col-sm-2 col-xs-2">
    <a href="#" class="">  
        <img src="http://ellaecreative.com/wp-content/uploads/2012/06/sheleads.jpg">
    </a>
</div>
<div class="col-sm-2">
    <a href="#" class="">  
        <img src="http://ellaecreative.com/wp-content/uploads/2012/06/c.jpg">
    </a>
</div>
</div>
<div class="item">
<div class="col-sm-2">
    <a href="#" class="">  
        <img src="http://ellaecreative.com/wp-content/uploads/2012/06/tra.jpg">
    </a>
</div>

<div class="col-sm-2">
    <a href="#" class="">  
        <img src="http://ellaecreative.com/wp-content/uploads/2017/03/jji.jpg">
    </a>
</div>
<div class="col-sm-2">
    <a href="#" class="">  
        <img src="http://ellaecreative.com/wp-content/uploads/2012/06/cognt.jpg">
    </a>
</div>
<div class="col-sm-2">
    <a href="#" class="">  
        <img src="http://ellaecreative.com/wp-content/uploads/2012/06/law-scl.jpg">
    </a>
</div>
<div class="col-sm-2">
    <a href="#" class="">  
        <img src="http://ellaecreative.com/wp-content/uploads/2012/06/paa.jpg">
    </a>
</div>
            </div>
        </div>

    <a data-slide="prev" href="#clients-carousel" class="left carousel-control">‹</a>
    <a data-slide="next" href="#clients-carousel" class="right carousel-control">›</a>
</div><!--.Carousel-->

can someone help me

It looks like much of your code isn’t showing. Would you care to go back and edit it?

To preserve and display a formatted block of code, preceed the block (document) with three backticks on a line by themselves and end the block with three more backticks on a line by themselves, like this:
```
your HTML and CSS document here
```

OR

highlight your block of code and click the </> icon in the menu bar. That should accomplish the same thing.

I’ve properly edited the line of code on my question

In what way is the footer a part of this issue? Are you locating this carousel in the footer?

the Carousel is located at the footer, Its a client logo carousel.

OK, thank you.

Unfortunately, the HTML code on its own is not very helpful to diagnose the cause of the problem; we’d need to see the full CSS, too.

Perhaps you could set up a test page which demonstrates this problem.

1 Like

I think the bootstrap carousel is only meant for one image at a time and if you want more than one image you would need to place them all in the same item. Of course that means for your example of 5 images across that they become very small images on smaller screens.

e.g. Working example.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel-inner .item {
	white-space:nowrap;
	font-size:0;
	width:100%;
}
.carousel-inner a {
	display:inline-block;
	font-size:1rem;
	width:20%;
}
.carousel-inner img {
	width:100%;
	height:auto;
	display:block;
}


</style>
</head>
<body>
<div class="container">
  <div id="clients-carousel" class="carousel slide" data-ride="carousel" data-interval="4000">
    <ol class="carousel-indicators">
      <li data-target="#clients-carousel" data-slide-to="0" class="active"></li>
      <li data-target="#clients-carousel" data-slide-to="1"></li>
      <li data-target="#clients-carousel" data-slide-to="2"></li>
    </ol>
    
    <!-- Carousel items -->
    <div class="carousel-inner">
      <div class="item active"> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2017/01/wakanow_logo.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2017/01/google_logo.jpg"> </a>  <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2017/01/wakanow_logo.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2017/01/google_logo.jpg"> </a>  </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2017/01/citi_logo.jpg"> </a> </div>
      <div class="item"> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2017/02/c24_.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2017/02/nike_foundation_logo.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2017/02/usaid_logo.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2012/06/kappafr.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2012/06/kaptaid.jpg"> </a> </div>
      <div class="item"> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2012/06/rn.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2012/06/epipha.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2012/06/meado.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2012/06/sheleads.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2012/06/c.jpg"> </a> </div>
      <div class="item"> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2012/06/tra.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2017/03/jji.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2012/06/cognt.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2012/06/law-scl.jpg"> </a> <a href="#" class=""> <img src="http://ellaecreative.com/wp-content/uploads/2012/06/paa.jpg"> </a> </div>
    </div>
    <a data-slide="prev" href="#clients-carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#clients-carousel" class="right carousel-control">›</a> </div>
  <!--.Carousel--> 
  
</div>
</body>
</html>

There are plenty of other responsive carousels around to choose from that may work better.

Thank you. i havent logged into Sitepoint in a few days. I think this would be helpful.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.