cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Locked
0
Upvote

Customizing Left/Right Arrows on Carousel

talk2robby
Explorer ,
Apr 14, 2017 Apr 14, 2017

How do you move the arrows so they are on the picture?


The Carousel span 100% across the page.

i.e.: We get your Business!

I would like to see it look more like on this site.

i.e.: KPMG International | KPMG | CA

Is there any documentation on Carousel customization?  Any advice would be appreciated.

Thanks again.

TOPICS
How to
42.2K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Nancy OShea Community Expert
Community Expert , Apr 15, 2017 Apr 15, 2017

Put your Carousel inside a smaller col.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anony

...
Translate
replies 18 Replies 18
latest latest Jump to latest reply
BenPleysier Community Expert
Community Expert ,
Apr 15, 2017 Apr 15, 2017

Have a look at Bootstrap JS Carousel Reference

Wappler, the only real Dreamweaver alternative.
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
BenPleysier Community Expert
Community Expert ,
Apr 16, 2017 Apr 16, 2017
LATEST
In Response To BenPleysier

This discussion has been marked correct and so that it does not continue into irrelevance, I have locked the discussion.

If this is an error on my part please PM me with the reason(s).

Wappler, the only real Dreamweaver alternative.
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
Apr 15, 2017 Apr 15, 2017

Typically when dealing with Bootstrap I find it nearly always easier to re-write the css styling rather than try and work out what css properties have been applied by the default Bootstrap css.

Default Bootstrap carousel example below (taken from w3c Bootstrap Carousel ) - look for the revised css and html code between the red /*       */

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>

  .carousel-inner > .item > img,

  .carousel-inner > .item > a > img {

      width: 100%;

      margin: auto;

  }

/* CAROUSEL CONTROLS */

.carousel-controls {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
width: 100%;
top: 43%;
}

.carousel-controls a {

background-color: rgba(255, 255, 255, 0.6);

color: #000;

padding: 10px 14px;

font-size: 30px;

}

.carousel-controls a:hover {

background-color: rgba(255, 255, 255, 0.9);

}

/* END CAROUSEL CONTROLS */

  </style>

</head>

<body>

<div class="container">

  <br>

  <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>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

      <div class="item active">

        <img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">

        <div class="carousel-caption">

          <h3>Chania</h3>

          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>

        </div>

      </div>

      <div class="item">

        <img src="https://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">

        <div class="carousel-caption">

          <h3>Chania</h3>

          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>

        </div>

      </div>

      <div class="item">

        <img src="https://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345">

        <div class="carousel-caption">

          <h3>Flowers</h3>

          <p>Beautiful flowers in Kolymbari, Crete.</p>

        </div>

      </div>

      <div class="item">

        <img src="https://www.w3schools.com/bootstrap/img_flower2.jpg" alt="Flower" width="460" height="345">

        <div class="carousel-caption">

          <h3>Flowers</h3>

          <p>Beautiful flowers in Kolymbari, Crete.</p>

        </div>

      </div>

    </div>

<!-- start carousel controls -->

    <div class="carousel-controls">

    <a href="#myCarousel" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left"></span>

    </a>

   <a href="#myCarousel" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right"></span>

    </a>

    </div>

<!-- end carousel-controls -->

  </div>

</div>

</body>

</html>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
Apr 15, 2017 Apr 15, 2017
In Response To osgood_

Following on from post above - effectively the end of your page code from the closing </html> up would look like:

<!-- start carousel controls -->

<div class="carousel-controls">

<a href="#carousel1" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a href="#carousel1" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>

<!-- end carousel-controls -->

</div>

<footer>&copy; Copyright 1998, Made with 100% recycled pixels.</footer>

</body>

</html>

Then just add the following css to the end of your mainStyles.css file

.carousel-inner > .item > img,

.carousel-inner > .item > a > img {

width: 100%;

margin: auto;

}

/* CAROUSEL CONTROLS */

.carousel-controls {

display: -ms-flexbox;

display: flex;

-ms-flex-pack: justify;

justify-content: space-between;

position: absolute;

width: 100%;

top: 43%;

}

.carousel-controls a {

background-color: rgba(255, 255, 255, 0.6);

color: #000;

padding: 10px 14px;

font-size: 30px;

}

.carousel-controls a:hover {

background-color: rgba(255, 255, 255, 0.9);

}

/* END CAROUSEL CONTROLS */

See if that helps.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
talk2robby
Explorer ,
Apr 15, 2017 Apr 15, 2017
In Response To osgood_

I actually planned on making the banners on the carousel smaller and wanted the left / right arrows to be on the inside edges of the graphic.   I figure out how to move the arrows but it doesn't work well when resizing the browser (using the Media Queries Bars to reset the arrows as browser size changes.)

Is this my only option?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Apr 15, 2017 Apr 15, 2017
In Response To talk2robby

Put your Carousel inside a smaller col.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

.center-block {float:none}

</style>

</head>

<body>

<div class="container">

<div class="row">

<div class="col-md-10 center-block text-center">

