Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Bootstrap 3 slider Box on slider

Posted on 2014-01-16
3
Medium Priority
?
1,909 Views
Last Modified: 2014-01-16
Hello, I have a div layer (the orage) on the slider instead of the picture, so I can have plain text.


Example
<!--slider -->         
    <div id="myCarousel" class="carousel slide">
    	<!-- 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>
        </ol>   
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item"><img src="images/banner1.png" alt="Banner1"></div>
            <div class="item"><img src="images/banner1.png" alt="Banner2"></div>
            <div class="item"><img src="images/banner1.png" alt="Banner3"></div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
<!--slider end-->

Open in new window

0
Comment
Question by:MickeC
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39784788
I'm not sure what your question is.  

Are you asking how?

Replace
<div class="carousel-inner">
            <div class="active item"><img src="images/banner1.png" alt="Banner1"></div>
            <div class="item"><img src="images/banner1.png" alt="Banner2"></div>
            <div class="item"><img src="images/banner1.png" alt="Banner3"></div>
        </div>

Open in new window


with
<div class="carousel-inner">
            <div class="active item"><img src="images/banner1.png" alt="Banner1"></div>
            <div class="item"><img src="images/banner1.png" alt="Banner2"></div>
            <div class="item">My Text</div>
        </div>

Open in new window

0
 

Author Comment

by:MickeC
ID: 39784805
Sorry but I want the image in the background.
the orange part of the image I want to make into a div which I a set css to orange and have text on it. Div should be poitioneras right
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39784828
OK. Using the bootsrap example http://getbootstrap.com/examples/carousel/ I simply wrapped the copy of the first slide around a div and give it a class called orange. It needs some tweeking but this will get you going.

http://jsbin.com/axEGasI/1/edit

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    .container{width:500px;}
    .orange{
      
      width:300px;
      height:225px;
      background-color:orange;
      opacity:0.7;
      margin-left:100px;
      
    }
  </style>
</head>
<body>
 <div class="container">
    <!-- Carousel
    ================================================== -->
    <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>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://www.luxurydaily.com/wp-content/uploads/2012/11/audi-ski-challenge.jpg" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <div class="orange">
              <h1>Example headline.</h1>
              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
             
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="http://usskiteam.com/sites/default/files/styles/media_main_picture_580x325/public/drupal/news_article/mainimage/2012/218139_10151008665252693_68723542_n.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="http://alpine.usskiteam.com/sites/default/files/styles/media_main_picture_580x325/public/drupal/news_article/mainimage/2014/mancusoZauch.jpg" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div><!-- /.carousel -->
  </div>
</body>
</html>

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question