html - How to display previous and next images with a Bootstrap carousel -

-

the effect i'm looking can seen in following image, carousel 3 images.

how can make bootstrap carousel show left , right images opacity of 0.7?

http://i.imgur.com/6fladwl.jpg

the following carousel template.

<div class="col-md-10 center-block">     <img id="logo" src="./img/yoox_group.png" alt="yoog group" />      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">         <!-- indicators -->         <ol class="carousel-indicators">             <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>             <li data-target="#carousel-example-generic" data-slide-to="1"></li>             <li data-target="#carousel-example-generic" data-slide-to="2"></li>         </ol>          <!-- wrapper slides -->         <div class="carousel-inner" role="listbox">             <div class="item active">                 <img src="./img/carousel/carousel-001.jpg" alt="..." />                 <div class="carousel-caption">                 </div>             </div>             <div class="item">                 <img src="./img/carousel/carousel-002.jpg" alt="..." />                 <div class="carousel-caption">                 </div>             </div>             <div class="item">                 <img src="./img/carousel/carousel-003.jpg" alt="..." />                 <div class="carousel-caption">                 </div>             </div>         </div>         <!-- controls -->         <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">             <img id="arrowleft" src="./img/arrow_left.png" />             <span class="sr-only">previous</span>         </a>         <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">             <img id="arrowright" src="./img/arrow_right.png" />             <span class="sr-only">next</span>         </a>     </div> </div> 
#arrowleft {     background-color: #fff;     padding: 10px 8px;     position: absolute;     margin-left: -95px;     top: 45%;     z-index: 5;     display: inline-block; } #arrowright {     background-color: #fff;     padding: 10px 8px;     position: absolute;     margin-left: 67px;     top: 45%;     z-index: 5;     display: inline-block; }

expanding on this answer question, if add following css code provide effect you're looking for.

we have expand .carousel-inner larger .carousel, center , hide overflow of .carousel.

to obtain opacity effect, expand size of previous , next arrow containers, set translucent white background.

bootstrap >= 3.3.0

in bootstrap version 3.3.0 there change in css invalidated previous method. current method.

(demo)

.carousel {     overflow: hidden; } .carousel-inner {     width: 150%;     left: -25%; } .carousel-inner > .item.next,  .carousel-inner > .item.active.right {     -webkit-transform: translate3d(33%, 0, 0);     transform: translate3d(33%, 0, 0); } .carousel-inner > .item.prev,  .carousel-inner > .item.active.left {     -webkit-transform: translate3d(-33%, 0, 0);     transform: translate3d(-33%, 0, 0); } .carousel-control.left,  .carousel-control.right {     background: rgba(255, 255, 255, 0.3);     width: 25%; }

bootstrap < 3.3.0

(demo) 

.carousel {     overflow: hidden; } .carousel-inner {     width: 150%;     left: -25%; } .carousel-inner .active.left {     left: -33%; } .carousel-inner .next {     left: 33%; } .carousel-inner .prev {     left: -33%; } .carousel-control.left, .carousel-control.right {     background: rgba(255, 255, 255, 0.3);     width: 25%; }

Comments

Post a Comment

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

-
i have problem namespace of spring security on xhtml page. don't understand why can't load uri, , have following issue: whitelabel error page application has no explicit mapping /error, seeing fallback. tue jul 21 16:58:12 utc 2015 there unexpected error (type=not found, status=404). please need help! possible uri has been changed? best regards you using incorrect namespace url. correct url http://www.springframework.org/schema/security the error page seeing spring source website since not recognize url. try visiting http://www.springsource.org/security/tags in browser update : spring security tags used in jsp page correct tag lib declaration is: <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
Read more

sql - MySQL query optimization using coalesce -

-
can explain me why second query faster first? (first 1 takes around 40 seconds, second 1 less 0.1) select releases.feature_code, releases.platform_id, version, release_date, general_available, uri, filesize, display_name, feature_name.full_name, if ((select exists(select 1 release_exceptions releases.feature_code = release_exceptions.feature_code , releases.platform_id = release_exceptions.platform_id , releases.version = release_exceptions.version) = 1), 1, 0) release_exceptions releases left outer join platform using(platform_id) left outer join feature_name using(feature_code) order version desc; ~~~ query 2 ------------------ ~~~ select feature_code, version, release_date, general_available, platform_id, uri, filesize, display_name, feature_name.full_name, coalesce(release_exceptions, 0) release_exceptions mus.releases left outer join ( select distinct feature_code, version, platform_id, 1 release_exceptions mus.release_exceptions ) release_exceptions using ...
Read more

unity3d - Unity local avoidance in user created world -

-
i'm using unity3d networked multiplayer online game have large complex 3d terrain scene forest, trees, cliff, hills, mountains, bounders, etc. players can build structures sort of minecraft, , put them anywhere in scene, or move them around anytime. aside human controlled players, there automated ai players , objects animals roaming around scene following path. the problem how make these automated ai players , animals, able navigate around static , dynamic player created structures, because path follow can blocked player created structures, or other players , other ai objects, cliffs etc. have find away around them or on track if tumble down off high cliff example. so made navmesh , used navagents, takes care of static, non moving objects, how make ai players navigate around each other , dynamic structures created players can number in hundreds? i thought of adding navmeshobstacle everything, result in being attached hundreds of objects since user created structures b...
Read more