<h1>My Awesome Website</h1>

<h2>Some pithy slogan...</h2>

<!--begin Bootstrap Carousel-->

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

<!-- 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>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<div class="item active">

<img src="http://lorempixel.com/1180/400/technics/4" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="http://lorempixel.com/1180/400/technics/3" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="http://lorempixel.com/1180/400/technics/2" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="http://lorempixel.com/1180/400/technics/1" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<!--end active-->

</div>

<!-- Left and right controls -->

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

<span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span class="sr-only">Next</span> </a>

<!--end carousel-->

</div>

</div>

</div>

</div>

<!--latest jQuery-->

<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">

</script>

<!--Bootstrap-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
talk2robby
Explorer ,
Apr 15, 2017 Apr 15, 2017
In Response To Nancy OShea

Thank you Nancy O'shea. 

Your example is exactly what I want.  I updated the changes to 21UCi.com and it is very close and is something I can live with but not exactly like your example.  Let me know if you see anything obvious that I missed.  Or do I just need to make my images bigger. 

I'll try that.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Apr 15, 2017 Apr 15, 2017
In Response To talk2robby

I used a col-md-10.  If your images are smaller, try an 8 or 7.   The column container will constrain the Carousel and Prev/Next arrows for you.   It's much cleaner than messing around with the CSS values.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
talk2robby
Explorer ,
Apr 15, 2017 Apr 15, 2017
In Response To Nancy OShea

Thank you Nancy, you are Awesome to the Max! 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
talk2robby
Explorer ,
Apr 15, 2017 Apr 15, 2017
In Response To Nancy OShea

Hi Nancy, my arrows are now not clickable nor are the little circle icons at the bottom of each image.  I know I must have missed something, but I can't seem to find it, any ideas?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Apr 15, 2017 Apr 15, 2017
In Response To talk2robby

On lines 104 & 105, move your JS scripts to the bottom of your document, below the <footer> tag.

<script src="js/jquery-1.11.3.min.js"></script>

<script src="js/bootstrap.js"></script>

Change the data-target from #carousel1 to #myCarousel.   Save changes and upload to server.

<li data-target="#carousel1" data-slide-to="0" class="active"></li>

<li data-target="#carousel1" data-slide-to="1"></li>

<li data-target="#carousel1" data-slide-to="2"></li>

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
talk2robby
Explorer ,
Apr 15, 2017 Apr 15, 2017
In Response To Nancy OShea

Thanks, that was it.   I had cut an pasted some of the code over and didn't realize that difference.

Thanks again! 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
talk2robby
Explorer ,
Apr 15, 2017 Apr 15, 2017
In Response To talk2robby

Basically if I add this code, I can move the arrows and use Media Queries to change the values as the browser display changes:

.carousel-control {

    z-index: 10;

    top: 2%;

    width: 30px;

    font-family: 'Helvetica Neue', Arial, sans-serif;

}

.carousel-control.left,.carousel-control.right { background: none }

/*change it according to your needs*/

.carousel-control.left  { left: 195px; }

.carousel-control.right { right: 195px; }

I can work with this, but I can't seem to find an option that dynamically keeps the arrows inside the image.   The KPMG example does this "A little bit"  I am now assuming it was probably the same type of manual effort and not something built into bootstrap...

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Apr 15, 2017 Apr 15, 2017
In Response To talk2robby

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Apr 15, 2017 Apr 15, 2017
In Response To talk2robby

See my screenshots and code example above.  You're making this more difficult than it is.

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
Apr 15, 2017 Apr 15, 2017
In Response To talk2robby

talk2robby  wrote

I actually planned on making the banners on the carousel smaller and wanted the left / right arrows to be on the inside edges of the graphic.   I figure out how to move the arrows but it doesn't work well when resizing the browser (using the Media Queries Bars to reset the arrows as browser size changes.)

Is this my only option?

You asked for a solution which looked and worked exactly like the one in the example url you provided, I provided you with that solution. To me the solution I provided looks more accomplished than what you have now, which looks quite poor.

Maybe it was your inability, due to lack of coding knowledge, to introduce the solution into the situation - I cant be responsible for that, you need to learn some html/css if you want to be able to manipulate elements how you visualise them.

How are the arrows positioned on the 'inside edges of the graphic' in the solution you are currenlty using - they are positioned some way inside the graphic?

If you come into the forum then please be sure to ask for what you actually require then that doesnt waste peoples time and effort to provide you with a solution you show an example of and clearly don't want.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
talk2robby
Explorer ,
Apr 16, 2017 Apr 16, 2017
In Response To osgood_

Maybe you should read the other posts before you start with the insults.  The issues were worked out with other people, I followed Nancy's examples exactly, she seems to be pretty knowledgeable, if you have issues with newbie programmers, I don't know how to apologize for that, but I will apologize for somehow hurting your feelings, not sure what I did to you to deserve such an outburst.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Apr 15, 2017 Apr 15, 2017

IMO, that fixed footer has got to go.  It does nothing positive for your site and gets in the way of your carousel.

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices