How to Use Background Image in BootStrap .carousel-control -

-

can please let me know how can update .carousel-control css use background image this arrows image?
tried update css code adding 

position:absolute; display:none; top:50%; margin-top:-28px; z-index:60; height: 50px; width: 51px; background-image: url(http://www.promap.ca/img/arrows.png); /*max-height:20%; max-width:12%; background-size:200% 200%;*/

to following code didn't go through!

.carousel-control {     position: absolute;     top: 40%;     left: 15px;     width: 40px;     height: 40px;     margin-top: -20px;     font-size: 60px;     font-weight: 100;     line-height: 30px;     color: #ffffff;     text-align: center;     background: #222222;     border: 3px solid #ffffff;     -webkit-border-radius: 23px;     -moz-border-radius: 23px;      border-radius: 23px;      opacity: 0.5;      filter: alpha(opacity=50);  }  .carousel-control.right {     right: 15px;     left: auto; }  .carousel-control:hover, .carousel-control:focus {     color: #ffffff;     text-decoration: none;     opacity: 0.9;     filter: alpha(opacity=90); }

bootstrap carousel orientation

i'm not sure where want image go. gets put important

look @ bootply see each of css background colors gets applied - that's image go:

.carousel .container {   background-color: red; }  .carousel-control {   background-color: green; }  .carousel .item {   background-color: black; }  .carousel-caption h1, .carousel-caption .lead {     background-color: yellow; }

screenshot

customize carousel arrows

i'm guessing you're trying customize arrows since that's name of image file.

by default arrow image < or > character using glyphs specify content of anchor tag before selector seen in bootstrap.css file here:

.carousel-control .icon-prev:before { content: '\2039'; } .carousel-control .icon-next:before { content: '\203a'; }

you can add whatever content you'd left , right arrows specifying in innerhtml of arrow anchor tags

<div id="mycarousel" class="carousel slide">   <div class="carousel-inner">...</div>   <a class="left carousel-control" href="#mycarousel" data-slide="prev">       <img src="http://i.imgur.com/qpwsddp.png"/>   </a>   <a class="right carousel-control" href="#mycarousel" data-slide="next">       <img class="flipped" src="http://i.imgur.com/qpwsddp.png" />   </a> </div>

if have different image next arrow, can use that, or can apply css class , flip horizontally following css:

.flipped {     -webkit-transform: scale(-1, 1);      -khtml-transform: scale(-1, 1);        -moz-transform: scale(-1, 1);         -ms-transform: scale(-1, 1);          -o-transform: scale(-1, 1);             transform: scale(-1, 1); }

also, add css carousel image defaults don't apply arrows:

#mycarousel img {     width:  20px !important;     height: 40px !important; }

demo in jsfiddle


Comments

Post a Comment

Popular posts from this blog

c++ - Creating new partition disk winapi -

-
i'am trying create new partition , mount volume new, thought createfile let me this, code : lpctstr lpfilename=l"\\\\.\\device\\harddisk0\\partition3"; handle handl=createfile( lpfilename, generic_read | generic_write, file_share_read | file_share_write, null, create_always, file_attribute_normal, null ); if (handl==invalid_handle_value) { qdebug()<<"handl invalid"<<" error"<<getlasterror();} bool success = definedosdevice(ddd_raw_target_path,l"i:",l"\\device\\harddisk0\\partition3"); if(!success) qdebug()<<" definedosdevice failed "<<getlasterror(); bflag = getvolumenameforvolumemountpoint( l"i:\\", // input volume mount point or directory /** u in dir
Read more

Android Prevent Bluetooth Pairing Dialog -

-
i'm developing internal application uses bluetooth printing. want bluetooth pairing occur without user input. have managed working trapping android.bluetooth.device.action.pairing_request broadcast. in broadcast receiver call setpin method, , pairing works ok, bluetoothpairingdialog displayed second or two, disappears - see link below. https://github.com/android/platform_packages_apps_settings/blob/master/src/com/android/settings/bluetooth/bluetoothpairingdialog.java since broadcast non-ordered, can't call abortbroadcast() , , wondering if there other way prevent pairing dialog appearing. can hook window manager in way? i haven't been able come way without modifying sdk. if you're oem, it's easy (i'm on 4.3): in packages/apps/settings/androidmanifest.xml, comment intent filter pairing dialog: <activity android:name=".bluetooth.bluetoothpairingdialog" android:label="@string/bluetooth_pairing_request"
Read more

php - joomla get content in onBeforeCompileHead function -

-
i'm developing joomla system plugin. need add javascript , css files if [myshortcode] shortcode found in content. how can content in onbeforecompilehead function function onbeforecompilehead() { $document = jfactory::getdocument(); //add scripts if shortcode found ... $document->addstylesheet($cssfile, 'text/css', null, array()); the $content = jresponse::getbody(); not work. thanks try this, for style sheet, $document = jfactory::getdocument(); $document->addstylesheet('http://domain.com/templates/css/style.css'); for javascript file $document = jfactory::getdocument(); $document->addscript('full url'); also can this, $document = jfactory::getdocument(); // add javascript $document->addscriptdeclaration(' window.event("domready", function() { alert("an inline javascript declaration"); }); '); // add styles $style = 'body {'
Read more