html - How to change two Div Content in carousel -

-

i want help, change 2 div content in same carousel. below image, have marked content in red, want change when click right or left carousel buttons.

enter image description here

https://jsfiddle.net/austinpeter/cg7hqk0n/

<div class="col-md-12 ourworkinfo" style="position:relative;text-align:center;height:calc(100% - 142px);overflow: hidden; display:none">   <div class="col-md-12" style="padding:0">     <div style="background:#66dbff;height:50px;position:relative;padding:0;">       <div class="col-md-4">         <div id="ourworkcarousel" class="carousel slidec" data-interval="false" data-ride="carousel" style="width: 50%;padding-left: 50px;padding-right: 50px;height:50px">           <div class="carousel-inner" role="listbox" style="height:50px">             <div class="item active" style="top:10px">               infographics             </div>             <div class="item">               interactive<br />               infographics             </div>             <div class="item">               motion<br />               graphics             </div>           </div>           <a class="left carousel-control cleft" href="#ourworkcarousel" role="button" data-slide="prev" style="position:absolute;left:0">             <span aria-hidden="true">               <img src="assets/imgs/left_arrow.png" style="width:25px;" />             </span>             <span class="sr-only">previous</span>           </a>           <a class="right carousel-control cright" href="#ourworkcarousel" role="button" data-slide="next">             <span aria-hidden="true"><img src="assets/imgs/right_arrow.png" style="width:25px;" /></span>             <span class="sr-only">next</span>           </a>         </div>       </div>       <div class="col-md-4"></div>       <div class="col-md-4">         <span>           <img src="assets/imgs/close.png" style="width:25px;vertical-align:central;top: 10px; position: relative;right:20px;" class="pull-right" onclick="closeourwork()" />         </span>       </div>     </div>   </div>   <div class="col-md-12" style="position:relative;height:475px;overflow:hidden;top:10px">     <div class="col-lg-12">       <div class="col-lg-8">         <div class="row">           <div class="col-md-6" style="padding-right:5px;overflow:hidden;">             <div class="ig-im-1" style="height:225px;position:relative;">               <div class="ig-tri-1"></div>               <img src="assets/imgs/ig1.png" class="grayscale" style="overflow:hidden;top:0;left:0; position: absolute;width:100%" />               <div class="ig-im-1-txt">                 pies, charts, , information made<br />interactive, montes nascetur ridiculus<br />mus.               </div>             </div>           </div>           <div class="col-md-6" style="padding-right:5px;overflow:hidden;">             <div class="ig-im-2" style="height:225px;position:relative">               <div class="ig-tri-2">                </div>               <img src="assets/imgs/ig1.png" class="grayscale" style="overflow:hidden; top:0;left:0; position: absolute;width:100%" />               <div class="ig-im-2-txt">                 pies, charts, , information made<br />interactive, montes nascetur ridiculus<br />mus.               </div>             </div>           </div>         </div>         <div class="row" style="position:relative;top:10px">           <div class="col-md-12" style="padding-right:5px;overflow:hidden;">             <div class="ig-im-3" style="height:225px;position:relative;">               <div class="ig-tri-3"></div>               <img src="assets/imgs/ig3.png" class="grayscale" style="overflow:hidden; top:0;left:0; position: absolute;width:100%" />               <div class="ig-im-3-txt">                 pies, charts, , information made<br />interactive, montes nascetur ridiculus<br />mus.               </div>             </div>           </div>         </div>       </div>       <div class="col-lg-4" style="padding-left:0;overflow: hidden; height: 460px;position: relative; left: 10px; width: 32%;">         <div class="ig-im-4" style="height:475px;    padding-left: 0; ">           <div class="ig-tri-4"></div>           <img src="assets/imgs/ig4.png" class="grayscale" style="overflow:hidden; top:0;left:0; position: absolute; width:100%" />           <div class="ig-im-4-txt">             pies, charts, , information made<br />interactive, montes nascetur ridiculus<br />mus.           </div>         </div>       </div>     </div>   </div> </div>

here demo how show/hide text based on current slide's index.

the steps:

  1. use slide.bs.carousel event detect when slide slider replace.
  2. get index of current slide $('.item').index(e.relatedtarget);.
  3. hide .caption , show current $('.caption').hide().eq(index).show();

the full code

$('#mycarousel').on('slide.bs.carousel', function (e) {    // index of slide    var index = $('.item').index(e.relatedtarget);    // hide captions , show caption item's index    $('.caption').hide().eq(index).show();  })
.carousel {    display:inline-block;  }    .caption:not(:first-child) {    display:none;  }
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  <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>      <!-- wrapper slides -->    <div class="carousel-inner" role="listbox">      <div class="item active">        <img src="http://i.stack.imgur.com/ee7xh.jpg">      </div>        <div class="item">        <img src="http://i.stack.imgur.com/uncqm.jpg" alt="chania">      </div>        <div class="item">        <img src="http://i.stack.imgur.com/uv3d4.jpg" alt="flower">      </div>    </div>      <!-- left , 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>  </div>

http://jsbin.com/wuzihaj/edit?html,css,js


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more